creativeUI - How To Create a Side Scrolling Page Effect - Part II

How To Create a Side Scrolling Page Effect - Part II - Scriptaculous

2 Aug, 2007 ajax, web, how to

This article is part of a series which details how to build a side scrolling page effect similar to what is seen on Panic’s Coda site. Please feel free to visit the rest of the series:

Part I - Introduction and using ASP.NET Ajax to build the effect
Part III - Using MooTools
Part IV - Going from Demo to fully functioning website with Scriptaculous

Yesterday I began a series on creating a Side Scrolling Page. If you missed it feel free to check out part one to get a feel for what we are building, and how it works with the ASP.NET Ajax framework.

Today the goal is to tackle the same effect using the script.aculo.us framework. If you have never heard of this one, it is basically a friendly implementation of the Prototype framework (confused yet?). It has a lot of neat effects and AJAX features and is pretty darn easy to use. Good stuff.

Implementing the scroller is about as easy as it gets, but it does require just a bit of custom javascript. Before we get there, lets first see what is different in the markup.

Markup!

<div id="page">
    <div id="LeftArrow" runat="server">
       <img src="images/LeftArrow.jpg" alt="" class="arrow" 
       onclick="MoveLeft()" />
    </div>
    <div id="RightArrow" runat="server">
        <img src="images/RightArrow.jpg" alt="" class="arrow" 
        onclick="MoveRight()"/>
    </div>   
    <div id="ScrollBox" runat="server">
         <div id="BigBox" runat="server">
              <div class="block">Page 1</div>
              <div class="block">Page 2</div>
              <div class="block">Page 3</div>
              <div class="block">Page 4</div>
         </div>
    </div>
</div>

Compared to the ASP markup, this is just about the same. The only real difference is the onclick around the arrows that fires off a javascript function. Now you could put the scriptaculous effect right in the image, but if you are going to add any polish at all, then a function is much cleaner.

The CSS does not differ at all so there is no need to repost it. Lets check out the javascript.

function MoveLeft()
{
    new Effect.MoveBy('BigBox', 0, 872 , 
                              {
                                  duration: 0.4,  
                                  transition: Effect.Transitions.sinoidal
                              });
}

function MoveRight()
{
    new Effect.MoveBy('BigBox', 0, -872 , 
                              {
                                  duration: 0.4,  
                                  transition: Effect.Transitions.sinoidal
                              });
}

See, I wasn’t kidding about the “just a bit” part. As you can see each function is exactly 1 line (well, normally it would be one line, but I formatted it here for easy reading).

To get our animation to behave the way we want it to I use the MoveBy effect. This guy does exactly what you think it does…it moves a control. Here are the parameters:

ID - Our first parameter is the ID of the control you want to move
Y - The number of pixels you want the control to move up and down
X - The number of pixels you want the control to move left and right
Options - There is a whole slew of options that can go here, but I am using just a couple. First notice that all options are encapsulated in { }. In the demo I utilize: duration (the number of seconds the animation lasts) and transition (how the control actually moves).

As you can see in the demo, the result is a very smooth and clean animation. Overall, every time I have used this framework I have been impressed. The documentation is a bit weak, and there doesn’t seem to be an active forum, but other than that the only bad thing about the framework in terms of this appliation is it isn’t as flexible as say MooTools. That isn’t really a negative because as you will see tomorrow that that flexibility comes at a price.

Click here to see the MooTools part of this series

20 Comments so far »

Dan Farina said,

Wrote on August 3, 2007 @ 6:20 pm

You have a race condition; clicking rapidly on the left or right arrows will result in misaligning the content. From then on it would be difficult to get it to realign.

In absence of actually fixing the problem, some post-facto snapping would be necessary for this to be robust.
All in a days work… said,

Wrote on August 3, 2007 @ 9:21 pm

[…] Create a Side Scrolling Page Effect the demo page is an .aspx, but it does use Scriptaculous (tags: Scriptaculous Scroll) […]
David Baxter said,

Wrote on August 5, 2007 @ 8:01 pm

Hey Dan, the demo I created here is meant to be a “show and tell” of sorts. The animation is actually the easy part. The CSS is what can get tricky.

However I will be taking this demo as a starting point for the project I am working on and will make it more robust. Your comment will help me make it more so. Thanks!

David
David Baxter said,

Wrote on August 5, 2007 @ 10:28 pm

