This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Tuesday, March 25, 2008

Using CSS and Mootools to simulate Flash horizontal navigation effect

Some year ago I was a big Macromedia/Adobe Flash fan. Let me say... at that time, if you used Flash for your websites you was really cool and ok... I admit it, I liked the simplicity to place everything where I wanted and all fantastic animation effects I could obtain using Actionscript. But times change and I had a new "conversion" from FLASH to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.

Yesterday I asked to me how could obtain the same effect using CSS and HTML... So, I found an interesting solution at my question which I want to share with you. This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.



You can download the source code (ready to use in your web projects) and see how this tutorial works using the following links:

Download this tutorial Live Preview


A little introduction
The following image explains the structure of this tutorial. You have a DIV layer (#container) which is the "visible mask" for all elements contained into the DIV .slide. All HTML elements outside the "borders" of the DIV #container are hidden (in this case section 4 and section 5). Section 1, Section 2... Section 5 are DIV layers with some HTML content you can customize how you prefer:




When you move your mouse to the right of the div #container, the DIV #slider with its content will move itself to the right. In this way section 1 and section 2 will move beyond the borders of the visible mask (#container) and they will be hidden:





HTML code
HTML code is very simple. First add a link to mootools framework in the <head> tag of your page using this line of code:

<script type="text/javascript" src="mootools.svn.js"></script>

...and the following script immediately below the previous code:

<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity: 1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>

Now, add this code in the <body> tag:

<div id="container">
<div class="slider">
... add some HML sections here...
</div>
</div>

...and you can add some sections simply adding some DIV layers into the DIV #slider:

<div id="container">
<div class="slider">
<div class="section">section 1 content</div>
<div class="section">section 2 content</div>
<div class="section">section 3 content</div>
<div class="section">section 4 content</div>
<div class="section">section 5 content</div>
</div>
</div>

Ok... now the only thing you have to do is free your creativity to design your sections using CSS and images.

CSS code
CSS code for the main structure is the following (take a mind you can customize this code how you prefer, but the only attributes you have not to change are overwlow attributes of the ID #container):

#container{
width: 780px;
height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
}

.slider{
width: 2000px;
height: 400px;
padding: 20px;
background: #CCCCCC;
}

.section{
margin:0;
width:220px;
float:left;
margin-right:50px;
}

For a perfect result, the height attribute of #container must be equal to the sum of height + padding of the class .slider. The width attribute of the class .slider have to be a value greater than #container width.

You can customize the .section class changing the width, the background color and all other parameters you want.

It's all! Download the source code and try it!

Download this tutorial Live Preview

blog comments powered by Disqus
Anonymous said...

Great post and original idea!

Anonymous said...

This is great.

If this could be combined with the fisheye effect, could be an awesome scrolling dock/nav system.

Brandon said...

Awesome effect!

I'd use it, but sadly I use Scriptaculous; does anyone know how to achieve the same effect with Scriptaculous?

Erika said...

Okay, I'm blown away!

Javier Jofre said...

Great, thanks for the tip.

Stefan said...

Thank you so much! Just what I needed right now!

coderanger said...

This is a horrible idea. If you want a horizontal scrollbar, use a horizontal scrollbar. This breaks any number of UI paradigms, and it generally hard to discover and navigate. There are real UI widgets designed for this that users will already recognize and know how to use. I really hope you don't use this anywhere important.

Antonio said...

@coderanger: I think this is simply "an idea". I don't want an horizontal scrollbar. I want my content follows the mouse with a motion effect.

You say: "it's hard to discover and navigate". In this case perhaps but only because I remove all not necessary elements to simplify the tutorial. But if you want you can add a big arrow to the left and to the right of the main container with this text: move your mouse to the left, move your mouse to te right.! :))

Stefan said...

Hey, I added a horizontal scrollbar to it (and made it a little taller so the scrollbar fits in too) and it works just fine.
This little mouseover trick is just a addition to normal horizontal scroller.
And imho it's great.

Chris said...

@coderanger - Definitly right. Confusing, not smooth (Firefox 2.X). I think these kind of menus came and went with flash.

Great programming feat though! I am impressed with the cleanliness and legibility of your code.

Andrew Herron said...

Nice! Just one issue though...

If the mouse is on top of a content section when the scroll event happens, when the mouse 'leaves' the content section the effect will stop. If you cause the effect, let's say, below the content sections, it will continue to scroll. I'm not sure if this is by design, but it's not well laid out and therefore could be considered a broken UI.

