Visual Effects

Create easy sprite animations using EaselJS This is merely a code snippet that has a basic setup for sprite animations. It runs with EaselJS v0.8.0+ I mainly created this because I had a hard time going through EaselJS' documentation and it took some trial and error to find the right setup. If you have a DOM app and want to create some fast spritesheets in WebGL, which fall back to Canvas, then this might be of help. EaselJS has everything covered for you, including use of requestAnimationFrame.

With this plugin you transform symbols ( :) / :D / :X ) from your website, in yahoo smileys.

Special Offer Here Only! http://www.expandablebanners.com/special__offer.php Expand your advertising. Create your own push down banners ads. These banners push content down to make room for more banner advertising space. Compatible with HTML5, Flash & Images. Perfect for any website and great for Special offer & sale items.

Supports: - Moving an element horizontally, vertically and in both directions - Snap to grid functionality - Limitation of moving distance - Registering of user-defined function on start, move and stop Tested in the following browsers: IE 6.0, FF 17, Chrome 22, Safari 5.1.1

If you have a web page that handles a lot of data, and it takes a long time to load the page, the best way is to use the preload. This small preloader will help you.

Basilico TopLink make a top button into your webpage: on bottom-right on desktop and on top on mobile phones. It uses css3 fade effect and media query where available. On mobile: TopLink reacts according to phones support touch or simulate mouse and to don't overload the browser it go to top directly.

This object can animate HTML page elements using the laws of physics. It uses the Box2DWeb library to animate given page elements so they move, rotate and collide according to laws of physics. The gravity acceleration and direction is a configurable options. Given callback functions may be invoked when objects collide. Objects speed and rotation may be affected when the user drags them using the mouse pointer. Each page element be made static or animated. Animated page elements may include the respective children elements. The elements' friction and density properties can also be configured.

A JavaScript Slideshow script. In the slideshow effect can be added images or any other HTML content. This JavaScript Slideshow is simple and easy to customize, you can add Start, Stop, Previous, and Next buttons for slideshow, or to load the effect after the page loads.

JQuery Multimedia Portfolio Slider script that allows to display various media types such as photos, video(flv), audio (mp3) and swf files. It would be perfect for multimedia designers.

This object can render 3D isometric cubes from 3 page elements. It takes the identifiers of 3 page elements and adjusts their CSS transform properties so they form the faces of a cube that appears in the page with the 3D isometric perspective. The object can also use a fourth element to be displayed as the shadow of the cube on top of another element that appears as the ground.

PreLoadMe is a leightweight preloader for any webcontent. Powered by jQuery and CSS it is fully responsive and will run on all modern desktop- and mobile browsers with no additionals plugins. PreLoadMe displays a loading animation until the browser fetched the whole webcontent and will fade out the moment the page has been completely chached. Because the simplicity of PreLoadMe, it can be easily customized and adapted to your needs.

This object can apply the blur effect to HTML page elements. It takes the identifier of a given page element and starts an animation effect that progressively alters CSS properties of that element that make it appear blurred. Different CSS properties may be altered depending on the capabilities of the current browser. The object can also execute an animation that reverts the blur effect of the element. There are versions of the object either based or not in the jQuery library.

This object can apply the water drop effect to Web page elements. It creates an animation effect on a given page element that seems like a drop of water appeared over that page element. The water drop color, the animation speed, and the drop expand and fade effects are configurable options. This object is available as a standalone object or as a jQuery plug-in.

Zebra_Accordion is a tiny (2KB minified) accordion plugin for jQuery. It transforms a basic definition list, without requiring any other specific markup, into a small-footprint, easily configurable, fully customizable, cross-browser accordion widget, useful for better organizing larger groups of content. Features: no additional markup required other than a basic definition list; easily customizable through CSS; can be configured to work so that only a single can be expanded at a time, or so that all tabs may be expanded/collapsed; can be configured to work so tabs expand on mouse over; when, after expanding a tab, part of its content is outside the viewport, it automatically scrolls the browser's window so that the tab's content is visible; callback functions can be used for further customizations; works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6, 7, 8, 9)

This standalone script or jquery plugin can create a glint light effect on HTML page elements. It creates a canvas object to render a glint light image effect that is going to be displayed on top of a given HTML web page element. The object periodically changes the position of the glint image to give the sensation of a light being moved over the target page element. The glint image can be animated horizontally or vertically. The animation speed, the glint image color and angle are configurable parameters.

This object can scroll the page smoothly when user clicks on links. It detects the change of the current page URL anchor name and makes the browser scroll the page smoothly to the anchor position. The scrolling speed and the offsets of the scroll position relative to the anchor element are configurable parameters.

This object can be used to display animated image layers that can scroll at different speeds. It can add multiple layers to a panoramic view made of images that are eventual at different distances from the viewer, so they scroll at different speeds when the user moves sideways to give that sensation of distance of the images. The object can also manage the animation of separate image objects that may move with the panoramic images at different speeds.

This object can slide page elements to switch content in display. It can take the page elements inside a given div element and switch between them by using a slide effect to make one element appear scrolling in the div, while the previous is hidden with the same slide scrolling effect. The switch of the elements may be triggered by clicks on menu items that correspond to the sliding elements to be displayed. Dragging the mouse over the currently display element may also trigger the sliding switch element action.

Progressbar.JS is a lightweight, multipurpose, platform-independent JavaScript and CSS3 driven component that will enhance the usabiliy of your web applications. The possible use cases are unlimited - from the classic loading indicator displayed during AJAX calls through form validation to complex wizard-like interfaces - it all depends on you. It is flexible, easy to install and fully customizable featuring rich client API, custom events and imageless purely CSS3-driven skins and cool animations.

Scripts for drag and drop with javascrip and demo on how it works with div move animation.