New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/block-scroll-breaks-down-information-into-blocks/
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.
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.
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">
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>
$(function() var blockScroller = $("#main-wrap").blockScroll(); );
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
