A tutorial about "Building a mosaic transition effect between two photos using jQuery". Tutorial includes 2 demo page with different mosaic transition effect.
An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.
Tabs are easy to implement and can be built to work with your existing markup. This tutorial will walk through the process.
A tutorial about Creating Responsive Share Buttons by using jQuery and CSS.
Advantage of creating own set of share buttons is that, it goes well with your layout, and you don't have to rely on bulky files that are loaded from anonymous servers, which could also slow down the page loading time significantly.
A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps.
A tutorial about creating basic modal by using jQuery and CSS.
A tutorial on how to create some nice custom drop-down lists with CSS and jQuery.
There are five examples with different looking drop-down menus and lists for various purposes.
A tutorial about Creating Android Dock using jQuery & CSS3.
The application icon will pop out consecutively when arrow image on the dock clicked and not just the icon beautifully animated the dock itself also rotating vertically with 3D style.
A tutorial about creating an accordion menu by using jQuery and CSS3.
A tutorial about "Creating Google Play’s Multi-Level Navigation Menu".
This menu has smooth animation and let users peek at the root-level menu by simply hovering a back button. It's created with using HTML, CSS and jQuery.
An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.
The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.
A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website.
It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.
An on scroll effect template that animates the sides of sections once they are in the viewport. It works with adding a class for animating the two sides of a section.
There is an example effect defined and also some media queries for dealing with smaller screens.
Nice tutorial about some inspiration for headers that animate when scrolling the page. This tutorial show you what kind of effects could be used to spice up your website’s starting element and give it some life.
A simple view mode switch that has two example layouts, a grid and a list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.
