CSS Parallax scrolling effect
This post explains basics of css parallax scrolling effect which is now quite popular in many websites. Parallax effect generates eye catching scroll effects and your website will probably look more professional. I’m going to show a simple trick which will help you generate that amazing parallax effect.
Demo
Normally we reference a background image to our html body or div tag. To create the parallax effect use this code in your css file :
background-attachment : fixed;
Later with different tags like z-index and box-shadow you can play around with your page and generate eye catching effects. Use below Html and CSS code to generate the effects shown in the above video or Demo.
parallaxDemo.html:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1"> <title>Parallax Demo - ParallelCodes.com</title> <link href="http://i2.wp.com/www.parallelcodes.com/wp-content/uploads/2015/05/camaro_512-5569a880v1_site_icon.png?fit=180%2C180" rel="icon" type="image/x-icon"> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href="ParallaxDemoStyleSheet.css" rel="stylesheet" type="text/css"> </head> <body> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> <div class="div5"> </div> </body> </html>
ParallaxDemoStyleSheet.css:
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin:0px;}
.parallax
{
height:400px;
background-size: cover;
position: relative;
box-shadow: 0 5px 5px rgba(0,0,0,1);
background-attachment : fixed;
}
.one
{
background-image: url(img/img1.jpg);
background-position: center center;
z-index: 5;
}
.two {
background-image: url(img/img3.jpg);
z-index: 4;
}
.three {
background-image: url(img/img2.jpg);
z-index: 3;
}
.four {
background-image: url(img/img3.jpg);
z-index: 2;
}
.centerdiv
{
background:rgba(255,255,255,0.3);
display: flex;
height:400px;
justify-content: center;
align-items: center;
}
Here, I have used div tags such that every before div is upon its next div tag by specifying z-index property of the tags respectively. You can change and see the z-index property and effect of box-shadow will be different. I have aligned each div tag upon its next tag.
You can download the code with Image files from here : Github Link
Do let me know in the comments section below what you think about this post.