Home » Web Programming » Create Parallax Scrolling Effects using CSS – Fixed Images

Create Parallax Scrolling Effects using CSS – Fixed Images

Sponsored

Latest trends in webdesign uses long pages with Parallax Effects on images in between. Nexus5 Website and iPhone 5s are some examples. For parallax effects web pages uses JavaScript plugins but we can achive a parallax like effects for the images appearing in between scrolling pages using some CSS properties. This will increase the performance of the website because we are avoiding a whole javascript plugin and we are getting somewhat same effects using CSS property background-attachment.

This is not the parallax effect it is Alternate Fixed & Scroll Backgrounds. The Background image is not moving it stand still on scrolling. If you want the parallax you want to go for jQuery plugins or javascript codes.

Lets have a look at the HTML Structure of the page.

parallax-effects-css

The HTML structure of the page is very simple. Alternate <div> elements with fixed images and scrolling plain backgrounds and texts

Fixed Images Class is (.pe-fixed-img)

Scrolling Text with plain backgrounds are (.pe-scrolling-box)

In the scrolling segment we are using different colors for different effects. This give the webpage a fresh look.

<main>
  <div class="pe-fixed-img cd-img-1">
     <h1><!-- title goes here --></h1>
  </div>
  <div class="pe-scrolling-box pe-color-2">
      <div class="cd-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>

Adding CSS to the HTML

For the pe-fixed-bg class we are the Fixed value of the CSS background-attachment property. By default the background-attachment value is Scroll, meaning that the background scrolls along with the element. BUT if you set it to be Fixed, the background behaves as a fixed positioned element. That means it moves with regards to the viewport not with the scroll.

That’s it! Few lines of CSS and we have a nice web page design usefull for creating long one-page websites.

body, html, main {
    /* important */
    height: 100%;
}
 
.pe-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
 
.pe-fixed-bg.pe-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.pe-fixed-bg.pe-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.pe-fixed-bg.pe-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.pe-fixed-bg.pe-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}
 
.pe-scrolling-bg {
    min-height: 100%;
}

So using simple css we created a parallax like scrolling effect. It is very lightweight. No javascript and load superfast. This effect is supported on ie9+ and all other browsers (chrome, firefox, safari,opera etc..)

Demo images from Unsplash.

Sponsored

I am a Full stack Web Developer. I'm interested in Web Designing and passionate towards FOSS. I love Linux and like to promote it. A quick leaner, quick implementer, not away from errors, staying for software and knowledge freedom and doing programming in PHP, Mysql, Postgresql, Laravel, Angulajs and more..

Leave a Reply

Your email address will not be published. Required fields are marked *