Horizontal scrolling in the block
Horizontal scrolling is very original, and originality is exactly one of the main components of success of any project.
How it works?
Creates a block(Container), Container is placed in a block larger(Slider) in which the(Section).
In the block Container, we will see only part of the block Slider, as shown in the figure below.
When you do certain actions unit Slidera is shifted and thereby the visible part changes, as shown in the figure below.
I think now everything is clear to everyone :)
the
Implementation
All operations with the movement of the Slider block will occur with the aid of all known javascript library mootools.
HTML code is very simple. First connect and configure the mootools library by inserting this code below between the tags head.
the
<script type="text/javascript"src="mootools.svn.js"></script>
<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>Next, create all the necessary blocks.
the
<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>
Now you only have to draw the whole thing using css
the
#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;
}All! Ready ^_^
View example
Download example
Source Chernev.Ru is a Positive blog
Комментарии
Отправить комментарий