How To Create a Side Scrolling Page Effect - Part III - MooTools
Part I - Introduction and using ASP.NET Ajax to build the effect
Part II - Creating the effect with Scriptaculous
Part IV - Going from Demo to fully functioning website with Scriptaculous
Over the past few days I have been going over how to build a side scrolling page effect using various frameworks.
The first day I went over the basics of the effect and how to implement it using ASP.NET Ajax.
Yesterday I went over how to create the effect using scriptaculous.
Today the goal is to tackle MooTools and see how it stacks up in comparison to the other frameworks.
MooTools - Exercising Frustration
I learned about MooTools when I wrote an article in response to a Warpspire article. Kyle Neath (the Warpspire author) prefers this framework to just about anything else out there. He seemed very knowledgable so I figured I would give it a shot.
Since this was the first time I have delved into this framework two things immediately struck me.
- “Wow this thing is powerful”
- “Man this thing is frustrating”
When you first take a look at the framework, the power and flexibility is obvious. This thing can do just about anything right out of the box. However, if there is something it can’t do, then you can extend it. The framework is completely customizable and extensible. Very nice.
However, once you start trying to dig in, things get confusing pretty quickly. It could have been just me, and I am sure that if I spent more time with it I would grasp it better, but I had a tough time tackling this thing. There is a lot of documentation (more so than scriptaculous by a long shot) and there is an active forum, and yet I still had a rough time. My “aha!” moment was when I found a link to the mootorial written by the cnet guys.
In the end though, I did understand it enough to get it to do what I wanted…so it is usable, just not all that friendly to the newb.
So now that it works, how did I do it?
First, the markup is the exact same as it was with scriptaculous so we are good to go there. The CSS, as usual, doesn’t change either. The only real difference lies in the custom javascript.
function MoveLeft()
{
var effect = new Fx.Style('BigBox', 'marginLeft', {
duration: 500,
transition: Fx.Transitions.Sine.easeInOut
});
var left = document.getElementById("BigBox").style.marginLeft;
if (left == "")
left = 0;
effect.start(parseInt(left)+872);
}
function MoveRight()
{
var effect = new Fx.Style('BigBox', 'marginLeft', {
duration: 500,
transition: Fx.Transitions.Sine.easeInOut
});
var left = document.getElementById("BigBox").style.marginLeft;
if (left == "")
left = 0;
effect.start(parseInt(left)-872);
}The first thing you will notice is there is more javascript than there was for scriptaculous. Why? Basically it stems from the fact there there isn’t a “move” effect. There is a generic “Style” effect which allows you to manipulate the CSS styles of any object. Again, this allows for utmost flexibility, but it is a bit harder to grasp initially. In this example I am playing with “marginLeft”. As you can see the effect itself has a lot of the same properties as the scriptaculous effect.
- ID - This is the ID of our control
- CSS Property - The property you want to manipulate. Notice that the spelling is done the way javascript does it and not the CSS way. In other words its “marginLeft” not “margin-left”
- Options - Again there are more options than I am using here, but just like the scriptaculous script I utilize duration (this time in milliseconds) and transition.
Because this effect manipulates the CSS property rather than “move” the control we have to do a bit of scripting to make sure it moves the way we want to. In my case I simply subtract (or add) 872 to the property each time it is clicked.
Once you wrestle this bear to the ground you begin to appreciate its power. It really is a solid framework that can handle just about anything you throw at it. The end result is a smooth animation that has a lot of different transition possibilities.
Conclusion
After using all three I decided to move forward with my project using scriptaculous. The main reason was simplicity. I want effects, but I want to be able to bust them out quickly and effectively. The scriptaculous framework allows me to do just that. If you have a project that needs more “oomph”, then it might behoove you to take on the big cow. When it comes to animations, the ASP.NET Ajax framework just doesn’t measure up to the others. It is great when it comes to the actual ajax stuff, but the effects are not nearly as polished.
However, that isn’t to say that if you want to mix and match that you can’t. Far from it actually. Given the right circumstances, you could use all three on the same page. In my project I still plan on using the ASP.NET Ajax framework for the asynchronous calls simply because I want C# on the backend.
I hope this series allows you to use this effect on your sites. If you want to get your hands dirty and play around with any of the demos I have created, please feel free to download the files.
If this tutorial does come in handy drop me a line and let me know where I can see it!
Pedja Drljaca said,
Wrote on August 6, 2007 @ 3:22 pm
Very nice. But what if JS is disabled? :/
David Baxter said,
Wrote on August 6, 2007 @ 3:28 pm
I am afraid to say that if javascript is turned off, the effect goes splat. However, you could enhance the page to allow for a seperate menu system that works with or without javascript without too much trouble.
The Coda page has done something like this, and I am planning on implementing something to fill this need for my client’s project.
With that said, however, if you are building a site with this type of effect you are probably building it for an audience that would appreciate it. An audience like that is probably going to have the latest browser with JS enabled.
David
links for 2007-08-07 « Simply… A User said,
Wrote on August 6, 2007 @ 8:44 pm
[…] creativeUI - How To Create a Side Scrolling Page Effect - Part III - MooTools (tags: mootools scriptaculous ** ajax effects slideshow) […]
olivier allouch said,
Wrote on August 7, 2007 @ 6:51 am
Using mootools, your code would actually look like:
function MoveLeft() {
var bigBox = $(’BigBox’);
new Fx.Style(bigBox, ‘marginLeft’, {
duration: 500,
transition: Fx.Transitions.Sine.easeInOut
}).start(bigBox.getStyle(’marginLeft’));
}
(didn’t test it)
mootools handles all the little issues we have with JavaScript
All in a days work… said,
Wrote on August 7, 2007 @ 8:44 am
[…] Create a Side Scrolling Page Effect With MooTools (tags: Scroll MooTools) […]
David Baxter said,
Wrote on August 7, 2007 @ 9:26 am
Hey Olivier, nice script, so does that mitigate the need for this: effect.start(parseInt(left)-872); ?
It just goes to show you the difference between an experienced user and a newb when it comes to MooTools.
David
olivier allouch said,
Wrote on August 7, 2007 @ 11:09 am
You may want to move the element based on its “normal” position. In that case, you should use “position: relative” in the CSS.
Also, I never change margin-left values, but I use the regular “left”.
For me, mootools (the main part of it) really is what JavaScript should have been. I love the syntax, the Element class, the animations, the Events class, (the DnD is so simple) …
BTW, navigation using scrolling is nice
Look at http://filthyrichclients.org/ .
David Baxter said,
Wrote on August 7, 2007 @ 11:34 am
Ooh cheap plug
Its all good. Nice site by the way.
I typically use Left rather than margin-left as well…for some reason in the example I saw when I was dabbling in Moo they used margin-left.
Thanks for the advice.
David
P.S. Olivier, send me an email if you have any interest in writing something on MooTools…
Pedja Drljaca said,
Wrote on August 8, 2007 @ 6:47 am
You’re right, David.
I just wanted to check if there is a JS-off solution.
Thank you for this article,
Pedja
David Baxter said,
Wrote on August 8, 2007 @ 9:01 am
Hey Pedja, glad you liked it. In the next few days I will be posting up the site I have been working on for a client. It contains a much more robust solution, including a JS-off solution.
It is written using Scriptaculous, but it should be easy to convert to MooTools.
David
yellow1912 said,
Wrote on March 30, 2008 @ 4:36 pm
Hi David, thanks for the code. I wonder if you still update this topic.
Anyway, thanks a lot for the codes, I’m both an Ajax newbie and Mootools newbie, and your snippet helped me a lot.
I made some changes:
function MoveLeft(){
var current_slide = parseInt($(’current_slide’).value) - 1;
var left = parseInt($(’BigBox’).getStyle(’marginLeft’))+parseInt($(’ScrollBox’).getStyle(’width’));
if(current_slide parseInt($(’num_slides’).value)){
current_slide = 1;
left = 0;
}
Move(current_slide, left);
}
function Move(current_slide, left){
var bigBox = $(’BigBox’);
new Fx.Style(bigBox, ‘marginLeft’, {
duration: 500,
transition: Fx.Transitions.Sine.easeInOut
}).start(left);
$(’current_slide’).value = current_slide;
}
I assign fixed width to ScrollBox div, and use it instead.
Also, with my code, when you go to the end of the slides, clicking next and you will go back to the beginning (vice versa: at the beginning, you can click previous to go to the end).
I needed to create 2 hidden input fields to store current_slide, and num_slides btw. num_slides is the total number of slides, which is calculated by php/asp.
yellow1912 said,
Wrote on March 30, 2008 @ 4:37 pm
Somehow my MoveRight was cut out:
function MoveRight(){
var current_slide = parseInt($(’current_slide’).value) + 1;
var left = parseInt($(’BigBox’).getStyle(’marginLeft’))-parseInt($(’ScrollBox’).getStyle(’width’));
if(current_slide > parseInt($(’num_slides’).value)){
current_slide = 1;
left = 0;
}
Move(current_slide, left);
}
David Baxter said,
Wrote on March 31, 2008 @ 8:52 am
Hey Yellow, I am glad my post was helpful. I have a more robust solution as the last step in this series, but it uses scriptaculous.
However your code will be great for those who want to stick with mootools.
Thanks!
David
Josh Craddock said,
Wrote on July 12, 2008 @ 2:10 pm
Is there a way to make them scroll vertically rather then horizontally?
fb said,
Wrote on August 14, 2008 @ 3:15 am
cool script!
Manjit Karra said,
Wrote on September 5, 2008 @ 1:36 am
very good, i am from India, a social worker and hav created this website. horizontal scrolling style. we helping people form different countries to explore beautiful India.
i want to make a photo gallery for my website.. just look like as http://www.hotel-oxford.ro/en.. scrolling type. can you help me..
thanx
17 mega-creative side scrolling websites. said,
Wrote on February 28, 2009 @ 2:41 pm
[…] 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 Horizontal […]
Web developer said,
Wrote on June 8, 2009 @ 6:13 pm
It would be great to see something like this created with JQuery.