Practical Ecommerce

Video Tutorial: Script.aculo.us Effects

View Tutorial Script.aculo.us is a JavaScript framework that is built upon the wildly successful Prototype JavaScript libraries. Script.aculo.us allows web designers to create engaging user interfaces quickly and easily, due in part to the animation effects it is famous for.

In this tutorial, we will look at a few of the more useful Script.aculo.us animation effects and how website designers can easily use them in their websites. We’ll take a look at the ubiquitous “highlight” effect, various methods of making content appear and disappear and finally create a simple JavaScript that will combine effects to create advanced user interface possibilities.

Software Used: TextMate

Additional Files: tabs_tutorial.zip

Click the image below to launch the tutorial.

View Tutorial

This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 8 )

  1. Legacy User October 19, 2007 Reply

    Thanks Brian. This was a nice overview. I just started using script.aculo.us and it's simple, but at the same time a bit overwhelming. What's the best way to set the initial state of a div? I have a div that i want to slide in when a button is pushed using the Effect.toggle ('slide') but i haven't figured out how to make it initially in the hidden state, so that the button slides it into view. Any ideas?

    — *Jeff Foxx*

  2. Legacy User October 19, 2007 Reply

    You can set the initial state of the element that you want to move around or fade by either setting a "style" attribute in the HTML document of "display:none;". Or, you can also go through and set the initial state via JavaScript using some sort of "onload" initialization function.

    — *Brian Getting*

  3. Legacy User November 1, 2007 Reply

    Found scriptaculous stuff a while ago… but became overwhelmed a little early on myself. Bound and determined (I love the way the scriptaculous elements move and slide in when you go to their site) I jumped back in today.

    I've seen PLENTY of click and mouseover examples… what's the best way (much like scriptaculous did) of approaching sliding/fading/moving elements in when the page FIRST LOADS. Onload? This is great… NO FLASH.

    Great video tutorial… I didn't finish it yet so my apologies if the ONLOAD deal was covered in there.

    thanks

    — *MBHayes*

  4. Legacy User December 23, 2007 Reply

    Rather than using setTimeout() it's easier to use the built in afterFinish (if you are using blind, appear, or slide):

    Effect.toggle(el, 'appear', {
    afterFinish: function(effect){
    Effect.toggle(effect.element, 'appear');
    }
    });

    — *whoover*

  5. Legacy User January 31, 2008 Reply

    Wonderful tutorial! I'm a university student that freelances for food money – so this just added a night out to the keg!

    Thanks so much, I'll be using it it all my projects to come!!!

    — *Jenn*

  6. Legacy User March 5, 2008 Reply

    Woa…thank you Brian. that was the missing link for me.
    I have to admit that the scritaculous site is not really well explained for the newbies.

    i know i like to see the entire construction to understand how it works and your tutorial shows exactly that.

    Thank you …thank you.

    more…more…you don't have more about scriptaculous stuff.

    cheers

    — *julien*

  7. Legacy User March 6, 2008 Reply

    Well, i am still bugging to use a series of effect like the application.js of the tutorial when the page load rather than when clicking a button.
    i got the display:none set in the html. i can make it work for one effect on one element but i can't figure out how to timed it and have multiple effect on multiple elements.
    firebug shows me an error saying missing ) after argument list but i tried placing one but it's not working.

    Event.observe(window,'load',function(){
    Effect.Appear('logo', { duration: 1.0 });
    window.setTimeout('Effect.BlindDown('box_who_are_we_content', {duration: 1});', 2000);
    window.setTimeout('Effect.BlindDown('box_who_are_we_shadow', {duration: 1});', 4000);
    });

    any idea how to do it or where to find the answer.
    thanks

    — *julien*

  8. Legacy User March 23, 2008 Reply

    hi, julien,

    i think this manual may help you:

    http://wiki.script.aculo.us/scriptaculous/show/EffectQueues

    — *dzutaro*