In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Horizontal Navigation Bar with jQuery Dropdown Menus
In this tutorial I want to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes I have also worked some CSS3 transition effects into the stylesheet. Any webmaster who can edit these codes will surely find use in a pre-built customized navbar solution.
jQuery Animated UI Modal with CSS3
jQuery UI Modal is plugin of jQuery UI. It easy to create modal functionality to the web application (example the modal form …) and to replace the basic functionality provided by the standard javascript alert(), confirm(), and prompt() functions.
Features:
- Easy to use.
- Plugin for jQuery UI .
- open the modal after x milliseconds.
- Support 2 effect and all type of easing.
- Form elements.
- Image support.
- Button support.
- CSS3 animate support.
- 3 callback function onStart | onShow | onClose
Swipeshow : jQuery touch-enabled Slideshow
The unassuming touch-enabled JavaScript slideshow.
- Showcase anything. You’re not limited to images: any markup will do.
- Touch-enabled. Swipe away on your iPad, iPhone, Android device, or anything touch-enabled.
- Style-it-yourself. The default CSS has nothing in it except laying out your slides side-by-side. You’d be in charge of figuring out how to add borders or anything else you like.
- Hardware-accelerated. Animations are done via CSS transitions, which will render smoothly on mobile devices. It will automatically fall back to frame-by-frame animation when transitions aren’t available.
Parallaximus : jQuery Responsive 3D Parallax Widget
Easy to use javascript plugin which allows you to decorate your site with responsive 3d parallax widgets (banners), each of which is a pleasure to interact with not only on desktop browsers but also on modern mobile devices.
Features:
- Cool 3D effects. Parallaximus uses CSS3 3d transforms for all browsers that qualitatively support them.
- Responsive design. Widget size can be dynamically changed down to mobile devices in two different ways.
- Playful mobile support. Totally new way to interact with parallax widget on modern mobile devices.
- onMouseout centering easing. Smooth levelling animation when mouse leaves Parallaximus.
- Cross-browser & cross-platform. IE7+, Firefox, Chrome, Opera. Windows, iOS, Linux.
- Unminified Source. You will recieve full unminified version of js code.
- Remote controlling with API. Options and API are well-documented and easy to use.
Layer Styles : HTML5 app for creating CSS3 in a intuitive way
Just like you favorite graphic editor – but in your browser. And it creates CSS.A HTML5 app for creating CSS3 in a intuitive way.
- Colorpicker can pick any color of the element your working on
- Drag and Drop images onto the page to use them as a background or to pick their colors
- Color Swatches, Gradients and Styles are locally stored
GSAP JS : Professional-Grade JavaScript Animation Library
Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did.
The GreenSock Animation Platform is a suite of tools for scripted animation. It includes:
- TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc.)
- TweenMax: think of it like TweenLite’s beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay, updateTo(), etc. It includes many common plugins too like CSSPlugin so that you don’t need to load as many files. The focus is on being full-featured rather than lightweight.
- TimelineLite: a powerful, lightweight sequencing tool that acts like a container for tweens, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can even nest timelines inside other timelines as deeply as you want. This allows you to modularize your animation workflow easily.
- TimelineMax: extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), and many more. Again, just like TweenMax does for TweenLite, TimelineMax aims to be the ultimate full-featured tool rather than lightweight.
- Extras like easing tools, motion paths, plugins, blitting tools, and more
Lush : jQuery Content Slider with CSS3
Lush is a flexible content slider. It uses CSS3 native transition and animations to get the best performance taking advantage of the modern browser features, without lose functionality in older browsers.
It uses a semantic syntax to describe the animation timeline avoiding complex attributes and keywords.
The animation system is completely extensible allowing to add more animations and transitions easily just like adding new CSS classes.
Features:
- Native animations
- Fully Responsive
- Crossbrowser
- Natural syntax animation timeline
- CSS3 3D animation
- Extensible animation system
- Flexslider compatible
- Pages Slider (via iframe)
- CSS skineable
- Powerful API
- 4 different shadow images included
