Прокрутка сторінки: гарний ефект

lt;div id="Cbp-so-scroller" class="Cbp-so-scroller"gt;
class="Cbp-so-section"gt;class="Cbp-so-side cbp-so-side-left"gt;lt;h2gt; Lemon dropslt;/h2gt;lt;h2gt; Назваlt;/h2gt;lt;pgt; Описlt;/pgt;lt;/articlegt;
class="Cbp-so-side cbp-so-side-right"gt;lt;img src="Images / 1.jpg" alt="Img01"gt;lt;/figuregt;lt;/sectiongt;
class="Cbp-so-section"gt;
class="Cbp-so-side cbp-so-side-left"gt;lt;img src="Images / 2.jpg" alt="Img01"gt;lt;/figuregt;class="Cbp-so-side cbp-so-side-right"gt;lt;h2gt; Назваlt;/h2gt;lt;pgt; Описlt;/pgt;lt;/articlegt;lt;/sectiongt;lt;/sectiongt;lt;/divgt;

.cbp-so-scroller {margin-top: 3em-overflow: hidden-}

.cbp-so-section {margin-bottom: 15em-}.cbp-so-section: before,.cbp-so-section: after {content: ""-display: table-}.cbp-so-section: after {clear: both-}

.cbp-so-section h2 {font-size: 5em-font-weight: 300-line-height: 1-}.cbp-so-section p {font-size: 2em-font-weight: 300-}.cbp-so-side {width: 50%-float: left-margin: 0-padding: 3em 4%-overflow: hidden-min-height: 12em--webkit-transition: -webkit-transform 0.5s, opacity 0.5s--moz-transition: -moz-transform 0.5s, opacity 0.5s-transition: transform 0.5s, opacity 0.5s-}.cbp-so-side: before,.cbp-so-side: after {content: ""-display: table-}.cbp-so-side: after {clear: both-}.cbp-so-side-right {text-align: left-}.cbp-so-side-left {text-align: right-}.cbp-so-side-right img {float: left-}.cbp-so-side-left img {float: right-}.cbp-so-init .cbp-so-side {opacity: 0-}.cbp-so-init .cbp-so-side-left {-webkit-transform: translateX(-80px)--moz-transform: translateX(-80px)-transform: translateX(-80px)-}.cbp-so-init .cbp-so-side-right {-webkit-transform: translateX(80px)--moz-transform: translateX(80px)-transform: translateX(80px)-}.cbp-so-section.cbp-so-animate .cbp-so-side-left,.cbp-so-section.cbp-so-animate .cbp-so-side-right {-webkit-transform: translateX(0px)--moz-transform: translateX(0px)-transform: translateX(0px)-opacity: 1-}

-( function( window ) {`Use strict`-var docElem = window.document.documentElement-function getViewportH() {var client = docElem[`ClientHeight`],inner = window[`InnerHeight`]-if( client lt; inner )return inner-elsereturn client-}function scrollY() function getOffset( el ) {var offsetTop = 0, offsetLeft = 0-do {if ( !isNaN( el.offsetTop ) ) {offsetTop += el.offsetTop-}if ( !isNaN( el.offsetLeft ) ) {offsetLeft += el.offsetLeft-}} while( el = el.offsetParent )return {top : offsetTop,left : offsetLeft}}function inViewport( el, h ) function extend( a, b ) {for( var key in b ) {if( b.hasOwnProperty( key ) ) {a[key] = b[key]-}}return a-}function cbpScroller( el, options ) {this.el = el-this.options = extend( this.defaults, options )-this._init()-}cbpScroller.prototype = {defaults : {viewportFactor : 0.2},_init : function() {if( Modernizr.touch ) return-this.sections = Array.prototype.slice.call( this.el.querySelectorAll( `.cbp-so-section` ) )-this.didScroll = false-var self = this-// the sections already shown ...this.sections.forEach( function( el, i ) {if( !inViewport( el ) ) {classie.add( el, `Cbp-so-init` )-}} )-var scrollHandler = function() {if( !self.didScroll ) {self.didScroll = true-setTimeout( function() { self._scrollPage()- }, 60 )-}},resizeHandler = function() {function delayed() {self._scrollPage()-self.resizeTimeout = null-}if ( self.resizeTimeout ) {clearTimeout( self.resizeTimeout )-}self.resizeTimeout = setTimeout( delayed, 200 )-}-window.addEventListener( `Scroll`, scrollHandler, false )-window.addEventListener( `Resize`, resizeHandler, false )-},_scrollPage : function() {var self = this-this.sections.forEach( function( el, i ) {if( inViewport( el, self.options.viewportFactor ) ) {classie.add( el, `Cbp-so-animate` )-}else {classie.add( el, `Cbp-so-init` )-classie.remove( el, "Cbp-so-animate ` )-}})-this.didScroll = false-}}window.cbpScroller = cbpScroller-} )( window )-