Как сделать чтобы один блок наезжал на другой css
Перейти к содержимому

Как сделать чтобы один блок наезжал на другой css

  • автор:

Как реализовать наезд одного блока на второй при прокрутке?

Здравствуйте, у меня есть 2 блока. один большой и при загрузке сайта открывается на всю высоту и ширину страницы.
Второй такой же только длиннее. Как сделать, что-бы при прокрутке нижний блок наезжал на верхний?
Есть такой код, но тут подключен эффект параллакса и тот блок на который наезжают дергается, может подскажите как «убить» аффект параллакса и тогда все будет работать так как нужно?

var ypos, image; function parallex() < image = document.getElementById('parallaxHead'); ypos = window.pageYOffset; console.log(ypos); image.style.top = ypos * .7 + 'px'; >window.addEventListener('scroll', parallex), false;
#parallaxHead < position: relative; z-index: -1 >#content
  • Вопрос задан более трёх лет назад
  • 5741 просмотр

2 комментария

Оценить 2 комментария

Как заставить блок наезжать на другой?

Author24 — интернет-сервис помощи студентам

Как заставить красный блок при ховере на половину перекрывать желтый блок(желтый должен остаться на месте)?
Как заставить желтый блок при ховере перекрывать красный и зеленый блок поровну(красный и зеленый блоки должны остаться на местах)?
Как заставить зеленый блок на половину уйти вправо и наслоиться на желтый блок?

Лучшие ответы ( 1 )

94731 / 64177 / 26122

Регистрация: 12.04.2006

Сообщений: 116,782

Ответы с готовыми решениями:

Как заставить блок try заработать?
Была задача ускорить работу программы с высокопроизводительными вычислениями (функции, выраженные.

Как заставить обтекать блок?
Доброго времени суток. Бьюсь и мучаюсь с шаблоном. Нашел очень красивый дизайн на вывод блочно.

Как заставить фиксированный блок скролиться?
Всем Здравствуйте! Делаю , что-то на подобие модального окна, но оно очень большое, с позицией.

735 / 352 / 96

Регистрация: 05.05.2014

Сообщений: 2,621

Лучший ответ

Сообщение было отмечено AAChibilyaev как решение

Решение

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
div class="wrap"> div class="one"> div class="subTwo"> /div> div class="subOne"> 1 /div> /div> div class="one" style="height: 150px;margin-top:10px;"> div class="subTwo" style="background: yellow;"> /div> div class="subOne"> 2 /div> /div> div class="one"> div class="subTwo" style="background: green;"> /div> div class="subOne"> 3 /div> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
.wrap{ width:800px; padding: 80px; } .one{ position: relative; float: left; width: 100px; height: 100px; margin-left: 10px; } .subOne{ position: absolute; } .one:hover > .subOne{ width:50px; height: 50px; background: blue; margin-left: -30px; background-color:rgb(255, 255, 255); box-shadow: 2px 3.464px 16px 0px rgba(10, 13, 19, 0.9); z-index: 2; } .subTwo{ position: absolute; width: 100px; height: 100px; background: red; } .one:hover > .subTwo{ width: 150px; z-index: 1; margin-left: -25px }

Курсы javascript

Всем привет.
Я новичок, пытаюсь написать карточную игру на js. Игра почти готова, но что-то я сильно туплю на, казалось бы, самом простом.

Мой вопрос: как сделать так, чтобы карты в «магазине» у бота или юзера динамически наезжали друг на друга.

Сейчас у меня карты отображаются просто одна за другой в ряд (это просто картинки img, которые динамически создаются js). И если игрок много «взял», то они не помещаются и переносятся на другую строку. Что вполне естественно, но как этого можно избежать? Чтобы наглядно показать чего я пытаюсь добиться, прикреплю картинку.

Представьте, сначала раздали 7 карт. Затем, по мере игры, если карт у юзера становится больше, они наезжают друг на друга как на картинке. Как это можно сделать?

Эффект наложения блока при скролле

Модификация добавляет эффект наложения одного блока на другой при скролле страницы. Применить можно к любым стандартным блокам и zero block, которые укажешь в коде. Демо решения.

Как сделать эффект наложения блока при скролле

Для реализации эффекта высота блока должна быть больше высоты экрана.

  1. Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
  2. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *