A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.
Best jQuery Animation Plugins & Tutorials with Demo
SpriteClip.js : jQuery Frame-by-frame Animations
SpriteClip.js is a jQuery plugin that makes it easy to make snazzy frame-by-frame animations like this by emulating the functionality of the MovieClip class in ActionScript 3.0.
It works by animating the background-image property of a dom node where the “frames” are spaced out equally. Eg. if the sprite is laid out horizontally and each frame is 20px wide, frame 1 will be at background-position: 0 0 and frame 2 will be at background-position: -20px 0
Smooth Diagonal Fade Gallery with CSS3 Transitions & jQuery
In this tutorial we are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150×150 px) to the gallery folder.
CSS3 capable browsers will show a smoothly animated diagonal fade effect, while older browsers will fall back to a simpler but still perfectly usable non-animated version of the gallery.
BlueprintUI: jQuery Responsive Modal with CSS3
BlueprintUI Responsive Modal is a super simple fully featured jQuery modal plugin with more than 30 CSS3 powered animation possibilities and 7 home made themes to use it.
Features:
- Responsive Design – The layout adpats to the viewing environment.
- CSS3 Animation – 31 funny and really smooth animations.
- Themeable – 7 provided themes and simple api to create more.
- 3D Scaling – If the browser support 3D, you can add a super smooth scaling effect to the overlay.
- Extensive Documentation – The plugin is provided with an extensive documentation to help you use it
A Collection of Page Transitions with CSS3 & jQuery
Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.
Please note that this is just for showcasing some interesting effects and for inspiration. It is not a slider or anything like that. We’ll just apply some classes to make the page transition visible, not for navigating.
jQuery Final Tiles Gallery
FINALLY the best gallery for tiled layouts because it doesn’t crop your images while it still offers a complex layout, it’s not the same old boring layout made of columns or rows of same size.
Best results are achieved using images of different sizes. Using images of same size will simply give you a standard grid layout.
Text Opening Sequence with CSS Animations & jQuery
Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS. we’ll use Dave Rupert’s Lettering.js to wrap the words and letters into multiple spans.
