HTML and CSS Reference
In-Depth Information
Finally, we added a click event listener to the items in the bottom navigation. Similar to the
arrow navigation, we start by disabling the automatic animation, setting activeSlideshow to
false . Next, we trigger changeSlide() , passing in the index of whichever slide was clicked,
which is easy to determine using jQuery's index() method.
Now the slideshow navigation animation is complete and ready to impress your visitors.
Download the complete example 30
View the demo 25
5. Animated Icons
CSS-Tricks has a simple but elegant effect in its footer when the user mouses over various
buttons. Besides the color changing and an icon being added, the effect is animated in
browsers that support transition, making the icon appear to slide into place .
View the demo 33
Let's create a similar effect, starting with some mark-up:
< a href =" # " class =" hover-panel ">
< h3 > Panel Title </ h3 >
< p > Additional information about the panel goes in a paragraph here </ p >
</ a >
One thing to note about this mark-up is that it has block elements nested in an <a> element,
which makes sense semantically, but it's valid only if you're using the HTML5 doc type.
Search WWH ::

Custom Search