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:
<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>
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>... add some HML sections here...
</div>
...and you can add some sections simply adding some DIV layers into the DIV #slider:
<div id="container">
<div class="slider">
</div> <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 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):
#container{
.slider{
.section{
width: 780px;
height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
}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;
}height: 400px;
padding: 20px;
background: #CCCCCC;
.section{
margin:0;
width:220px;
float:left;
margin-right:50px;
}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
No comments:
Post a Comment