O'Reilly logo

jQuery for Designers : Beginner's Guide - Second Edition by Natalie MacLees

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – creating a parallax effect

Perform the following steps to add a parallax effect to the cloudy weather forecast:

  1. We'll get started by adding the layer of clouds that will appear to be furthest away. Inside the section of the cloudy forecast, add a <div> element and place several cloud icons inside it, as shown in the following code:
    <section class="scrollblock" id="tueday"> <div class="day">Tuesday</div> <div class="forecast">67&deg; Cloudy</div> <div class="icon"><img src="images/Cloud.svg" alt="Cloudy" width="300" height="300"></div> <div class="cloud-layer" id="cloud-layer-back"> <img src="images/Cloud.svg" alt="Cloudy" width="100" height="100" id="bcloud1"> <img src="images/Cloud.svg" alt="Cloudy" width="150" height="150" id="bcloud2"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required