In this tutorial you're going to create a horizontal portfolio layout with cool hover effects. CSS3 animations and transitions used for hover effect of the portfolio items, and some jQuery to replicate the image pan effect on hover.
Also there is falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.
Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window. It supports two types of unveiling- either by nudging the rest of the page and making room for itself, or overlaying the page.
CSS3 transitions are used to power the animation, ensuring a smooth visual experience even on low powered mobile devices. And speaking of mobile devices, the menus are adaptive in that it automatically switches to a basic drop down menu using a toggle button at the top of the page when the user's device width is 480px or less.
In this tutorial you 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.
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.
FlipClock.js is a jQuery plugin with CSS3 animations to add counter, timer and clock with smooth flip effect.
Features
least.js is a random & responsive HTML 5, CSS3 gallery with lazyLoad. Installation and usage is simple, and the end result is quite beautiful.
Flip is jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform.
Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. It still works with other browsers but the "slide" effect will be selected forecely.
MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content.
It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content!
A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.
All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.
jQuery Navobile is a jQuery plugin that makes mobile navigation easy. Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav.
Panzoom is a progressive plugin to create panning and zooming functionality for an element.
Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can beanything: an image, a video, an iframe, a canvas, text, whatever.
oriDomi is a JavaScript library for folding up any HTML element just like a paper. Oridomi has jQuery support and only works in modern browsers that support CSS 3D transforms.
oriDomi has touch support and works on iOS.
There are multiple effects provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.
Nice tutorial from Smashing Magazine about "Creating an Animated bar Graph with CSS And jQuery".
What this tutorial is making?
Fancy Input is a jQuery plugin that makes typing & deleting in input / Textarea fields exciting with CSS3 effects.
jquery.transformlist is a jQuery plugin to add support for styling and correctly animating CSS3 transforms that make use of multiple transform functions.
jquery.transformlist aims to assist you in creating a transform list of several transform functions that are composited for a specific task, and then provides you with means to use jQuery.animate() between different sets of arguments for those transform functions.
In this tutorial you are going to build a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
