Free Web Resources - Web Resources Depot » Effects

Background Image Animation With jQuery: jAni

Umut M. — Tue, 12 Jan 2010 18:34:07 +0000

Animated GIFs can have up to 256 colors & they are not interactive.

jAni is a lightweight jQuery plugin for animating background images which can be an alternative to animated GIFs (in some cases).

It simply changes the position of a long background image in given distances & speed.

The plugin has few options for controlling it:

start, stop, pause
speed
loop on/off
dimensions of the frames

As it will require JavaScript to be enabled, using jAni combined with other JavaScript events (like animating a better-quality Ajax loader) would be very functional.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Animated GIF, Javascript

Creating A Bubble Effect With CSS

admin — Tue, 24 Nov 2009 05:01:58 +0000

AEXT.NET, a blog focused on web design & development, is presenting a very detailed tutorial on creating bubbles effect (like Apple Dock) with CSS.

The tutorial includes two methods: CSS sprites (basic) & the image swapping (advanced) which will be generating the same visual output.

The effect is very functional specially for list items where items are small in size & the user may have difficulty in pressing the desired one.

It is accomplished with pure CSS (can be improved further with JavaScript for a smoother effect) & compatible with all major browsers.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Apple, CSS Sprite

Wrap Content Around Images: jQSlickWrap

admin — Sun, 22 Nov 2009 13:06:03 +0000

jQSlickWrap is a jQuery plugin for wrapping content around images.

It uses the HTML 5 canvas tag very smartly by analyzing the original image, the CSS properties for it & re-drawing the image.

The usage is as simple as calling a function like: $('.classToBeWrapped').slickWrap();.

The plugin also offers several option for customization like setting the resolution or background color of the image to be created.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript

Switching Images With Style: ImageSwitch

Umut M. — Mon, 16 Mar 2009 05:01:09 +0000

jQuery has built-in animations & effects. But when it comes to switching between 2 objects, you may need to code a little more for a flawless display.

ImageSwitch is an easy to use jQuery plugin for switching between images using effects.

The plugin supports various effects like fade in/out, fly in/out, flip in/out, scroll in/out, single door & double door.

And, the code of the plugin is well-commented which makes it easier to improve it.

Tip: Besides the Groject.ImageSwitch.js, check this .js file too to better findout how the plugin works.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript

Parallax Effect With MooTools: mParallax

Umut M. — Fri, 20 Feb 2009 05:01:35 +0000

Parallax effects give a feel of depth & increase the visuality so much.

mParallax is a MooTools implementation of the popular jQuery plugin: jParallax (see WRD post).

It eases creating parallax effects with offering various customization options.

There are nice examples presented like this & this.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript

Attractive jQuery Page Curl Plugin

Umut M. — Tue, 20 Jan 2009 17:00:52 +0000

Sexy Curls jQuery plugin is an open source solution for creating a page curl feature with ease.

It uses the jQuery UI & its resizable package.

It provides settings to customize the look & usage:

side: for defining which direction the curl effect will occur
turnImage: image used to create the effect
max. height, starting height & starting width

The smoothness of the curl effect is very impressive.

There is also another jQuery plugin named Page Peel which also accomplishes a similar result, but uses a Flash file.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript, Peel

Lightweight JavaScript Animation Library: $fx()

Umut M. — Thu, 15 Jan 2009 05:54:03 +0000

$fx() is a JavaScript animation library which is only 3.7kb.

Within a timeline, any CSS property can be altered. And also:

you can combine effects
group them to the chains and run parallel
set different callbacks what gives you even more flexibility.

$fx() is definitely not an alternative to other well-known JavaScript frameworks. On the other hand it does its job (animation) good & if that’s what you need, then it saves you from loading bigger sizes of JS files.

Have a look at the examples.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Animation, Javascript

JavaScript Image Processing Library: Pixastic

Umut M. — Sun, 14 Dec 2008 05:01:01 +0000

Pixastic is an open source JavaScript image processing library.

It uses HTML5 Canvas element that enables accessing to raw pixel data.

Supported effects are:

desaturation/greyscale
invert
flipping
brightness/contrast adjustment
hue/saturation
emboss
blur & more

There is an image editor built with it & the library is well-documented.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Canvas, Javascript

Lightweight Rounded Corners: DD_roundies

Umut M. — Thu, 04 Dec 2008 05:01:39 +0000

DD_roundies is another rounded corners solution that is very easy to implement & cross-browser compliant.

This rounded corners script doesn’t use any images, works in IE6 without AlphaImageLoader & lightweight (3.62kb compressed).

Radius of the corners are not fixed & can be defined.

As the major problem for rounded corners lies beneath IE, this rounded corners script uses VML (inspired from Jonathan Snook’s solution). A possible future problem is IE8 -currently- does not support VML.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: IE, VML

Deep Zoom Images With Seadragon Ajax

Umut M. — Fri, 28 Nov 2008 17:00:43 +0000

Seadragon is a technology, by Microsoft, for deeply zooming images of any size. It provides almost perfect transitions independent from the sizes of the images.

Seadragon Ajax is an interface for using/embedding this technology to any website.

Seadragon can be used in 2 ways:

By uploading images to Photozoom & use Embed Builder
Compose a deep zoom image with Deep Zoom Composer & upload the images to your website

Developers can customize viewers & controls with the Seadragon Ajax Library. It is also available at the Silverlight platform.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Ajax, Silverlight, Zoom

Free Web Resources - Web Resources Depot » Effects

Background Image Animation With jQuery: jAni

Related posts

Creating A Bubble Effect With CSS

Related posts

Wrap Content Around Images: jQSlickWrap

Related posts

Switching Images With Style: ImageSwitch

Related posts

Parallax Effect With MooTools: mParallax

Related posts

Attractive jQuery Page Curl Plugin

It provides settings to customize the look & usage:

Related posts

Lightweight JavaScript Animation Library: $fx()

Related posts

JavaScript Image Processing Library: Pixastic

Supported effects are:

Related posts

Lightweight Rounded Corners: DD_roundies

Related posts

Deep Zoom Images With Seadragon Ajax

Seadragon can be used in 2 ways:

Related posts