While some might say this breaks UI standards and what not... eh. Don't think about it as a new car replacing your old truck, think about the parts of the new car and how you could enhance your old truck with them.

Anonymous said...

whoever said that this is a bad UI design just look at this!
http://www.etsy.com/time_machine2.php
go ahead take your mouse to the "Auto Scroll" button and see the goodies.
This is an awesome effect and Thanks to the author for this. However, it definatley isnt smooth fin FF 3 Beta 4. While going towards left..it stops untill unless u move your mouse little to further left.

simply great!

Scott said...

Thanks to some folks over at mootools forums I discovered that using mouseenter and mouseleave instead of mouseover and mouseout seems to fix some of the jerky motion in Firefox. Here's a link to the discussion.

http://forum.mootools.net/viewtopic.php?id=5488

Great work on this btw. Thanks for sharing it!

Anonymous said...

Is there a way to get smoother motion effect?

astr said...

I like your idea very much. Sometimes a simple idea saves a day, as it did for me, so thanks a lot.

But Opera 9.25 on Kubuntu 7.10 puts scrollbars into the container window. The right one can be gotten rid of, but not the bottom one. Do you have any idea for this as well? Or is Opera not to be convinced to drop the bar?

Best

astr

Ralph said...

Great Idea and i like your idea. Thank's a lot.

Ralph

Scott said...

I'm trying to figure out a way to add some visual cues so that the user knows to mouse over the left and right regions(e.g. some arrows). All the css solutions I've come up with fail on one level or another. Do you have any css or javascript recommendations?

Jonah Dempcy said...

@scott: Horizontal scrolling is a very difficult thing to get right. From a usability perspective, its one of the big no-nos (Jakob Nielsen explicitly forbids it!) but that being said, I have found some use for horizontal scrolling. For instance, Google Docs & Spreadsheets uses horizontal scrolling to good effect in their Excel-like spreadsheet editor. But in that case and most other cases where horizontal scrolling is effective, it uses the browser default scrollbar.

In order to convey horizontal scrolling without it, a few things are important. One, it should start with half of an item cut off on the right side. This may be difficult to calculate if you have flexible width (liquid width layout) on your site, but you can still put a fixed-width container that crops the items at an arbitrary point. The reason to crop them with part showing is because the user will naturally mouse over that area to try to discover that item, at which point it will move over. Two, there must be some visual indications from graphics that it's possible to scroll. This could be a gradient fade on the right (but not on the left) indicating that it continues to the right. Or it could have something signifying starting on the left, but the background just continues on to the edge of the screen on the right, perhaps indicating to the user that they can explore that area of the page. I have seen this put to good use in a web design portfolio site which had a sidebar on the left and all webpages presented one after another horizontally. (It, too, had browser default scrollbars though).

Another point: This type of horizontal scrolling is not suitable for e-commerce applications as people take time to process items and decide if they want to click on the detail page (to find out more about and potentially purchase the item). For e-commerce sites, pagination is preferable for this reason. With pagination, you can click once and get a new set of results, then stop and examine them. With constant scrolling, you never have a chance to process each set of data.

So, I think this is more appropriate for artistic, design-oriented or experimental websites. This effect could be put to great use in an artist's portfolio, for instance, or any area where innovative UI is more important than usability.

One final thought: The succinct and easy-to-read code is a testament both to the author's skill as a programmer and to the high-level robustness of MooTools as a framework. Thanks for the article!

Gizmo said...

Hi,

How can you make it to scroll in whatever direction you want?

Say you had a huge div, like 4 monitors one next to each other...

Look at www.nofrks.com, the guys over there implemented the mootools as they are, with links.

What if you could also (besides the links that scroll to a certain div) add this mouse navigation throughout the whole site?

I want to create my protfolio in this style.

Waiting for your feedback :)
Thanks

Rich said...

Hi,

Does someone know how to work around the Z-Order image bug that Mootools seems to create in IE?
Images work fine for Firefox but with IE they don't show up at all unless I wave my mouse over them.

Catboy said...

Save my day!!!

Just Design Studio said...

i would like to ask how i ca make vertical scroll?

well my idea is use both, vertical and horizontal scroll to make a site.

Thanks and really great job

Lozbo said...

