├── css
    └── blockScroll.css
├── LICENSE
├── README.md
├── blockscroll.jquery.json
└── js
    └── blockScroll.js


/css/blockScroll.css:
--------------------------------------------------------------------------------
 1 | #main-wrap>div
 2 | {
 3 |   position: relative;
 4 |   margin: auto;
 5 |   text-align: center;
 6 | }
 7 | 
 8 | #block-up-arrow, #block-down-arrow {
 9 |   cursor: pointer;
10 | }
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 DominikGorecki
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Block Scroll
 2 | ============
 3 | Block scroll is a jQuery plugin that turns a set of <div> 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.
 4 | 
 5 | Documentation can be found here: http://www.dominikgorecki.com/download/block-scroll/
 6 | 
 7 | Features
 8 | --------
 9 | Up and down movements can be performed using keyboard, scroll, buttons, or the mouse wheel*.
10 | 
11 | As well, the design is responsive and it automatically adjusts to any reasonable resolution so long as you don't overload each block.
12 | 
13 | Pages are sticky, which means that they automatically adjust to the vertical center of the screen.
14 | 
15 | The look and feel are customizable through css and initialization settings.
16 | 
17 | Up and down buttons are automatically wired in so long as you use the right id names for them.
18 | 
19 | You can change the location of the active block using javascript after it's initialized.
20 | 
21 | Demos
22 | -----
23 | http://www.dominikgorecki.com/p/block-scroll/
24 | 
25 | http://www.dominikgorecki.com/p/block-scroll/demo02.html
26 | 


