On this page, you can browse user submitted effects, and maybe add your own! Follow the format you find here:

Resizable
by V. Popovski
Can be found at Resizable

Effect Resize Extension
by Thomas Hansen, in use in Gaia Ajax Widgets
Is also a pretty nice example of how to extend classes in scriptaculous.
Effect Resize Extension

Carousel Effect
by Thomas Hansen, in use in Gaia Ajax Widgets
Ever wanted to have Flash commercials without having to use Flash. This effects creates a nice animation that makes e.g. your Images run in from right to left, one at the time if you combine them with a timer.
Carousel Effect

Drag Scrollable

Moved to Drag Scrollable.

Div Swapper
by Paul Graves

Slides open a div when a link is clicked on and slides closed the currently open div.

Usage:
Note the wrapper Div around the text drop downs

Show source

Pop Out

Instead of Drop Out and Drop In… Pop Out the reverse of Drop Out. It fades out whilst going up. By buggedcom

Show source

Vertical Shake

This is a simple modification of Effect.Shake, it shakes the element vertically, instead of horizontally. – rixth

Show source

Drop Elements In

Drop In elements, the opposite of Drop Out….
By buggedcom

Show source

Slide Right Into View, Slide Right Out Of View

By Joao Prado Maia

Show source

How do you include this code into a project to use it?
I’ve tried using it in the actual page (inside script tags) as well as including all the required script.aculo.us files – but it doesn’t work. Can someone please give an example of how to use this?

sunsean: Add the above code to the bottom of effects.js

Simple slide up/down with the same button

By Robert Gaal

Show source

Slide up or down with the same button

this one slides up if the element is visible, and down if it is not.

Show source

move AND resize an element

pass me the desired most outer bouding box position and dimensions. calculations includes margin/border/paddings, so when you know you want a div positioned
and sized a specific way, this will position and animate the transition. set duration=0 for no aninmation. note you will need to click ‘edit’ to view the real source! the stupid wiki interpreter is parsing asterisks as bold text dispite being inside a code block!
by jake richardson {jaecob.gmail.com}

Link to Class Source – {jason.at.shaped.ca} hosting this to hopefully save someone from having to sign up at the wiki to view the source properly.

Show source

this.element.style.top = topd+'px';
this.element.style.left = leftd+'px';
this.element.style.width = widthd+'px';
this.element.style.height = heightd+'px';

Phase Elements smoothly

Phase is an implementation of smooth appearing elements. It combines the appear/fade and blind effects to create a smooth transition. Insert code at bottom of effects.js sunsean
[Updated by Daniel Vandersluis to allow for 2 properties arguments (for example, if you have an afterFinish function that needs to run only once); backwards compatibility maintained]

Show source

Effect.Transitions.exponential

Add a new smooth transition with Effect.Transitions.exponential. This transition starts quick, but slows down near the end. Great for moving elements. sunsean

Show source

Effect.Transitions.slowstop

Add a new smooth transition with Effect.Transitions.slowstop. This transition starts very quickly, but comes to a gradual stop. Great for scrolling somewhere on a page with a duration of 2. sunsean

Show source

Slide Right Into View, Slide Right Out Of View, Slide Left And Right

It’s fixed for IE and current version of scriptaculous(1.5.1) and prototype(1.4.0) versions of above functions Slide Right Into View, Slide Right Out Of View. Added simple function Slide Left And Right.

Show source

Can you show a code-example using this effect?

modifying Effects.Blind Up and Effects.Blind Down to make, Blind Left and Blind Right

BlindUp to BlindLeft (changes to make in Effects.js)

BlindDown to BlindRight (changes to make in Effects.js)

Usage:


Effects.BlindRight($('someDivId'));  //shows the div
Effects.BlindLeft($('someDivId'));  //hides the div

by Harish palaniappan

Center Divs

You can center divs with this just
add this into effects.js
fully edited effects.js
http://www.icefuzion.net/area51/new_site/test_templates/javascript/src/effects.js

Show source

Here is an example of when to use:

Show source for example

This gives a nice effect if you want a centered loading div :P
by Bhavesh Ramburn

Slide Right and Slide Left

Another implementation of this functionality, works better for me with the latest version of script.aculo.us

by Jeff Pennal

Show source

overflow: scroll hack and draggable element substitution

