Time for action – creating a horizontal animation
Perform the following steps to create a horizontal animation in the windy weather forecast.
- Inside
index.html
, the only change we'll make is to add anid
attribute ofwind
to the<div>
element that contains the weather icon, as follows:<section class="scrollblock" id="wedday"> <div class="day">Wednesday</div> <div class="forecast">69° Windy</div> <div class="icon" id="wind"><img src ="images/Cloud-Wind.svg" alt="Cloudy Windy" width="300" height="300"></div> </section>
Technically, this isn't strictly necessary as we have other available ways to select that item for animation, but selecting an item by
id
is the quickest and most efficient way. By working directly withid
, we can get a little performance boost from our code. - Next, we can open up
scripts...