Image overlay when scrolling (javascript)

user_10008170 0
Viewed 1149
  1. I want to use image overlay when a page is scrolled like here (see how raindrops and fish appear and a man disappears when scrolling).
  2. I tried to make it with parallax effect using CSS only, but it's not what I need, because it doesn't work on mobiles like the example above. I will be thankful if you advise me some javascript hacks with 'onscroll' or something else.

My code

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);
}
scroll overlay javascript
1 Answers

It's a very nice idea!

I've tested your code not in a real mobil but on Chrome > inspect >toggle device toolbar (left top). This allows you to test a web page in a mobil like environment. I've made a few changes in your css and it seems to work: 

.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>

user_78973950
Related