>

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

58 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
37. Branding says:

    11/12/2018 at 12:50 pm

    Assignment 5: Movement and Interaction | Digital Bits

    https://sites.google.com/site/capratecalculator

    Log in to Reply
38. lebron 10 says:

    12/11/2018 at 1:55 pm

    lebron 10

    snapbackadidas flashbacknike flex experiencenike free

    Log in to Reply
39. stopnica schodowa says:

    12/14/2018 at 9:58 pm

    … [Trackback]

    […] Find More here|Find More|Read More Informations here|Here you can find 93995 more Informations|Informations on that Topic: fc12.johncaserta.info/?p=981 […]

    Log in to Reply
40. free bitcoin cash says:

    01/06/2019 at 8:00 pm

    Assignment 5: Movement and Interaction | Digital Bits

    http://173.45.81.199/weekend.bitcoin.free.apk

    Log in to Reply
41. nileriver says:

    12/30/2019 at 12:22 pm

    Assignment 5: Movement and Interaction | Digital Bits

    http://nileriver.co.vu

    Log in to Reply
42. films year 2020 says:

    12/30/2019 at 5:20 pm

    films year 2020

    films year 2020

    Log in to Reply
43. cupooftea says:

    01/08/2020 at 10:48 am

    Assignment 5: Movement and Interaction | Digital Bits

    http://cupooftea.co.vu

    Log in to Reply
44. serial 2020 says:

    01/08/2020 at 6:35 pm

    serial 2020

    serial 2020

    Log in to Reply
45. serial-video-film-online says:

    01/12/2020 at 9:15 pm

    serial-video-film-online

    serial-video-film-online

    Log in to Reply
46. 2020 says:

    01/13/2020 at 12:26 pm

    2020

    2020

    Log in to Reply
47. Watch Movies Online says:

    01/15/2020 at 11:38 pm

    Watch Movies Online

    Watch Movies Online

    Log in to Reply
48. watch online TV LIVE 2020 says:

    01/16/2020 at 4:49 pm

    watch online TV LIVE 2020

    watch online TV LIVE 2020

    Log in to Reply
49. human design says:

    01/25/2020 at 10:35 am

    human design

    human design

    Log in to Reply
50. dizajn cheloveka says:

    01/25/2020 at 11:12 am

    dizajn cheloveka

    dizajn cheloveka

    Log in to Reply
51. koma 2020 says:

    01/30/2020 at 1:31 am

    koma 2020 film

    koma 2020

    Log in to Reply
52. human design human design says:

    02/10/2020 at 8:24 am

    human design human design

    human design human design

    Log in to Reply
53. DSmlka says:

    02/16/2020 at 6:03 am

    DSmlka

    DSmlka

    Log in to Reply
54. viagra says:

    02/17/2020 at 3:13 am

    viagra

    viagra

    Log in to Reply
55. viagra online says:

    02/17/2020 at 3:54 am

    viagra online

    viagra online

    Log in to Reply
56. ¯jak Son³k says:

    02/20/2020 at 4:29 pm

    ¯jak Son³k

    ¯jak Son³k

    Log in to Reply
57. astrolog says:

    02/20/2020 at 5:45 pm

    astrolog

    astrolog

    Log in to Reply
58. LostFilm HD 720 says:

    02/27/2020 at 2:47 pm

    LostFilm HD 720

    LostFilm HD 720

    Log in to Reply