What is parallax scrolling
Parallax scrolling, also known as “Asymmetrical scrolling”, is a technique in computer graphics and web design, where background images is moved at a different speed than the foreground content while scrolling, creating an illusion of depth in a 2D scene and adding to the immersion.
Below you can find the CSS and HTML on how to create parallax effect
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: lato;
font-size: 16px;
line-height: 24px;
}
.wrap {
max-width: 980px;
margin: 0 auto;
}
.noncont {
padding: 50px 30px;
font-size: 22px;
}
.noncont h3 {
text-align: center;
font-size: 30px;
margin-bottom: 20px;
}
body,
html {
height: 100%;
}
.parallax {
/* The image used */
/* Set a specific height */
min-height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
.bot {
bottom: 20px;
top: auto;
}
.bgimg1 {
background-image: url("cycle.jpg");
}
.bgimg2 {
background-image: url("cycle2.jpg");
min-height: 500px;
}
@keyframes transdown {
0% {
top: -5px;
}
100% {
top: 5px;
}
}
.dwnar {
animation: transdown 800ms infinite alternate;
position: relative;
margin-top: -10px;
}
HTML
<body> <div class="parallax bgimg1"> <div class="content bot">SCROLL DOWN <i class="fa fa-angle-double-down dwnar" aria-hidden="true"></i> </div> </div> <div class="noncont wrap"> <h3>What is parallax effect in web design?</h3> <p>One fairly recent web design trend is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth.</p> </div> <div class="parallax bgimg2"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam odio, architecto ducimus pariatur, vel eaque temporibus consequuntur placeat voluptas eius repudiandae dicta? Optio harum, laborum velit eligendi necessitatibus accusamus sed.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis nisi fugit, veniam aliquam vero ab commodi, inventore molestias illum praesentium in est reiciendis impedit odio ut quaerat eligendi facilis ipsa.</p> </div> </div> <div class="noncont wrap"> <h3>What is parallax effect in web design?</h3> <p>The parallax effect has been around for years in classic video games, but it became a trend in the web design world. This cool effect is now commonly seen as part of the scrolling feature of a web page. It uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience. The term is derived from the Greek "parallaxis", meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax scrolling can be used to determine distances.</p> </div> </body>
Demo page: click here
Some mobile devices might have problem with “background-attachment: fixed”. However, you can use media queries to turn off the parallax effect for mobile devices by overriding with “background-attachment: scroll:.
You can adjust the height value of absolute positioned content in mobile devices using media queries.
icon in chrome and the infobox appears. Now you can hover over any images and the respective details gets updated in the infobox. To close the picinfo dialog box you can either click on the “Close(X)” icon or click the extension 
icon.