Just as an update, if you add “queue: ‘end’” to the scriptaculous effect you avoid the race condition.

So the line would be :

new Effect.MoveBy(’BigBox’, 0, -872 , {duration: 0.4, transition: Effect.Transitions.sinoidal, queue: ‘end’});

Hope that helps. Thanks again Dan for the comment…I probably wouldn’t have noticed this otherwise.

David
8 Links Today (2007-08-07) said,

Wrote on August 7, 2007 @ 11:22 am

[…] creativeUI - How To Create a Side Scrolling Page Effect - Part II - Scriptaculous […]
Criterion » Archivo del weblog » Resumen no-vacacional agosto 2007 (II) said,

Wrote on August 7, 2007 @ 4:04 pm

[…] Cómo hacer el efecto de scroll lateral con Script.aculo.us [en]. ¿Lo prefieres con Mootools [en]? ¿Y qué tal con Ajax [en]? […]
GSIY … Ruby-Rails Portal said,

Wrote on September 10, 2007 @ 1:25 am

[…] looks like somebody played with this one before Tutorails, RubyOnRails Home | | Login|Feed © 2007 GSIY … […]
phillip Sauerbeck said,

Wrote on March 18, 2008 @ 12:34 am

queue: ‘end’ actually rendered the effect inoperable. It would be great if it worked, though. thoughts?
David Baxter said,

Wrote on March 18, 2008 @ 8:21 am

Hmmm…a lot of people have used this code for their sites and haven’t had any problems with the queue: ‘end’ piece.

Check out the code on the robust demo and see if that helps.

Feel free to email me if you are still having trouble.

David
Arish Rahiman said,

Wrote on May 26, 2008 @ 7:37 am

You can correct the error created by rapidly clicking the link by setting a timeout function for setting a flag to enable sliding.
William Shuhaibar said,

Wrote on June 4, 2008 @ 1:08 pm

queue: ‘end’ didn’t work for me either so I implemented a “lock” using the following code:

var locked=”false”;

function unlock() {
locked=”false”;
}

function lock() {
locked=”true”;
}

function isLocked() {
if (locked==”true”) {
return true;
} else {
return false;
}
}

function MoveLeft()
{
if (!isLocked()) {
lock();
new Effect.MoveBy(’BigBox’, 0, 872 ,
{
duration: 0.4,
transition: Effect.Transitions.sinoidal
});

setTimeout(”unlock()”, 1500);
}
}

Basically, it will take 1.5 seconds after the moving effect is over for the function to be unlocked - hence the user won’t be able to rapidly press the link.
Rasmus Hansson said,

Wrote on July 8, 2008 @ 6:36 pm

The queue end doesn’t work because the single quotes are not correct. The code should be:

queue: ‘end’
Rasmus Hansson said,

Wrote on July 8, 2008 @ 6:37 pm

I guess this board translates the quotes, making them appear incorrectly. Just change them yourself in the code and it will work.
Pov said,

Wrote on July 22, 2008 @ 5:17 pm

Are there known issues with an embedded Flash movie with this effect? I’ve got a youtube vid embedded on a page/slide, and when it’s the selected page, then shifted once, either left or right, it still renders — off frame. Known? Unknown? Workaround?
need a source for this kind of image gallery - DesignersTalk said,

Wrote on October 22, 2008 @ 7:25 pm

[…] check out. creativeUI - How To Create a Side Scrolling Page Effect - Part II - Scriptaculous Be sure to read the entire tutorial and use part 4 for anything serious. I am using it on my new […]
Raza Ali said,

Wrote on November 8, 2008 @ 6:53 am

It’s really awesome i must have to try…
jeevanbabuks said,

Wrote on November 28, 2008 @ 7:21 am

Thank you arish rahiman. I tried your suggestion and the error is gone now.

Thanks,
Jeevanbabuks.
17 mega-creative side scrolling websites. said,

Wrote on December 29, 2008 @ 2:42 pm

[…] ProtoType Horizontal Tiny Scrolling JQuery Serial Scroll MooFx ScrollTo Demo Creating a side scrolling page effect with Scriptaculous Creating a side scrolling page effect with MooTools Portfolio Design side scrolling Tutorial The […]
DereToorplainobit said,

Wrote on January 3, 2009 @ 8:57 am

ceauclulinejunvmwell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch
Abdel said,

Wrote on March 25, 2009 @ 1:28 am

nice effects indeed. keep up the good work and thanks a lot