In today’s tutorial we want to show you how to create a simple item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing animation. We wanted to translate this concept to a modern-looking alternative for a minimal online store design where the items represent different categories. Categories as use-case fit quite well because of the limited nature of this type of slider. For more items to be shown, this is certainly a far-from-optimal solution. If the amount of items is limited this might give an interesting little touch to the experience.
Best jQuery Animation Plugins & Tutorials with Demo
hoverOver : jQuery Plugin for Adding Hover Content
“hoverOver” plug-in is useful for showing content on image or text blocks to show short information related to product, image etc. Plug-in provides various animation effects to show content.
Features:
- Hover over content can be defined on text content or image
- You can define content text either in contentData or define data-content=’#contentID’ and define content inside Hover Content Goes Here
- 14 different animation styles
- 5 styles for show content e.g. fly, curtain, push, pull, tocenter/fromcenter
- Content can be half visible using contentShowHeight. (e.g. Can be used with “flytop” & “flybottom”)
jQuery Image Animation Trick With Mouse Position
In this short tutorial post, I create a simple code in jquery to creating an animation look a like effect, that triggered by mouse cursor position. This trick can be used for animating photo profile, with changing the image source on html element or in this case I change the class value.
jQuery UI FlipBook
FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser.
Features:
- set the animation speed
- change animation direction
- exclude specific images
- single step through the images
- resizes to fit the images
JavaScript Gauges in Metro Style
JavaScript Gauges in Metro Style is a set of 8 gauges created in the modern Windows8 or Metro style which can be added to virtually any web application: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails, and simple HTML pages.The gauges included into the package are not just separate meters, sliders, etc. They can be used as full featured ready gadgets intended to display the information in a visually appealing way.
Features:
- Cross-platform compatibility. The gauges can be used on any platforms: ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails and simple HTML pages and accessed from any devices: desktop, laptop, mobile (including iPhone and iPad), and via any browsers: IE, Mozilla Firefox, Google Chrome, Opera, Safari, etc.
- Declarative description. The gauges are described using declarative selection of the parameter in JSON.
- Customization. You can set any parameters describing your gauge and create custom objects using JSON.
- Interactivity and Animation. Every gauge provides customizable interactivity and animation.
- Easy styling. A gauge styling can be easily modified in CSS.
- Callback support. You can get notifications about changes of the gauge value and handle it in JavaScript.
- Easy integration. To integrate a gauge you just need to specify gauge name and area of a webpage where it should be inserted (“div” tag); and all this with JavaScript.
- WinRT compatible. The gauges can be integrated into HTML5-based WinRT applications to effectively visualize data.
zSnow : jQuery/HTML5 snow animation theme
zSnow can make your normal website into a winter/christmas theme! With more than ten options to choose from, you can make it as unique as possible. Each flake is programmed, calculated and generated to behave different than the others. The flakes are easily modifiable PNG images drawn in PS.
Users can enjoy your website even more by playing around with the flakes as each one is completely different and interactive. They will play a tone and fade away as the user hovers them.
Merry Scrolling with skrollr.js
A step-by-step tutorial on how to create a beautifully looking Christmassy scrolling effect by Paulina Hetman from Pepsized.skrollr is much more than “just” parallax scrolling. It’s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3.
skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset.
spriteOnHover (Sprite on Hover) – jQuery plugin
spriteOnHover (Sprite on Hover) is a lightweight jQuery plugin designed to animate your sprite sheets on hover (duh).The spriteOnHover plugin will autodetect how many frames your sprite has, based on the orientation parameter, but it’s crucial that every frame has the exactly same size as the others. For now, multi-line sprites are not supported.
Bootstrap enhance with CSS3 animation
This script customize the animate.css and bootstrap.js, add CSS3 transition support with the Twitter Bootstrap, include the modal, popover and tab. You can enable this by change a little pice of your exist code.
Features:
- CSS3 transition support.
- Minimal change of the code, works fine with the exsit code.
- FAQ and source code are included in the package, free update in the future.
Volley : jQuery plugin for Dividing and Filtering elements
jQuery plugin for dividing and filtering elements based on their visual position. You can use it for running sequential animations on items.Volley requires all elements to be positioned in a grid, i.e. their widths and heights has to match (otherwise there is no point for calling volley really).Starting point for dividing items. By setting different starting point you can divide items into horizontal, vertical, or diagonal rows.
