JSTween : JavaScript animation library for jQuery

    JSTween : JavaScript animation library for jQuery

    While good for simple effects, popular JavaScript libraries like jQuery lack the Oomph required to animate complex user interactions in the DOM. JSTween was designed from the ground up for speed and precision, allowing it to handle more simultaneous animations while maintaining a silky smooth frame rate.Animations in JSTween are kicked off by triggering the play() method.

    You can use functions to define any tween value in JSTween. This is really powerful enabling you to easily animate complex motions like particle effects, snow etc.. If you are animating more than one element using CSS selectors, the assigned function calls will be executed for each element passed into the tween.JSTween exposes a number of helpers to ease cross browser CSS3 issues. Use these to apply static effects to DOM elements.

    fc.tape : jQuery widget for sprite animations like cinema tape

    fc.tape : jQuery widget for sprite animations like cinema tape

    jQuery widget for sprite animations. Background image (sprite) consisting of picture frames like the movie tape is animated. Widget supports options to adjust smothness and speed of animations as well as methods to control animation behavior.

    Background image (sprite) consisting of picture frames is animated like the tape in old-time movie projectors. Widget supports options to adjust smoothness and animation speed as well as methods to control animation behavior. You can create such sprite using console util convert, included in popular image editing tool ImageMagick.

    jQuery Push Menu

    jQuery Push Menu

    A new style animted menu in jQuery with following features :

    • Cross Browser Compliant – IE9 , FF3+,Opera, Safari, Chrome
    • Mobile Ready – Works in mobile browsers.
    • Sliding Sub menu level items.
    • Animating open sub menu when hovering over top nav-links.
    • Auto resizing sub-menu container based on sub-menu content.
    • Adjustable parameters: easing,speed
    • Easily embed videos/images/forms etc.

    Perfectly Rotate and Mask Thumbnails With CSS3 & jQuery

    Perfectly Rotate and Mask Thumbnails With CSS3 & jQuery

    Ever seen a website showcasing image thumbnails that are slightly rotated? It’s a simple effect that adds a layer of visual personality. Saying that, if you’re not achieving the rotation effect with CSS, you’re working too hard! Learn how to do it right!

    Image galleries with rotated thumbnails are somewhat infrequent, but it’s a simple trick to add style to your webpage. However, if not done right, achieving and maintaining this effect can sometimes prove to be a major hassle!

    To properly achieve this effect, your first thoughts might turn to creating rotated thumbnails in Photoshop. However, this can prove to be difficult in the long term. Disadvantages to creating rotated thumbnails in this way include: Angle Consistency,CMS Thumbnail Generation,Long-Term Manageability.Wouldn’t it be nice if you could perform this little rotation with one line of code? Well you can! Let’s learn how.

    Create a Parallax Scrolling Website Using Stellar.js

    Create a Parallax Scrolling Website Using Stellar.js

    One of the biggest trends in recent modern web design is use of parallax scrolling effects. In this tutorial I’m going to show you how you can create the effect on your own website, with a bit of imagination and a little help from Stellar.js.

    When combined with the scrolling functionality of a website, parallax scrolling effects can have a strong visual impact, especially when combined with some form of story which takes you on a journey.Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight.

    jQuery Picture : Responsive images plugin

    jQuery Picture : Responsive images plugin

    jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

    FoxyComplete : Advanced autocomplete search with images

    FoxyComplete : Advanced autocomplete search with images

    Today I am going to share a trendy functionality which I have been implementing in my projects for a while now.

    I call it “FoxyComplete” and what is does is fetch clickable search results along with images either automatically scraped from the result’s content or a specified file. It’s easy to implement and once done, easy to tweak.

    jQuery Image Scroller Plugin

    jQuery Image Scroller Plugin

    Building websites for PUMA has given me the opportunity to do some pretty cool stuff. The latest feature was dreamed up by Owen, and it turned out to be pretty easy to do with JavaScript.

    These large individual product images work great for products like shoes, but when we needed to introduce clothing items we couldn’t fit the entire product in without shrinking the image down until it was too small. Owen’s solution was to have a small thumbnail preview that you could drag over to view different sections of a larger image.

    Create a Beautiful Password Strength Meter in jQuery

    Create a Beautiful Password Strength Meter in jQuery

    In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin. Only when a sufficiently complex password is entered, will the user be able to continue with their registration.

    Zuper Responsive Multitouch Slider in jQuery

    Zuper Responsive Multitouch Slider in jQuery

    Zuper Slider uses unobtrusive javascript and a powerful configuration panel for effects and design elements to transform a block of simple HTML markup into a beautiful elegant slider. When we create the Zuper Slider is lightweight, fast loading, mobile ready, responsive, easy to use,has multiple skins and much more. Zuper Slider is the most complex and powerful slider that you can use. Saves development time – Powerful features – Simple implementation – Fully customizable.

    Mobile Ready Zuperslider is mobile ready. Touch gestures navigation for iOS, Android and other touch devices. Its main feature is that has the touch technology implemented for mobile devices.