Demos
Here is a list of demos that illustrate topics and APIs discussed on this site:
- NEW Animated SVG Loading Icon: A Google-style animated loading icon utilizing JavaScript to vary the length of an SVG path, and CSS transforms to rotate the entire SVG.
- Tooltips: provide contextual notes for linked words and phrases (works well for mobile and non-mobile devices).
- Back-to-top component: A convenient way for users to return to the top of a webpage.
- Depth-of-field effect: a simulation of depth-of-field using HTML and CSS blurring.
- 3d carousel: a CSS based, three dimensional rotating carousel. Very smooth animation without frame skipping.
- Card flip animation: CSS based animation that responds to users' clicks
- Context menu: a customized context menu providing extra navigation for users.
- Count notification: CSS animation for a circular count notification.
- Device Orientation: Detect the orientation of a user's device in physical space.
- Geolocation: find a user's latitude and longitude coordinates.
- HTML starter document: View the page source for the HTML.
- Icon animation: use SVG to animate the "hamburger" navigation icon.
- NewsSpeak: an experimental demo of Chrome's text-to-speech API support.
- Reverse geocoding: find a user's street address
- Switch UI component: an on/off switch.
- View more: an expandable and collapsable container for content.