>

Assignment 5: Movement and Interaction

We’ll look at the latest in CSS3 properties, that allow animation and transformation. When mixed with the event handlers of jQuery, the stabile structures can shift properties upon user interaction.

Websites today are often designed with these subtle shifts in elements. We’ll be making more drastic moves, making the animations and interactions a primary part of our experiments. Start on the below assignment after taking some time in class today to get used to how these interactive elements work.

Create a balloon using HTML and CSS. Use the same working method as you did for your digital bits. You will need more than one element to make the balloon. Inspired by the film, The Red Balloon, and by the actual balloons available in class, experiment with interactions for your balloon(s). Upload your experiments to the site and categorize as Assignment 5.

Examples from class

• Hover state example 1 from class
• Hover state example 2 from class

Examples of interactions

• Pseudo classes
• Hover
• Translate
• Scale
• Rotate
• Animations

CSS Properties we’ll review

• id attribute
• Pseudo classes
• Transition
• gradient
• Transform
• Animation
• Perspective

jQuery events

• jquery example from class
• toggle, hide, show
• toggleClass

Sample code

• Ali’s sample library
• Balloon if you need it

Resources

• “The most important CSS3 properties explained”
• Library of CSS3 animations
• jQuery api: event handlers

36 responses to “Assignment 5: Movement and Interaction”

1. Coldwell Banker says:

   12/10/2014 at 9:03 pm

   … [Trackback]

   […] There you will find 24347 more Infos: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
2. musclebuilding - romanyrest.com says:

   01/19/2015 at 5:05 pm

   … [Trackback]

   […] Read More Infos here: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
3. Commercial Real Estate Loan says:

   01/22/2015 at 4:55 pm

   … [Trackback]

   […] Read More: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
4. wallstickers dk says:

   01/24/2015 at 4:14 pm

   … [Trackback]

   […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
5. bali yoga retreats says:

   02/10/2015 at 6:31 am

   … [Trackback]

   […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
6. porenbeton says:

   02/13/2015 at 1:59 am

   … [Trackback]

   […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
7. isagenix products says:

   02/19/2015 at 8:04 pm

   … [Trackback]

   […] Read More: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
8. commercial real estate says:

   03/21/2015 at 2:18 pm

   … [Trackback]

   […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
9. bridging loans says:

   04/08/2015 at 7:52 am

   … [Trackback]

   […] Find More Informations here: fc12.johncaserta.info/?p=981 […]

   Log in to Reply
10. speed bikes says:

    04/16/2015 at 1:13 pm

    … [Trackback]

    […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
11. www.ilristoranteferrara.it ristorante ferrara says:

    04/20/2015 at 10:18 am

    … [Trackback]

    […] Find More Informations here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
12. gokkasten machines says:

    05/08/2015 at 1:30 pm

    … [Trackback]

    […] Read More here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
13. buy hgh online says:

    05/10/2015 at 1:58 am

    … [Trackback]

    […] Read More: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
14. payday instant loans says:

    05/14/2015 at 6:20 pm

    Trackback

    […]Wow, amazing blog layout! How long have you been blogging for?[…]

    Log in to Reply
15. Payday loans says:

    06/20/2015 at 3:23 am

    …Recent Blogroll Additions

    […]Wow, marvelous weblog format! How lengthy have you ever been running a blog for?[…]

    Log in to Reply
16. www.durbanhotelsgalore.co.za says:

    06/25/2015 at 4:30 pm

    … [Trackback]

    […] Read More Infos here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
17. How to Buy Viagra says:

    07/09/2015 at 6:54 pm

    … [Trackback]

    […] Read More here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
18. affordable seo services says:

    07/13/2015 at 6:06 pm

    … [Trackback]

    […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
19. Cristian Briones says:

    07/16/2015 at 1:44 am

    … [Trackback]

    […] There you will find 42867 more Infos: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
20. Sonne says:

    08/09/2015 at 11:13 am

    … [Trackback]

    […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
21. her latest blog says:

    08/18/2015 at 3:46 pm

    … [Trackback]

    […] Read More here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
22. buy backlinks says:

    08/22/2015 at 9:43 pm

    … [Trackback]

    […] Read More here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
23. reserver hotel pas cher paris says:

    09/22/2015 at 11:43 pm

    … [Trackback]

    […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
24. Redmond WA says:

    09/25/2015 at 10:39 pm

    … [Trackback]

    […] There you will find 29855 more Infos: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
25. Betonline says:

    10/02/2015 at 6:31 am

    … [Trackback]

    […] Read More Infos here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
26. science fiction/click here/fantasy says:

    10/03/2015 at 11:30 pm

    … [Trackback]

    […] Read More: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
27. Kacey Barnfield height says:

    10/07/2015 at 12:57 am

    … [Trackback]

    […] Read More Infos here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
28. Freon Recharge says:

    10/09/2015 at 8:24 am

    … [Trackback]

    […] There you will find 43814 more Infos: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
29. ankara eskort says:

    10/29/2015 at 5:47 am

    … [Trackback]

    […] There you will find 85581 more Infos: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
30. ankara escort says:

    11/13/2015 at 11:45 am

    … [Trackback]

    […] Read More: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
31. ankara orospusu says:

    11/14/2015 at 2:14 am

    … [Trackback]

    […] There you will find 60497 more Infos: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
32. legal steroid pills for muscle growth says:

    11/20/2015 at 11:36 pm

    … [Trackback]

    […] Informations on that Topic: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
33. click here says:

    11/28/2015 at 9:17 am

    … [Trackback]

    […] There you will find 77657 more Infos: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
34. #458B00 says:

    11/30/2015 at 4:32 am

    … [Trackback]

    […] Read More here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
35. porn says:

    11/30/2015 at 7:58 am

    … [Trackback]

    […] Read More here: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
36. seks izle says:

    12/07/2015 at 8:50 am

    … [Trackback]

    […] There you will find 30473 more Infos: fc12.johncaserta.info/?p=981 […]

    Log in to Reply