--------------------------------------------------------------------------------
/blockscroll.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "blockscroll",
 3 |     "title": "BlockScroll for presentations",
 4 |     "description": "It takes each element and turns it into a full-page element stacked on top of each other. The user can then go through one at a time using the keyboard or scroll, or go to a specific one. Transitions between elements have animated scroll so it looks very smooth and modern. See the demo!",
 5 |     "keywords": [
 6 |         "scroll",
 7 |         "presentation",
 8 |         "fullscreen",
 9 |         "powerpoint",
10 |         "slides",
11 |         "smooth",
12 |         "full-page"
13 |     ],
14 |     "version": "1.0.3",
15 |     "author": {
16 |         "name": "Dominik Gorecki",
17 |         "email": "d@dominikgorecki.com",
18 |         "url": "http://www.dominikgorecki.com"
19 |     },
20 |     "maintainers": [
21 |         {
22 |           "name": "Dominik Gorecki",
23 |           "email": "d@dominikgorecki.com",
24 |           "url": "http://www.dominikgorecki.com"
25 |         }
26 |     ],
27 |     "licenses": [
28 |         {
29 |             "type": "MIT",
30 |             "url": "http://opensource.org/licenses/MIT"
31 |         }
32 |     ],
33 |     "homepage": "http://www.dominikgorecki.com/download/block-scroll/",
34 |     "docs": "http://www.dominikgorecki.com/download/block-scroll/",
35 |     "dependencies": {
36 |         "jquery": ">=1.5"
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/js/blockScroll.js:
--------------------------------------------------------------------------------
  1 | (function( $ ) {
  2 | 
  3 |   $.fn.blockScroll = function(options) {
  4 |     var settings = $.extend({
  5 |       // These are the defaults.
  6 |       startDiv : 1,
  7 |       fadeDuration : "slow",
  8 |       paddingRatio : 0.05,
  9 |       triggerRatio : 0.005,
 10 |       scrollDuration: "fast",
 11 |       fadeBlocks: true
 12 |     }, options );
 13 | 
 14 |     if(settings.triggerRatio > settings.paddingRatio*.95) { settings.triggerRatio = settings.paddingRatio*.95 }
 15 | 
 16 |     var theDivs = this.children().filter("div");
 17 |     var activeDiv = settings.startDiv-1; //Active did is 0-index, settings is 1-index
 18 |     var windowHeight;
 19 |     var paddingHeight;
 20 |     var triggerHeight;
 21 |     var currentDownTrigger;
 22 |     var currentUpTrigger;
 23 |     var totalDivs = theDivs.length;
 24 |     var lastScrollPos;
 25 |     var activelyScrolling = false;
 26 |     var activeBackground= 0;
 27 | 
 28 |     // Ensure that all of the elements are hidden just in case the css is not setup properly
 29 |     if(settings.fadeBlocks)
 30 |     {
 31 |       this.children().each(function() {
 32 |         $(this).css('opacity','0');
 33 |       });
 34 |     }
 35 | 
 36 |     arrange();
 37 |     // Fade in the first div
 38 |     $(theDivs[activeDiv]).animate({opacity: 1},settings.fadeDuration,'linear', function() {
 39 |       $(window).scrollTop(0);
 40 |       calcTriggers();
 41 |       bindEvents();
 42 |       lastScrollPos = $(window).scrollTop();
 43 |     });
 44 | 
 45 |     function bindEvents()
 46 |     {
 47 |       $(window).on('scroll', function(e) {
 48 |         var scrollPosition = $(window).scrollTop();
 49 |         var scrollDistance = $(window).height();
 50 |         var indexOfClosest = 0;
 51 | 
 52 |         theDivs.each(function(index, element) {
 53 |           var $this = $(this);
 54 |           var topPosition = $this.offset().top;
 55 |           var newScrollDistance = Math.abs(scrollPosition - topPosition);
 56 |           if(newScrollDistance < scrollDistance)
 57 |           {
 58 |             indexOfClosest = index;
 59 |             scrollDistance = newScrollDistance;
 60 |           }
 61 |         });
 62 |         gotoDiv(indexOfClosest);
 63 |       }, 250);
 64 | 
 65 |       $(window).resize(function() {
 66 |         arrange();
 67 |       });
 68 | 
 69 |       $("#block-up-arrow").click(function() {
 70 |         goUp();
 71 |       });
 72 | 
 73 |       $("#block-down-arrow").click(function() {
 74 |         goDown();
 75 |       });
 76 | 
 77 |       $(document).keydown(function(e){
 78 |           if (e.keyCode == 37 || e.keyCode == 38) {
 79 |              goUp();
 80 |              return false;
 81 |           }
 82 | 
 83 |           if (e.keyCode == 39 || e.keyCode == 40) {
 84 |              goDown();
 85 |              return false;
 86 |           }
 87 |       });
 88 | 		$(window).bind('mousewheel', function(e){
 89 | 			if(e.originalEvent.wheelDelta > 119) {
 90 | 				goUp();
 91 | 			}
 92 | 			else if (e.originalEvent.wheelDelta < -119) {
 93 | 				goDown();
 94 | 			}
 95 | 		});
 96 | 		$(window).bind('DOMMouseScroll', function(e){
 97 | 			if(e.originalEvent.detail < 0) {
 98 | 				goUp();
 99 | 			}
100 | 			else if (e.originalEvent.detail > 0) {
101 | 				goDown();
102 | 			}
103 | 		});
104 |     }
105 | 
106 |     function goUp()
107 |     {
108 |       if(activeDiv > 0 && !activelyScrolling)
109 |       {
110 |         gotoDiv(activeDiv-1);
111 |       }
112 |     }
113 | 
114 |     function goDown()
115 |     {
116 |       if(activeDiv < totalDivs - 1 && !activelyScrolling)
117 |       {
118 |         gotoDiv(activeDiv+1);
119 |       }
120 |     }
121 | 
122 |     function gotoDiv(number)
123 |     {
124 |       if(number == 0)
125 |         $("#block-up-arrow").hide();
126 |       else
127 |         $("#block-up-arrow").show();
128 |       if(number == totalDivs-1)
129 |         $("#block-down-arrow").hide();
130 |       else
131 |         $("#block-down-arrow").show();
132 |       activeDiv = number;
133 |       activelyScrolling = true;
134 |       $('html, body').animate({scrollTop: $(theDivs[activeDiv]).offset().top}, settings.scrollDuration, 'linear', function() {
135 |         $(theDivs[activeDiv]).animate({opacity: 1}, settings.fadeDuration,'linear', function() {
136 |           setTimeout(function(){
137 |             activelyScrolling = false; lastScrollPos = $(window).scrollTop();
138 |           },50);
139 |         });
140 |       });
141 |       calcTriggers();
142 |     }
143 | 
144 |     function calcTriggers()
145 |     {
146 |       if (activeDiv < totalDivs -1)
147 |       {
148 |         currentDownTrigger = $(theDivs[activeDiv+1]).offset().top;
149 |       } else {
150 |         currentDownTrigger = -1;
151 |       }
152 | 
153 |       if (activeDiv > 0) {
154 |         currentUpTrigger = $(theDivs[activeDiv-1]).offset().top;
155 |       } else {
156 |         currentUpTrigger = -1;
157 |       }
158 |     }
159 | 
160 |     function calcDims()
161 |     {
162 |       windowHeight = $(window).height();
163 |       paddingHeight = windowHeight * settings.paddingRatio;
164 |       triggerHeight = windowHeight * settings.triggerRatio;
165 |     }
166 | 
167 | 
168 |     function arrange()
169 |     {
170 |       calcDims();
171 |       theDivs.each(function(index, element) {
172 |         var $this = $(this);
173 |         $this.height('auto');
174 |         if($this.height() < windowHeight)
175 |         {
176 |           var margin = windowHeight/2 - $this.height()/2;
177 |           $this.height(windowHeight-margin);
178 |           $this.css('padding-top', margin + "px");
179 |           var $innerDiv = $($this.children().filter('div')[0]);
180 |           // $innerDiv.css('padding-top', margin + "px");
181 |         }
182 |         if(index != totalDivs - 1)
183 |         {
184 |           //$this.css('padding-bottom',paddingHeight + 'px');
185 |         }
186 |       });
187 |       gotoDiv(activeDiv);
188 |     }
189 | 
190 |     var gotoView = function(number)
191 |     {
192 |       gotoDiv(number-1);
193 |     }
194 | 
195 |     return {
196 |       goto: gotoView
197 |     };
198 |   }
199 | 
200 | }( jQuery ));
201 | 
202 | ;(function ($) {
203 |     var on = $.fn.on, timer;
204 |     $.fn.on = function () {
205 |         var args = Array.apply(null, arguments);
206 |         var last = args[args.length - 1];
207 | 
208 |         if (isNaN(last) || (last === 1 && args.pop())) return on.apply(this, args);
209 | 
210 |         var delay = args.pop();
211 |         var fn = args.pop();
212 | 
213 |         args.push(function () {
214 |             var self = this, params = arguments;
215 |             clearTimeout(timer);
216 |             timer = setTimeout(function () {
217 |                 fn.apply(self, params);
218 |             }, delay);
219 |         });
220 | 
221 |         return on.apply(this, args);
222 |     };
223 | }(this.jQuery || this.Zepto));
224 | 


--------------------------------------------------------------------------------