To see all posts in the “Examples” series, view the category “Examples.”
Not as flashy as some previous examples, this week’s example (A can that works more like a glass, from the Boston Globe) is something you will know how to do very, very soon. Also, I like the clean, open look of the design. The interaction is almost non-existent (buttons only), but the page itself interacts, as you can see from the code shown below.
Notice that the part of the code shown below starts at line 298 of the HTML document (View Page Source to see for yourself).
What I want you to notice is that each of the “chapters” of the graphic is already present in the HTML when the page loads. However, you see only ONE chapter at a time. This is a basic and easy jQuery trick you will learn in the first week after Spring Break — the buttons on the page (also pure HTML) cause these different images to hide and appear.
Leave a comment on this post to submit your example for this week.
- Post only ONE link.
- Make sure your link is correct and functional.
- Include the title or headline of the example you are linking to.
- Write one sentence about why we should appreciate it.
Read the details and rules on the Required Work page, under the subheading “Extra credit.”