parallax Archives - Lena Design

To learn how to create the CSS Parallax Scrolling Effect follow the steps below:

Demo:

Step1.

Add HTML

<div class="image-1">
  <div class="text">
      <span class="background">Scroll Down⬇</span>
  </div>
</div>

<div class="main">
  <h3>TULIPS</h3>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est urna, malesuada sollicitudin tempus non, rutrum eu diam. Suspendisse vitae lobortis ante, sit amet venenatis erat. Nulla sollicitudin placerat sapien id aliquam. Fusce malesuada, est at venenatis sagittis, nulla risus elementum neque, sit amet varius odio sem eget libero. Cras scelerisque ex lectus, vel molestie arcu tristique vulputate. Nunc fringilla suscipit massa. Praesent nulla sem, aliquam et molestie id, eleifend ac nunc. Aliquam augue odio, porta sed lacinia non, iaculis sed lorem. Proin pulvinar ex quis turpis pulvinar fringilla. Ut a risus dictum velit consequat consectetur ut eu nulla. Phasellus a convallis velit. Sed fermentum justo at justo semper, ut semper velit porta. Phasellus luctus est quam, id pulvinar urna consectetur ut. Mauris tristique erat ut risus varius placerat. Vivamus dui arcu, vulputate et mi nec, eleifend rhoncus nunc.
</p>
</div>

<div class="image-2">
  <div class="text">
  <span class="background">Tulip Festival</span>
  </div>
</div>

<div class="someText">
  <div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll up and down to see how Parallax Scrolling works.</p>
  </div>
</div>

<div class="image-3">
  <div class="text">
  <span class="background">Scroll Up⬆</span>
  </div>
</div>

<div class="someText">
  <div style="background-color:#333;text-align:center;padding:50px 80px;text-align: justify;">
  <p>Scroll up and down to see how Parallax Scrolling works.</p>
  </div>
</div>

<div class="image-1">
  <div class="text">
  <span class="background">Thanks!</span>
  </div>
</div>

Step2.

Add CSS

Use the background-attachment: fixed to create the parallax effect:

body, html {
  height: 100%;
  margin: 0;
  font-family: tahoma;
  letter-spacing:2px;
  color: #333;
}

.image-1, .image-2, .image-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}
.image-1 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/1a-1024x576.jpg");
  min-height: 100%;
}

.image-2 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/2a-1024x576.jpg");
  min-height: 450px;
}

.image-3 {
  background-image: url("https://lenadesign.org/wp-content/uploads/2021/07/3a-1024x576.jpg");
  min-height: 450px;
}

.text {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #333;
}

.text .background {
  background-color: #000;
  border-radius:20px;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.main {
  color: #333;
  background-color:#fff;
  text-align:center;
  text-align: justify;
  padding:60px 90px;
}

h3 {
  letter-spacing: 5px;
  font-size: 20px;
  font-family: tahoma;
  color: #333;
  text-align:center;
}

.someText {
  position:relative;
  color: #fff;
}

Add @CSS media rule (the parallax effect won’t work on small screens):

@media only screen and (max-device-width: 1024px) {
  .image-1, .image-2, .image-3 {
    background-attachment: scroll;
  }
}

Enjoy coding!