Horizontal scrolling in the block

Horizontal scrolling is a very original technique, namely, originality is one of the main components of the success of any project.

How it works?

A block (Container) is created with a size limit, a larger block (Slider) is placed in the Container in which there are blocks with content (Section).

')

In the Container block, we will only see part of the Slider block, as shown in the figure below.





With a certain action, the Slidera block shifts and thus its visible part changes, as shown in the figure below.







I think now everything is clear to everyone :)

Implementation

All operations with the movement of the Slider block will occur with the help of the well-known javascript library mootools.



HTML code is very simple. First we connect and configure the mootools library by inserting the code given below between the head tags .

  <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.

  <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 it remains only to issue the whole thing with the help of css

  #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: #CCCC;

 }
 .section {

 margin: 0;
 width: 220px;
 float: left;
 margin-right: 50px;

 } 

Everything! Done ^ _ ^

See an example



Download an example

Source Chernev.Ru - Positive blog