Reader small image

You're reading from  jQuery for Designers Beginner's Guide Second Edition

Product typeBook
Published inJul 2014
Reading LevelBeginner
Publisher
ISBN-139781783284535
Edition1st Edition
Languages
Tools
Concepts
Right arrow
Author (1)
Natalie Maclees
Natalie Maclees
author image
Natalie Maclees

contacted on 10 may '16 _______________ Natalie MacLees is the founder of Purple Pen Productions (purplepen.com), an interactive agency based in Los Angeles, California. She has been designing websites since 1997 and is a passionate advocate of both accessibility and usability. She loves teaching and sharing her knowledge, both in seminars and workshops and also with her clients. She discovered WordPress a few years ago as a flexible, extendable, and quick way to build robust websites that clients could manage on their own. She is the organizer of the Southern California WordPress Meetup Group. She is also a Google Analytics Qualified Individual.
Read more about Natalie Maclees

Right arrow

Time for action – creating a horizontal animation


Perform the following steps to create a horizontal animation in the windy weather forecast.

  1. Inside index.html, the only change we'll make is to add an id attribute of wind 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&deg; 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 with id, we can get a little performance boost from our code.

  2. Next, we can open up scripts.js and add the details of the animation we'd like to create. Add the following code just below the animation block we...

lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
jQuery for Designers Beginner's Guide Second Edition
Published in: Jul 2014Publisher: ISBN-13: 9781783284535

Author (1)

author image
Natalie Maclees

contacted on 10 may '16 _______________ Natalie MacLees is the founder of Purple Pen Productions (purplepen.com), an interactive agency based in Los Angeles, California. She has been designing websites since 1997 and is a passionate advocate of both accessibility and usability. She loves teaching and sharing her knowledge, both in seminars and workshops and also with her clients. She discovered WordPress a few years ago as a flexible, extendable, and quick way to build robust websites that clients could manage on their own. She is the organizer of the Southern California WordPress Meetup Group. She is also a Google Analytics Qualified Individual.
Read more about Natalie Maclees