1(function($) { 2$(document).ready(function() { 3 var $sidescroll = (function() { 4 5 // the row elements 6 var $rows = $('#ss-container > div.ss-row'), 7 // we will cache the inviewport rows and the outside viewport rows 8 $rowsViewport, $rowsOutViewport, 9 // navigation menu links 10 $links = $('#ss-links > a'), 11 // the window element 12 $win = $(window), 13 // we will store the window sizes here 14 winSize = {}, 15 // used in the scroll setTimeout function 16 anim = false, 17 // page scroll speed 18 scollPageSpeed = 2000 , 19 // page scroll easing 20 scollPageEasing = 'easeInOutExpo', 21 // perspective? 22 hasPerspective = false, 23 24 perspective = hasPerspective && Modernizr.csstransforms3d, 25 // initialize function 26 init = function() { 27 28 // get window sizes 29 getWinSize(); 30 // initialize events 31 initEvents(); 32 // define the inviewport selector 33 defineViewport(); 34 // gets the elements that match the previous selector 35 setViewportRows(); 36 // if perspective add css 37 if( perspective ) { 38 $rows.css({ 39 '-webkit-perspective' : 600, 40 '-webkit-perspective-origin' : '50% 0%' 41 }); 42 } 43 // show the pointers for the inviewport rows 44 $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco'); 45 // set positions for each row 46 placeRows(); 47 48 }, 49 // defines a selector that gathers the row elems that are initially visible. 50 // the element is visible if its top is less than the window's height. 51 // these elements will not be affected when scrolling the page. 52 defineViewport = function() { 53 54 $.extend( $.expr[':'], { 55 56 inviewport : function ( el ) { 57 if ( $(el).offset().top < winSize.height ) { 58 return true; 59 } 60 return false; 61 } 62 63 }); 64 65 }, 66 // checks which rows are initially visible
67 setViewportRows = function() { 68 69 $rowsViewport = $rows.filter(':inviewport'); 70 $rowsOutViewport = $rows.not( $rowsViewport ) 71 72 }, 73 // get window sizes 74 getWinSize = function() { 75 76 winSize.width = $win.width(); 77 winSize.height = $win.height(); 78 79 }, 80 // initialize some events 81 initEvents = function() { 82 83 // navigation menu links. 84 // scroll to the respective section. 85 $links.on( 'click.Scrolling', function( event ) { 86 87 // scroll to the element that has id = menu's href 88 $('html, body').stop().animate({ 89 scrollTop: $( $(this).attr('href') ).offset().top 90 }, scollPageSpeed, scollPageEasing ); 91 92 return false; 93 94 }); 95 96 $(window).on({ 97 // on window resize we need to redefine which rows are initially visible (this ones we will not animate). 98 'resize.Scrolling' : function( event ) { 99 100 // get the window sizes again 101 getWinSize(); 102 // redefine which rows are initially visible (:inviewport) 103 setViewportRows(); 104 // remove pointers for every row 105 $rows.find('a.ss-circle').removeClass('ss-circle-deco'); 106 // show inviewport rows and respective pointers 107 $rowsViewport.each( function() { 108 109 $(this).find('div.ss-left') 110 .css({ left : '0%' }) 111 .end() 112 .find('div.ss-right') 113 .css({ right : '0%' }) 114 .end() 115 .find('a.ss-circle') 116 .addClass('ss-circle-deco'); 117 118 }); 119 120 }, 121 // when scrolling the page change the position of each row 122 'scroll.Scrolling' : function( event ) { 123 124 // set a timeout to avoid that the 125 // placeRows function gets called on every scroll trigger 126 if( anim ) return false; 127 anim = true; 128 setTimeout( function() { 129 130 placeRows(); 131 anim = false; 132 133 }, 10 ); 134 135 } 136 }); 137 138 }, 139 // sets the position of the rows (left and right row elements). 140 // Both of these elements will start with -50% for the left/right (not visible) 141 // and this value should be 0% (final position) when the element is on the 142 // center of the window. 143 placeRows = function() { 144 145 // how much we scrolled so far 146 var winscroll = $win.scrollTop(), 147 // the y value for the center of the screen 148 winCenter = winSize.height / 2 + winscroll; 149 150 // for every row that is not inviewport 151 $rowsOutViewport.each( function(i) { 152 153 var $row = $(this), 154 // the left side element 155 $rowL = $row.find('div.ss-left'), 156 // the right side element 157 $rowR = $row.find('div.ss-right'), 158 // top value 159 rowT = $row.offset().top; 160 161 // hide the row if it is under the viewport 162 if( rowT > winSize.height + winscroll ) { 163 164 if( perspective ) { 165 166 $rowL.css({ 167 '-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)', 168 'opacity' : 0 169 }); 170 $rowR.css({ 171 '-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)', 172 'opacity' : 0 173 }); 174 175 } 176 else { 177 178 $rowL.css({ left : '-50%' }); 179 $rowR.css({ right : '-50%' }); 180 181 } 182 183 } 184 // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen. 185 else { 186 187 // row's height 188 var rowH = $row.height(), 189 // the value on each scrolling step will be proporcional to the distance from the center of the screen to its height 190 factor = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ), 191 // value for the left / right of each side of the row. 192 // 0% is the limit 193 val = Math.max( factor * 50, 0 ); 194 195 if( val <= 0 ) { 196 197 // when 0% is reached show the pointer for that row 198 if( !$row.data('pointer') ) { 199 200 $row.data( 'pointer', true ); 201 $row.find('.ss-circle').addClass('ss-circle-deco'); 202 203 } 204 205 } 206 else { 207 208 // the pointer should not be shown 209 if( $row.data('pointer') ) { 210 211 $row.data( 'pointer', false ); 212 $row.find('.ss-circle').removeClass('ss-circle-deco'); 213 214 } 215 216 } 217 218 // set calculated values 219 if( perspective ) { 220 221 var t = Math.max( factor * 75, 0 ), 222 r = Math.max( factor * 90, 0 ), 223 o = Math.min( Math.abs( factor - 1 ), 1 ); 224 225 $rowL.css({ 226 '-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)', 227 'opacity' : o 228 }); 229 $rowR.css({ 230 '-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)', 231 'opacity' : o 232 }); 233 234 } 235 else { 236 237 $rowL.css({ left : - val + '%' }); 238 $rowR.css({ right : - val + '%' }); 239 240 } 241 242 } 243 244 }); 245 246 }; 247 248 return { init : init }; 249 250 })(); 251 252 $sidescroll.init(); 253 254 }); 255})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.