A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg. We’ll animate some musical notes that fly from outside of the viewport to the listening button to indicate listening activity. Finally, the listening button will transform into a music player with album info of the “identified” song.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Multi-Level Menu with CSS3 & JavaScript
A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.
The idea is to animate each menu item once a level is changed. The animation starts with the item clicked and the delays are propagated through the neighbors. The animation delays follow the same logic for the incoming items of the new level of the multi-level menu. As optional elements we have a breadcrumb navigation and a back button (not shown in our demo). Deeper levels are referenced with a data attribute
CSS-Gallery : Data-bound Photo Gallery in pure CSS
An interactive, data-bound photo gallery in pure CSS.CSS-Gallery demonstrates the true power of CSS and LESS. This is a fully interactive photo gallery, built entirely in CSS and LESS, with no Javascript anywhere.
- Use the hamburger menu to filter photos by category
- Use the view icons on the upper right to switch between thumbnail and list views
- Click a photo to open a scaled lightbox showing a larger view
- Click the arrows on the sides of the lightbox to switch photos directly.
Ion.PhotoZoom : jQuery Lightbox Plugin
Awesome lightbox with polaroid-like zoom effects. Beautiful way to present your photo gallery on any web site. From small mobile screen to large, hidpi desktop screen. Unique super fast flipping speed, several build in skins and much more.
- HTML5 + CSS3
- jQuery only
- Auto sizing
- Auto centering
- Responsive design
- Cross browser IE9+
- Normalized images size
- Keyboard and mouse controls
- Preloading neighbour images
- Beautiful effects
Animated Arrow Navigations With FlexSlider And CSS3
All of you should be quite familiar with Codrop’s “Arrow Navigation Styles” tutorials. They are really inspiring and creative. I played with the Arrow Navigation styles demo, I’m impressed. And I wondered how hard would it be to really implement it on Slider without actually create a slider that does that. First slider that immediately came into my mind is FlexSlider.
Interactive Room Display with JavaScript & CSS
Today we’d like to share a little experiment based on a Dribbble shot by Bilal Mechairia’s, called “Spaces”. The idea is to show an interactive room with several items that all float in 3D space and move according to the position of the mouse. Once an item is clicked, more details pop up. Navigating between the room “slides” will rotate the different wall sections and add some interesting dynamic to the whole thing.