Enable drag scrolling for a div with overflow: scroll, and allow draggable element substitution (like custom draggable from here http://openrico.org/rico/demos.page?demo=rico_drag_and_drop_custom_draggable). The main problem for me, that scriptaculous not allow to drag element outside parent element with overflow: scroll. To fix it I added ability substitute draggable element.
Scriptaculous v1.5.3, IE 6.0 only tested
by Sergey Kojin

Show source

Could you show an example of how to use this effect?

Edit 01/08/2007 by Greg Hinch – added a line to turn this.dragging on and off when calling initDrag() and finishDrag(). This was to fix an issue where if a draggable was clicked but not dragged the duplicate element would not be removed from the page.

Effect.Bounce

I have just extended the Effect.Move to let an Object bounce. It should behave physically correct. As example you can look at my website, I currently work on: siegfried.puchbauer.com (mouse over the navigation triggers the effect)

Show source

Effect.Queue This

Execute any function after any queue.

Show source and example

Effect.Resize To

Effect based on Effect.Move And Resize To (by jake richardson {jaecob.gmail.com}, see above), but the Move part has been removed.

Show source

Element.firstElemental Child

I ran into some problems because many of my nodes seem to have text-type children before their elemental child. This method returns the first elemental child node.

Show source

Fade a table row

This effect will fade a table row and make it desappear, it can take options as Effect.fade would do.
tested under Fire Fox 1.5 / Internet Explorer 6 / Opera 9

Show source

Accordion Menu

Allows you to create a smooth accordion menu with fading expand and collapse icons. An example can be seen here.

// Created by Mike Ellan: Mike @ F I G I T D O T C O M

Show source

Effect.Chain and Effect.Delayed Chain

Simply fires the Effect for multiple elements sequently (or delayed in the case of Delayed Chain).

Sample usage:


new Effect.Chain(
   'Fade', // The effect name
   $$('div.test'),  // an array of elements
   { duration: 0.5 } // options for the effect itself
);

new Effect.DelayedChain('Appear', $$('ul#test li'), { duration: 0.5 }, 100);
// Fires an Effect.Appear for each element with a delay of 100 m

Show source

A better diaporama

This is an alternative implementation to the diaporama showed in the Visual effects page.
The parameters are:


and images must have a number at the end, “image1.jpg” p.e.

Example:
diaporama(container, '../img/promo', 4, 'appear', 2, 4)

By Ismael Jurado

Show source

A another diaporama

I couldn’t get the above diaporama to work and I didn’t like the way the original worked (disappearing not fading out).
So here’s another alternative (a mixture of the previous two), it’s more static than Ismael Jurado’s version but fades in and out nicely unlike the original.

I’m new to javascript so if i’ve made a huge error somewhere could someone please point it out.

Trish McDonough

p.s. what is a diaporama anyway?

Show source

Horizontal Blind Down/Up Effect
by Fabio Gruppioni (Ytanium)

Simple modification of the Effect.Blind Down/Up. Effect.toggle support included :-).

Show source

Effect.Switch Color – switch between 2 text colors
by Fabio Gruppioni (Ytanium)

A very simple effect to colorize text. Default text colors are: #000000 and #0000ff
Sample usage:

new Effect.SwitchColor('elid'); // switch between #000000 and #0000FF
new Effect.SwitchColor('elid', {endcolor:'#ff0000'}); // switch between #000000 and #FF0000
new Effect.SwitchColor('elid', {endcolor'#ff0000', startcolor:'#002244'}); // switch between #002244 and #FF0000

Show source

Ultra simple DOM rollovers.

This is a very simple example showing a rollover effect, I needed some clean rollovers and this works nicely so I figured I’d roll it into the chest. An example can be seen here, the css and js are inline.

// Created by Mike Ellan: Mike @ F I G I T D O T C O M

Show source

Fixed position to a droppable box

This is a patch to make possible to make fixed droppable elements. (Example)

1) At the line 1223 on prototype.js, add this code


    else if (pos == 'fixed') {
      element._madePositioned = true;
      element.style.position = 'fixed';
    }

2) Attribute a fixed position to the droppable element and, the droppable field will be fixed to !

Effect.DropDown (by Gilles St. Cyr)

This patch allows you to take an element of fixed height, and expand it to it’s full height, or viseversa, contract it to a specified Height (instead of to 0). It’s possible that you can do this using Effect.Blind Up and Blind Down, but I couldn’t get it working. If you don’t pass the ‘endSize’ option (value in pixels), the element will try to expand to it’s natural height. Hint: You’ll probably want to use this with “overflow:hidden”

Example:


new Effect.DropDown('id');
new Effect.DropDown('id',{endSize:20});

Show source

Effect.HighlightText (by m3nt0r)

I made slight modifications to the core Effect.Hightlight. With this one you can highlight text instead of a background. Kinda nice and a bit more unobstrusive.

Example:

new Effect.HighlightText('id');

Show source

Effect.Unfold (by Jonny)

This effect unfolds an object. It works just like the fold effect, but backwards. The effects aren’t able to be toggled, but I hope to have that working soon.

Example:

new Effect.Unfold('id');

Show source

Effect.Gravity (by Jeff Conrad)

This effect causes an object to move, and grow simultaneously, for creating an apparent z-dimension to your draggable objects.

Example:


        var deltaX = 400;
        var deltaY = 100;
        var boxWidth = 100;
        var boxHeight = 100;
        var magnification = 3;
        Effect.Gravity.up('testDiv1', deltaX, deltaY, boxWidth, boxHeight, magnification);

Show source

Effect.Curve (by Baglan)

Effect.Move moving object on a curve instead of straight line.

I’ve written a tiny article about it where you can download the working code and see an example using Bezier curve (included). In case you want to use some other kind of curve it can be implemented as an object with x() and y() functions, accepting a position argument between 0 and 1 (just look at the Bezier Curve code) and passed to the Effect.Curve as a ‘curve’ option.

Example

new Effect.Curve('box',{curve: new BezierCurve(
  185, 85,  // A
  25, 355,  // B
  560, 330,  // C
  440, 210  // D
)});

Show source