Simple Parallax Effect using css

Sandilyan 12/15/2020 05:06:00 am

How to create simple parallax animation using css

Here we will see how to create simple parallax animation effect while scrolling the web page. This animation is commonly used in the webpages. It is really simple and nice to see the effect it will attract the customers. We will achieve this effect using simple css code, we will see how to do this animation

Simple-Parallax-Effect-using-css



create a css class and give the below code for this class , the following css code will be given the parallax effect. This is the background image trick, use background image and set background size is cover and the background-attachement is fixed then overflow is hidden then will get this effect.

   position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top !important;
    background-size: cover;
    background-image: url(1.jpg);

I hope this simple parallax animation effect is very useful to you to integrate the webpages. This parallax effect really helpful to the webapages.

Css code for parallax effect:

html, body
{
padding:0px;
margin:0px;
}
.cssparallax1 {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top !important;
    background-size: cover;
 background-image: url(1.jpg);
}


.cssparallax2 {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top !important;
    background-size: cover;
 background-image: url(2.jpg);
}


.cssparallax3 {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top !important;
    background-size: cover;
 background-image: url(3.jpg);
}


.cssparallax4 {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #fff;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top !important;
    background-size: cover;
 background-image: url(4.jpg);
}

section
{
height:550px;
}

Html code for parallax effect:

<section class="cssparallax1">  </section>

<section class="cssparallax2">  </section>

<section class="cssparallax3">  </section>

<section class="cssparallax4">  </section>
Tags
Reactions

Post a Comment

0 Comments