How to Implement different backgrounds on scroll [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I wanted to replicate the effects as shown here -
https://allods.my.com/en/news (not this one, sorry)
http://bit.do/b2692
https://www.google.co.in/sheets/about
Ignoring all the animations, i wanted to know how can we implement multiple different backgrounds as one scrolls down the page.
PS. I am a complete beginner, i prefer to have an HTML/CSS solution only.

Answer 1

You should try to add position fixed property to Your background , it should help.
body,
html,
main {
/* important */
height: 100%;
}
.fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<h1><!-- title goes here--></h1>
</div>
<div class="scrolling-bg cd-color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-2">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-3">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
<div class="fixed-bg bg-4">
<h1><!-- title goes here --></h1>
</div>
<div class="scrolling-bg color-2">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
</p>
</div>
</div>
</main>
Div after div approach :
body,
html,
main {
/* important */
height: 100%;
padding:0;
margin:0;
}
.container{
position:absolute;
}
.fixed-bg {
min-height: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.fixed-bg.bg-1 {
background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
min-height: 100%;
}
<main>
<div class="fixed-bg bg-1">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-2">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-3">
<div class="container"><!-- content goes here--></div>
</div>
<div class="fixed-bg bg-4">
<div class="container"><!-- content goes here--></div>
</div>
</main>

Answer 2

So you are looking for a parallax effect, there is a number of plugins for that. I recently used http://pixelcog.github.io/parallax.js/ which worked out well for me.
It's very simple to use it. You said you want an HTML / css solution for this, but i don't think you can do it without javascript. If someone else knows the alternative without javascript i'd like to see it also. But even if you don't know much about javascript you can use this plugin, just follow the instructions on the link i provided.
The plugin requires jquery to work!