Block Scroll - Breaks down information into blocks

Block scroll is a jQuery plugin that turns a set of elements into a blocks and displays them one screen at a time. The idea is to break up your page into chunks for better presentation and user-flow. Block Scroll automatically turns your page responsive.

Features

Up and down movements can be performed using keyboard, scroll, buttons, or the mouse wheel*.

As well, the design is responsive and it automatically adjusts to any reasonable resolution so long as you don't overload each block.

Pages are sticky, which means that they automatically adjust to the vertical center of the screen.

The look and feel are customizable through css and initialization settings.

Up and down buttons are automatically wired in so long as you use the right id names for them.

You can change the location of the active block using javascript after it's initialized.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: dominikgorecki.com

1. INCLUDE JS AND CSS FILES

<script src="js/jquery.js"></script>
<script src="js/blockScroll.js"></script>
<link rel="stylesheet" type="text/css" href="css/blockScroll.css">

2. HTML

Create a wrapper and create direct children <div>’s that hold all the content

<div id="main-wrap">
      <div>FIRST BLOCK</div>
      <div>SECOND BLOCK</div>
      <div>...</div>
</div>

3. JAVASCRIPT

$(function() {
      var blockScroller = $("#main-wrap").blockScroll();
});

4. CUSTOMIZE

For now, you can customize the speed of the scroll, whether the blocks fade in on first show, and the speed of the fade on initialization.

$("#main-wrap").blockScroll({
      scrollDuration: [jQuery duration],
      fadeBlocks: [bool],
      fadeDuration: [jQuery duration]
});

There rest is up to you to customize in the CSS. For example, you can turn off the scroll bar with

body
{
       overflow: hidden;
}