í Assignments

We’ll look at the latest in CSS3 properties, that allow animation and movement in the browser. 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.

Session 3

Complete the following exercises:

1. On rollover, make an element fill the screen
2. On click, make one element cover another element
3. On click, have two different (visual and actual) elements animate
4. Move an element back and forth across the screen

Sessions 1 and 2

Read the chapter titled “Relations” from Leborg. The author presents an extensive vocabulary of relationships. For example, the terms include: symmetry, balance, groups, coordination and distance.

Make a simple shape and allow the user to change the default relationship in some way. Choose just one type of relationship from Leborg’s chapter for each composition. More than one relationship may occur through your investigation of the one concept.

Title your compositions using the type of relationship that you’re working with. Upload your work to the website and categorize as 5: Shifts in relations.

Examples from class

• jquery_click
• week3_1

Examples of interactions

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

CSS Properties we’ll review

• id attribute
• Pseudo classes
• Transition
• Transform
• Keyframe animation syntax
• Perspective

jQuery events

• toggle, hide, show
• toggleClass

Sample code

• Demo sample library

Resources

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

Examples

• May 1: jQuery
• May 1: Transition/hover
• May 1: Keyframe animation
• April 3rd jquery example
• April 3 rolloverme
• Distance (+overlapping)
• Coordination (requires more jQuery
• See the work from paper.js

Firstly, make sure your post is categorized correctly (only 4: Patterns).

Secondly, take a screenshot of your pattern and upload an image of each and link to the HTML page.

Thirdly, provide feedback to the person who appears above and the person who appears below you in the web feed. Add a comment to each of their posts. Do you notice anything exemplary or noteworthy in the coding? Any areas of improvement?

Fourthly, we’ll hear from 3 of you up front about what you’ve seen.

Fifthly, download one of your classmates’ HTML and adjust it to make a new pattern. Upload yours into their post at the bottom. Use a screengrab and put a link to your HTML.