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:
A little introductionThe 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 codeHTML 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 codeCSS 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!