Archive for the ‘animation’ Category:
12 Super JavaScript Animation Frameworks
JavaScript is a powerful, flexible, and popular programming language for the web. It allows you to do a wide array of dynamic functions that would otherwise be much harder or inconvenient to create. Because of how straightforward JS is, it’s even become the language of choice for animation when compared to Flash.
Below we’ve put together an informative list of JavaScript Frameworks that will allow you to rapidly develop animations with ease.
Burst Engine
The Burst Engine is an OpenSource vector animation engine for the HTML5 Canvas Element. Burst provides similar web functionality to Flash and contains a layer based animation system like After Effects. Burst uses a very light-weight JavaScript frame, meaning your animations will download un-noticeably quick and can be controlled using very simple JavaScript methods.
$fx()
$fx() is a tiny, self-contained Javascript library for animating HTML elements. It doesn’t require any other library to function and [should] play well with any other libraries you are using (Prototype, JQuery, Moo tools, etc.) $fx() allows you to alter any CSS property along a timeline, allowing animated effects to play in succession — i.e. in the order you want them to.
Facebook Animation Library
Facebook Animation Library exposes a powerful animation library which gives developers an easy way to improve their user interface with a line of code or two. All animations are CSS based, so a working knowledge of CSS will really help you out here. An open-source version of FBJS Animation that will work on pages outside of Facebook is available here.
jsAnim
jsAnim is a powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility. Weighing in at just under 25 kilobytes, jsAnim packs a lot of punch for such a little application.
Glimmer
Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.
scripty2
scripty2 is a powerful, flexible JavaScript framework to help you write your own delicious visual effects & user interfaces. scripty2 is divided into three parts, core, fx, and ui, and supports IE6+, Safari 3+, Firefox 3+, Chrome, Opera 10 and most WebKit-based browsers.
moo.fx
moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework. It’s very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won’t let a user break the effect with multiple, crazy clicks.
Animator.js
Animator.js is a lightweight class-based library of JavaScript animation effects. Animator allows you to create a variety of quality animations for different aspects of your projects.
Pixastic
Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more.
script.aculo.us
script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.
Processing.js
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
Raphaël
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
20 Easy-to-Learn jQuery Animation Tutorials
There’s no denying that the web has evolved and continues to evolve into something very different from what we had in mind a few years ago.
Animation on websites has gone a long way, some time ago everything and anything that had movement on a website was automatically categorized as Flash, now we have these different technologies that have raised the standard and have broken the mold. One of these key technologies is jQuery, and with the powerful scripting language that it represents (JavaScript) you can do amazing things.
This trend of progress is more than heartwarming, it’s amazing, and this is why we’ve compiled a hand-picked list containing 20 Easy-to-Learn jQuery Animation Tutorials that are truly amazing! Have we missed any? If so, please share with us below.
Moving Boxes Carousel with jQuery
This is a simple jQuery tutorial will not throw a lot of source code your way. The carousel has features that allow you to zoom in and out. The boxes slide left or right.
Building an Animated Cartoon Robot with jQuery
The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The final step, was animating the robot with some jQuery.
Crafting an Animated Postcard With jQuery
Sam Dunn of Build Internet, wrote a tutorial on how to create an animated landscape using transparent images. The tutorial is based on the jQuery Easing plugin to aid the animation and the setTimeout() JavaScript function to time the events respectively.
Accessible Charts & Graphs from Table Elements using HTML 5 Canvas
This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
Animate a Hover With jQuery
Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example.
Puffing Smoke Effect in jQuery
This tutorial by Gaya Kessler features a beautiful animation effect of cartoonish smoke emanating from factory smoke stacks. You will be supplied a configurable jQuery plugin with instructions based on Gaya’s own site’s header, this way you can see the tutorial example first hand.
How To Create A “Mootools Homepage” Inspired Navigation Effect Using jQuery
The menu on MooTools is exceptional, and this tutorial covers how to create a similar one. It’s an amazing effect.
Build An Incredible Login Form With jQuery
This tutorial, guides you in creating a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. You incorporate these features into your sites login area.
jQuery Infinite Carousel
This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself.
Create an Amazing Music Player Using Mouse Gestures & Hotkeys in jQuery
This tutorial helps you create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.
Learning jQuery: Revealing Photo Slider
This revealing photo slider is great, it’s perfect for portfolios and photography sites. The entire structure of the slider is coded in JavaScript and CSS.
Animated Drop Down Menu with jQuery
Drop downs are a dime a dozen these days and creating one that stands out is a bit hard. However, with this animated jQuery tutorial you will be guided on how to create one that works with jQuery. After you finish the tutorial you will know how to create your very own jQuery powered menu.
Multiple Animations with Glimmer
Glimmer is a JavaScript animation creation tool that lets you create amazing animations. By visiting the site you’ll be able to see a variety of examples with code.
How to Load In and Animate Content with jQuery
This tutorial will allow you to enhance the functionality of content on your site using jQuery and a bit of ajax so that the content loads into the relevant container instead of the user having to navigate to another page.
Create a Parallax Scrolling Background
In this tutorial, you will be be using jQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.
Create a Stunning Sliding Door Effect with jQuery
This tutorial includes detailed explanation that will guide you through the process of learning how to make a stunning four corners sliding effect easily with jQuery.
The youlove.us Scrolling Background Effect Explained
The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image (with our logo, strapline and the laptop) has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.
Make Your Header Responses To Mouse Movements with jParallax
jParallax turns a selected element into a window, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.
“Outside the Box” Navigation with jQuery
Just about every website uses the regular navigation concepts everyone’s used to. But since this can become boring to veiw, tutorials such as this one mimicking the OS X dock and stacks is the bi-product.
Re-Create the Leopard Desktop with jQuery
jQuery adds a whole lot of cool functionality to your websites. It can do a range of things, from animation to AJAX. With this tutorial you will learn how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding widgets, links with icons, and more.