>

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

115 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
59. kinoxaxru.ru says:

    03/04/2020 at 4:40 am

    kinoxaxru.ru

    kinoxaxru.ru

    Log in to Reply
60. film strelcov says:

    03/09/2020 at 12:31 pm

    film strelcov

    film strelcov

    Log in to Reply
61. t-34 says:

    03/09/2020 at 1:34 pm

    t-34

    t-34

    Log in to Reply
62. canadian online pharmacies says:

    03/10/2020 at 7:55 am

    canadian online pharmacies

    canadian online pharmacies

    Log in to Reply
63. canadian pharmacy says:

    03/10/2020 at 8:21 am

    canadian pharmacy

    canadian pharmacy

    Log in to Reply
64. Beograd film 2020 says:

    03/16/2020 at 6:59 am

    Beograd film 2020

    Beograd film 2020

    Log in to Reply
65. psiholog says:

    03/18/2020 at 6:16 am

    psiholog

    psiholog

    Log in to Reply
66. psyhelp_on_line says:

    03/19/2020 at 7:29 pm

    psyhelp_on_line

    psyhelp_on_line

    Log in to Reply
67. coronavirus says:

    03/20/2020 at 9:59 am

    coronavirus

    coronavirus

    Log in to Reply
68. PSYCHOSOCIAL says:

    03/28/2020 at 9:40 am

    PSYCHOSOCIAL

    PSYCHOSOCIAL

    Log in to Reply
69. rasstanovka hellinger says:

    03/28/2020 at 8:12 pm

    rasstanovka hellinger

    rasstanovka hellinger

    Log in to Reply
70. Cherekasi film 2020 says:

    04/10/2020 at 4:39 am

    Cherekasi film 2020

    Cherekasi film 2020

    Log in to Reply
71. film doktor_liza says:

    04/20/2020 at 5:29 am

    film doktor_liza

    film doktor_liza

    Log in to Reply
72. djoker film says:

    04/20/2020 at 5:06 pm

    djoker film

    djoker film

    Log in to Reply
73. generic viagra says:

    04/23/2020 at 5:47 am

    generic viagra

    generic viagra

    Log in to Reply
74. buy viagra online says:

    04/23/2020 at 7:11 am

    buy viagra online

    buy viagra online

    Log in to Reply
75. gidonline-filmix.ru says:

    04/24/2020 at 5:39 pm

    gidonline-filmix.ru

    gidonline-filmix.ru

    Log in to Reply
76. koronavirus-v-ukraine-doktor-komarovskiy says:

    04/26/2020 at 6:36 pm

    koronavirus-v-ukraine-doktor-komarovskiy

    koronavirus-v-ukraine-doktor-komarovskiy

    Log in to Reply
77. viagra generic says:

    05/13/2020 at 5:12 am

    viagra generic

    viagra generic

    Log in to Reply
78. over the counter viagra says:

    05/13/2020 at 6:20 am

    over the counter viagra

    over the counter viagra

    Log in to Reply
79. Canadian Pharmacies Online says:

    05/13/2020 at 8:33 am

    Canadian Pharmacies Online

    Canadian Pharmacies Online

    Log in to Reply
80. Canadian Pharcharmy Online says:

    05/13/2020 at 11:16 am

    Canadian Pharcharmy Online

    Canadian Pharcharmy Online

    Log in to Reply
81. t.me/psyhell says:

    06/06/2020 at 2:30 am

    t.me/psyhell

    t.me/psyhell

    Log in to Reply
82. Ïñèõîëîã îíëàéí says:

    06/06/2020 at 2:54 am

    Ïñèõîëîã îíëàéí

    Ïñèõîëîã îíëàéí

    Log in to Reply
83. bitly.com says:

    06/14/2020 at 5:45 pm

    bitly.com

    bitly.com

    Log in to Reply
84. viagra 100mg says:

    06/15/2020 at 1:13 pm

    viagra 100mg

    viagra 100mg

    Log in to Reply
85. viagra price says:

    06/15/2020 at 2:17 pm

    viagra price

    viagra price

    Log in to Reply
86. viagra coupon says:

    06/15/2020 at 6:25 pm

    viagra coupon

    viagra coupon

    Log in to Reply
