Time for action – creating a parallax effect
Perform the following steps to add a parallax effect to the cloudy weather forecast:
- 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° 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...