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 PreviewA 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:
...and the following script immediately below the previous code:
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:
... add some HML sections here...
</div>
...and you can add some sections simply adding some DIV layers into the DIV #slider:
<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>
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):
height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
.slider{
height: 400px;
padding: 20px;
background: #CCCCCC;
.section{
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
Antonio Lupetti
17 comments
Great post and original idea!
This is great.
If this could be combined with the fisheye effect, could be an awesome scrolling dock/nav system.
Awesome effect!
I'd use it, but sadly I use Scriptaculous; does anyone know how to achieve the same effect with Scriptaculous?
Okay, I'm blown away!
Great, thanks for the tip.
Thank you so much! Just what I needed right now!
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.
@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.! :))
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.
@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.
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.
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!
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!
Is there a way to get smoother motion effect?
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
Great Idea and i like your idea. Thank's a lot.
Ralph
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?
Post a Comment