Hey there Antonio! Great job! I am using Mootools 1.2 here though, and it does not seem to work. I made some research and this looks to be a bug in Mootools, but I really I'm a little bit clueless, I'm new to Mootools.

Do you have any ideas?

@coderanger: If you don't like this, express it in a polite way, don't say it's a horrible idea (because it's not in a lot of other people's opinion). I know a bit of user interface paradigms and Jakob Nielsen, and I have two things to say: user interface does not mean ugly designed websites, nor it's enemy of user experience, and most important: the target audience of your site will determine what can you allow your site to do and what not; if you design a University website, you must keep design simple and fancy widgets to a minimum, but if you build a website for the same university, targeted to a specific master degree related to multimedia and technologies, you can allow your site to do more things, knowing that your audience will properly understand it and have the right connection speed and minimum hardware requirements.

The target audience will set the rules for everything from content to graphic design to functionality.

Ciao and congratulazioni!

Jordan said...

Antonio, excellent way to tackle the problem and a nice solution. I thought you and others might be interested in how I used this in a gallery implementation with vertical scrolling.

Smooth scrolling gallery

Thanks to Jonah Dempcy's comments on usability, and Scott for the smooth scrolling fix.

Anonymous said...

Hi this is great stuff, but it wont work if I use mootools downloaded from their site?? Only with mootools I downloadede from your example?

Any help?

Sneh said...

I really loved your concept..and just keep moving my mouse from here to there :)

I am not JavaScript expert,Is anyone knows that.. if i want to make this movement on button click(i.e. on next button click i can get next three div tags.)

Something like this :
http://www.etsy.com/community.php

I will really appreciate the help on this

ingrid staats said...

This would be perfect for my personal website, but I'm having trouble because not all of the thumbnails that I want to have scrolling are the same width (some are 100 pixels, some are 150 pixels). I've messed with varying the .slider and #container widths to no avail- the wider images end up on top of other images. How do I remedy this?

ingrid staats said...

oh, never mind, i figured it out!

Robert Dabi said...

wow, this is excactly what i was looking for (for a horizontal web page). i suck at programming, but with your tutorial i'll hopefully be able to get it done right. i'll try it this evening.

mad props, great stuff!

Anonymous said...

I love this effect, simple and allows for complex formatting. I have one question; Is there anyway of calling the script using buttons or graphic? I have added an arrow at both ends of the scroller and need to be able to click them to move the scroller. Any ideas?

Anonymous said...

This is amazing!
Is there a way to create a gradient effect on the border rather than a hard edge?

Anonymous said...

Great!
Interesting!
Attracting!
Fantastic!
Boombastic!

I have no idea exactly what all these coding is about......

Bryan Mace said...

This code is really cool. I modified it a little bit so that I could use it for photos of my band.

I found that including a narrow, animated .gif between photos helped draw people's mouse to the edge of the frame so that they would discover the scrolling feature as a pleasant surprise.

It also helped to tweak the "area" and "velocity" settings in the code.

Larger "area" values control how close to the edge you need to be before the motion takes effect and the "velocity" determines the scroll speed. For my site, a velocity of ".05" worked out well.

Check out the results at: www.CrashTheCar.com

Smith Blogs said...

Thanks Bryan for your additions. I sliced up a landscape image into sections and with 0 margins is looks seamless!

Now what parts of moo tools do I need if I want the latest javascript?

vicky said...

Hi! Great effect!
Can I combine this effect width lightbox? (..it doesn't work)

Marcin said...

Yes, this is a wonderfull tool!

Would be great if it could be used with Mootools 1.11, cause now it cannot be used with other tools on a page...

Karen Kaufman said...

Okay, I'm in love. This is exactly what I was looking for. I am completely blown away at how simple this is. Kisses kisses kisses!!!! I will remember you on my site (once I get the design down pat), which, thanks to you, is so delightfully easy!

vincenzo said...

ciao, lascia perdere chi ti dice che è una idea orribile...
è veramente bello e sostituisce flash per questo genere di cose.

Jess said...

Great code, and well explained. Having big problems in IE7 though, with Expected ')' errors from line 214 onwards, a 'null' is null or not an object error on line 20, and line 3065 object does not support this property or method. Debugging in Visual Studio just gives me a blank file...but the only file I am using with anywhere near enough lines is the mootools one! I must have done something very wrong somewhere, as no-one else has reported problems. FF works fine though!

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News