87. cheap viagra says:

    06/15/2020 at 7:33 pm

    cheap viagra

    cheap viagra

    Log in to Reply
88. cialis says:

    06/15/2020 at 9:24 pm

    cialis

    cialis

    Log in to Reply
89. cialis coupon says:

    06/15/2020 at 11:02 pm

    cialis coupon

    cialis coupon

    Log in to Reply
90. canadian pharmacy cialis says:

    06/16/2020 at 5:49 am

    canadian pharmacy cialis

    canadian pharmacy cialis

    Log in to Reply
91. cialis 5mg says:

    06/16/2020 at 10:09 am

    cialis 5mg

    cialis 5mg

    Log in to Reply
92. rlowcostmd.com says:

    07/04/2020 at 2:23 am

    rlowcostmd.com

    rlowcostmd.com

    Log in to Reply
93. movies-tekstmovies-tekst says:

    07/15/2020 at 1:10 pm

    movies-tekst

    movies-tekst

    Log in to Reply
94. Zemlyane 2005 smotret onlajn says:

    07/21/2020 at 2:42 pm

    Zemlyane 2005 smotret onlajn

    Zemlyane 2005 smotret onlajn

    Log in to Reply
95. pharmacy says:

    07/30/2020 at 6:58 am

    pharmacy

    pharmacy

    Log in to Reply
96. generic cialis says:

    07/30/2020 at 8:47 am

    generic cialis

    generic cialis

    Log in to Reply
97. smotret onlajn besplatno v kachestve hd 1080 says:

    08/10/2020 at 1:45 pm

    smotret onlajn besplatno v kachestve hd 1080

    smotret onlajn besplatno v kachestve hd 1080

    Log in to Reply
98. zoom-psykholog says:

    08/21/2020 at 7:44 am

    zoom-psykholog

    zoom-psykholog

    Log in to Reply
99. zoom-viber-skype says:

    08/21/2020 at 4:16 pm

    zoom-viber-skype

    zoom-viber-skype

    Log in to Reply
100. Vratar Galaktiki Film, 2020 says:

     08/27/2020 at 11:32 am

     Vratar Galaktiki Film, 2020

     Vratar Galaktiki Film, 2020

     Log in to Reply
101. Vratar says:

     08/27/2020 at 8:31 pm

     Vratar

     Vratar

     Log in to Reply
102. Cherkassy 2020 says:

     08/28/2020 at 5:32 pm

     Cherkassy 2020

     Cherkassy 2020

     Log in to Reply
103. chernobyl-hbo-2019-1-sezon says:

     08/28/2020 at 9:09 pm

     chernobyl-hbo-2019-1-sezon

     chernobyl-hbo-2019-1-sezon

     Log in to Reply
104. moskva-psiholog says:

     09/01/2020 at 5:32 am

     moskva-psiholog

     moskva-psiholog

     Log in to Reply
105. batmanapollo.ru says:

     09/02/2020 at 8:17 pm

     batmanapollo.ru

     batmanapollo.ru

     Log in to Reply
106. 323 says:

     09/10/2020 at 2:21 pm

     323

     323

     Log in to Reply
107. 525 says:

     09/10/2020 at 2:47 pm

     525

     525

     Log in to Reply
108. dom2-ru says:

     09/12/2020 at 8:13 pm

     dom2-ru

     dom2-ru

     Log in to Reply
109. Tenet Online says:

     09/13/2020 at 9:25 pm

     Tenet Online

     Tenet Online 2020 watch

     Log in to Reply
110. psy psy psy psy says:

     09/20/2020 at 10:16 pm

     psy psy psy psy

     psy psy psy psy

     Log in to Reply
111. krsmi.ru says:

     10/01/2020 at 4:29 am

     krsmi.ru

     krsmi.ru

     Log in to Reply
112. like-v.ru says:

     10/09/2020 at 11:45 pm

     like-v.ru

     like-v.ru

     Log in to Reply
113. CFOSPUK says:

     10/16/2020 at 1:11 am

     CFOSPUK

     CFOSPUK

     Log in to Reply
114. MAMprEj says:

     10/16/2020 at 2:10 am

     MAMprEj

     MAMprEj

     Log in to Reply
115. fgu0ygW says:

     10/16/2020 at 2:37 am

     fgu0ygW

     fgu0ygW

     Log in to Reply