jQuery Animation Plugin & Tutorials with Example

Planetarium : jQuery Plugin to Construct Interactive Planet

Planetarium : jQuery Plugin to Construct Interactive Planet

A jQuery plugin that will let you construct an interactive planet and build the Universe on your website.

Theme Slider : jQuery FullScreen Touch Slider Plugin

Theme Slider : jQuery FullScreen Touch Slider Plugin

Modern Touch-Enabled FullScreen Slider with Unlimited Layers and Animations.

Features:

  • Responsive, Mobile-Friendly with Touch/Swipe Support
  • 91 Predefined Layer Positions, 650+ Font Styles (Google Fonts), 360+ Icons (Font Awesome Icons)
  • Unlimited Layers, Sublayers, Text Layers, Transitions, All of Them should be Animated
  • Compatible with All Major Browsers
  • Custom YouTube Player with Additional Options (Autoplay, Resize to Fit to the Screen, Loop, Hide Control Bar)
  • Customizable Animation Time, Delay for Each Main Slide, Sublayer, Text Layer, Custom Options for Text Animations
  • 80+ Animation Types, combined with Easing Effects you can create more than 300 Unique Animations
  • 10+ Main Slider Animations with Hardware Accelerated CSS3 Technology
  • 30+ Text Animations
  • 10+ Sublayer Animations with in and out animations including random type
  • 30+ Easing Effects
  • AutoPlay, Control Options (color, position for global or each slides)
  • Integrated Preloader with 5 custom animations

Circular Progress Button with SVG Animation

Circular Progress Button with SVG Animation

A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.

MagicWall : jQuery Responsive Image Grid Plugin

MagicWall : jQuery Responsive Image Grid Plugin

MagicWall is a jQuery plugin for creating an image grid that cycles through a set of images using attractive animations at a specific time interval. You can use this plugin to create a decorative element of your website, display your work or simply use it as a nice animated background. MagicWall plugin converts a list of images into a grid with defined number of rows and columns. The remaining images will appear with different animations and delays.

Features:

  • Responsive grid
  • Hardware Accelerated
  • Fullwidth layout
  • Fullscreen layout
  • Highly customizable
  • 22 Animations
  • Sass files included
  • Small file size

Fluid Menu to Overlay Content CSS3 Animations

Fluid Menu to Overlay Content CSS3 Animations

I would like to share with you a personal experience I had while trying to build advanced visual animations with CSS keyframes. The topic we’re going to address is animating several HTML elements simultaneously and taking advantage of keyframe flexibility. To explain this subject, we will create a simple fluid menu based on four squares. Clicking on one of them will display an overlay showing related content, closing the overlay will reverse the process showing the default menu. All delays will be managed directly with CSS — no javascript timeout() here.

Bootstrap Progressbar : jQuery Plugin

Bootstrap Progressbar : jQuery Plugin

bootstrap-progressbar is a jQuery plugin which extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.

WP ThumbFx – Responsive jQuery Thumbnail Effects

WP ThumbFx - Responsive jQuery Thumbnail Effects

Enrich your website experience with WPThumbFx, a WordPress jQuery animation plugin that brings your images and content in your articles to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.

CSS3 3D Grid Effect

CSS3 3D Grid Effect

Today we’d like to share a little animation concept with you. It’s the recreation of an effect we spotted in this fantastic prototype app by Marcus Eckert. The idea is to rotate a grid item in 3D, expand it into fullscreen and reveal some content. For our attempt to imitate the app behavior, we created two demos. In the first one we rotate the grid item vertically and in the second one horizontally.

jQFader : jQuery plugin to Animate Fading Out Elements

jQFader : jQuery plugin to Animate Fading Out Elements

jQFader is a simple jQuery plugin to make fading out elements.

jQuery Animations : CSS3 animation framework

jQuery Animations : CSS3 animation framework

A CSS3 animation framework based on jQuery providing an easy way to develop cross browser CSS3 animations.

For the user, it could be easy to use jQuery method to perform and combine the animations.



Best jQuery websites design awards