Наложение изображения при прокрутке (JavaScript) - PullRequest
Новая
       11

Наложение изображения при прокрутке (JavaScript)

0 голосов
/ 03 сентября 2018
  1. Я хочу использовать наложение изображений при прокрутке страницы, например здесь (посмотрите, как появляются капли дождя и рыбы, а при прокрутке исчезает человек).
  2. Я пытался сделать это с эффектом параллакса, используя только CSS, но это не то, что мне нужно, потому что он не работает на мобильных устройствах, как в примере выше. Я буду благодарен, если вы посоветуете мне несколько хаков для JavaScript с помощью «onscroll» или чего-то еще.

Мой код

HTML 

<body>
<div class="parallax">
    <div class="bg_one"></div>
    <div class="bg_two"></div>
</div>
</body>

CSS 

.parallax [class*="bg_"] {
 position: relative;
 height: 900px;
 background-attachment: fixed;
 background-position: center;
 background-size: cover;
}

.parallax .bg_one {
 background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
 background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}

1 Ответ

0 голосов
/ 03 сентября 2018

Это очень хорошая идея!

Я тестировал ваш код не в реальном мобиле, а в Chrome> осмотреть> панель инструментов переключателя (слева вверху). Это позволяет вам тестировать веб-страницу в мобильной среде. Я сделал несколько изменений в вашем CSS, и он начинает работать: 

.parallax [class*="bg_"] {
 position: relative;
 height: 100vh;
 background-attachment: fixed;
 background-position: top center;
 background-size: cover;
}

.parallax .bg_one {
 background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20пни.png);
}
.parallax .bg_two {
 background-image: url(https://raw.githubusercontent.com/AYNesterov/data_sets/master/внутри%20квартиры.png);
}
<div class="parallax">
    <div class="bg_one"></div>
    <div class="bg_two"></div>
</div>
...