├── README.md ├── css ├── component.css └── demo.css ├── fonts └── bpicons │ ├── bpicons.eot │ ├── bpicons.svg │ ├── bpicons.ttf │ ├── bpicons.woff │ └── license.txt ├── images ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png └── 6.png ├── index.html └── js ├── cbpScroller.js ├── classie.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | On Scroll Effect Layout 3 | ========= 4 | An on scroll effect template that animates the sides of sections once they are in the viewport. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=15962) 7 | 8 | [demo](http://tympanus.net/Blueprints/OnScrollEffectLayout/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | .cbp-so-scroller { 2 | margin-top: 3em; 3 | overflow: hidden; 4 | } 5 | 6 | .cbp-so-section { 7 | margin-bottom: 15em; 8 | } 9 | 10 | /* Clear floats of children */ 11 | .cbp-so-section:before, 12 | .cbp-so-section:after { 13 | content: " "; 14 | display: table; 15 | } 16 | 17 | .cbp-so-section:after { 18 | clear: both; 19 | } 20 | 21 | /* Text styling */ 22 | .cbp-so-section h2 { 23 | font-size: 5em; 24 | font-weight: 300; 25 | line-height: 1; 26 | } 27 | 28 | .cbp-so-section p { 29 | font-size: 2em; 30 | font-weight: 300; 31 | } 32 | 33 | /* Sides */ 34 | .cbp-so-side { 35 | width: 50%; 36 | float: left; 37 | margin: 0; 38 | padding: 3em 4%; 39 | overflow: hidden; 40 | min-height: 12em; 41 | -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; 42 | -moz-transition: -moz-transform 0.5s, opacity 0.5s; 43 | transition: transform 0.5s, opacity 0.5s; 44 | } 45 | 46 | /* Clear floats of children */ 47 | .cbp-so-side:before, 48 | .cbp-so-side:after { 49 | content: " "; 50 | display: table; 51 | } 52 | 53 | .cbp-so-side:after { 54 | clear: both; 55 | } 56 | 57 | .cbp-so-side-right { 58 | text-align: left; 59 | } 60 | 61 | .cbp-so-side-left { 62 | text-align: right; 63 | } 64 | 65 | .cbp-so-side-right img { 66 | float: left; 67 | } 68 | 69 | .cbp-so-side-left img { 70 | float: right; 71 | } 72 | 73 | /* Initial state (hidden or anything else) */ 74 | .cbp-so-init .cbp-so-side { 75 | opacity: 0; 76 | } 77 | 78 | .cbp-so-init .cbp-so-side-left { 79 | -webkit-transform: translateX(-80px); 80 | -moz-transform: translateX(-80px); 81 | transform: translateX(-80px); 82 | } 83 | 84 | .cbp-so-init .cbp-so-side-right { 85 | -webkit-transform: translateX(80px); 86 | -moz-transform: translateX(80px); 87 | transform: translateX(80px); 88 | } 89 | 90 | /* Animated state */ 91 | /* add you final states (transition) or your effects (animations) for each side */ 92 | .cbp-so-section.cbp-so-animate .cbp-so-side-left, 93 | .cbp-so-section.cbp-so-animate .cbp-so-side-right { 94 | -webkit-transform: translateX(0px); 95 | -moz-transform: translateX(0px); 96 | transform: translateX(0px); 97 | opacity: 1; 98 | } 99 | 100 | /* For example, add a delay for the right side: 101 | .cbp-so-section.cbp-so-animate .cbp-so-side-right { 102 | -webkit-transition-delay: 0.2s; 103 | -moz-transition-delay: 0.2s; 104 | transition-delay: 0.2s; 105 | } 106 | */ 107 | 108 | /* Example media queries */ 109 | 110 | @media screen and (max-width: 73.5em) { 111 | .cbp-so-scroller { 112 | font-size: 65%; 113 | } 114 | 115 | .cbp-so-section h2 { 116 | margin: 0; 117 | } 118 | 119 | .cbp-so-side img { 120 | max-width: 120%; 121 | } 122 | } 123 | 124 | @media screen and (max-width: 41.125em) { 125 | .cbp-so-side { 126 | float: none; 127 | width: 100%; 128 | } 129 | 130 | .cbp-so-side img { 131 | max-width: 100%; 132 | } 133 | } 134 | 135 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | /* General Blueprint Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | @font-face { 4 | font-family: 'bpicons'; 5 | src:url('../fonts/bpicons/bpicons.eot'); 6 | src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/bpicons/bpicons.woff') format('woff'), 8 | url('../fonts/bpicons/bpicons.ttf') format('truetype'), 9 | url('../fonts/bpicons/bpicons.svg#bpicons') format('svg'); 10 | font-weight: normal; 11 | font-style: normal; 12 | } /* Made with http://icomoon.io/ */ 13 | 14 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 15 | body, html { font-size: 100%; padding: 0; margin: 0;} 16 | 17 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 18 | .clearfix:before, .clearfix:after { content: " "; display: table; } 19 | .clearfix:after { clear: both; } 20 | 21 | body { 22 | font-family: 'Lato', Calibri, Arial, sans-serif; 23 | color: #fff; 24 | background: #47a3da; 25 | } 26 | 27 | a { 28 | color: #f0f0f0; 29 | text-decoration: none; 30 | } 31 | 32 | a:hover { 33 | color: #000; 34 | } 35 | 36 | .container > header { 37 | width: 90%; 38 | max-width: 69em; 39 | margin: 0 auto; 40 | padding: 2.875em 1.875em 1.875em; 41 | } 42 | 43 | .container > header h1 { 44 | font-size: 2.125em; 45 | line-height: 1.3; 46 | margin: 0 0 0.6em 0; 47 | float: left; 48 | font-weight: 400; 49 | } 50 | 51 | .container > header > span { 52 | display: block; 53 | position: relative; 54 | z-index: 9999; 55 | font-weight: 700; 56 | text-transform: uppercase; 57 | letter-spacing: 0.5em; 58 | padding: 0 0 0.6em 0.1em; 59 | } 60 | 61 | .container > header > span span:after { 62 | width: 30px; 63 | height: 30px; 64 | left: -12px; 65 | font-size: 50%; 66 | top: -8px; 67 | font-size: 75%; 68 | position: relative; 69 | } 70 | 71 | .container > header > span span:hover:before { 72 | content: attr(data-content); 73 | text-transform: none; 74 | text-indent: 0; 75 | letter-spacing: 0; 76 | font-weight: 300; 77 | font-size: 110%; 78 | padding: 0.8em 1em; 79 | line-height: 1.2; 80 | text-align: left; 81 | left: auto; 82 | margin-left: 4px; 83 | position: absolute; 84 | color: #47a3da; 85 | background: #fff; 86 | } 87 | 88 | .container > header nav { 89 | float: right; 90 | text-align: center; 91 | } 92 | 93 | .container > header nav a { 94 | display: inline-block; 95 | position: relative; 96 | text-align: left; 97 | width: 2.5em; 98 | height: 2.5em; 99 | background: #47a3da; 100 | border-radius: 50%; 101 | margin: 0 0.1em; 102 | border: 4px solid #fff; 103 | } 104 | 105 | .container > header nav a > span { 106 | display: none; 107 | } 108 | 109 | .container > header nav a:hover:before { 110 | content: attr(data-info); 111 | color: #fff; 112 | position: absolute; 113 | width: 600%; 114 | top: 120%; 115 | text-align: right; 116 | right: 0; 117 | pointer-events: none; 118 | } 119 | 120 | .container > header nav a:hover { 121 | background: #fff; 122 | } 123 | 124 | .bp-icon:after { 125 | font-family: 'bpicons'; 126 | speak: none; 127 | font-style: normal; 128 | font-weight: normal; 129 | font-variant: normal; 130 | text-transform: none; 131 | text-align: center; 132 | color: #fff; 133 | -webkit-font-smoothing: antialiased; 134 | } 135 | 136 | .container > header nav .bp-icon:after { 137 | position: absolute; 138 | top: 0; 139 | left: 0; 140 | width: 100%; 141 | height: 100%; 142 | line-height: 2; 143 | text-indent: 0; 144 | } 145 | 146 | .container > header nav a:hover:after { 147 | color: #47a3da; 148 | } 149 | 150 | .bp-icon-next:after { 151 | content: "\e000"; 152 | } 153 | .bp-icon-drop:after { 154 | content: "\e001"; 155 | } 156 | .bp-icon-archive:after { 157 | content: "\e002"; 158 | } 159 | .bp-icon-about:after { 160 | content: "\e003"; 161 | } 162 | .bp-icon-prev:after { 163 | content: "\e004"; 164 | } 165 | 166 | @media screen and (max-width: 55em) { 167 | 168 | .container > header h1, 169 | .container > header nav { 170 | float: none; 171 | } 172 | 173 | .container > header > span, 174 | .container > header h1 { 175 | text-align: center; 176 | } 177 | 178 | .container > header nav { 179 | margin: 0 auto; 180 | } 181 | 182 | .container > header > span { 183 | text-indent: 30px; 184 | } 185 | } -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/fonts/bpicons/bpicons.eot -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/fonts/bpicons/bpicons.ttf -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/fonts/bpicons/bpicons.woff -------------------------------------------------------------------------------- /fonts/bpicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/images/1.png -------------------------------------------------------------------------------- /images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/images/2.png -------------------------------------------------------------------------------- /images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/images/3.png -------------------------------------------------------------------------------- /images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/images/4.png -------------------------------------------------------------------------------- /images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/images/5.png -------------------------------------------------------------------------------- /images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/OnScrollEffectLayout/ec21e83fe918e942a9ee298dcbd158eb0a973c06/images/6.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: On Scroll Effect Layout 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | Blueprint 20 |

On Scroll Effect Layout

21 | 27 |
28 |
29 |
30 |
31 |

Lemon drops

32 |

Fruitcake toffee jujubes. Topping biscuit sesame snaps jelly caramels jujubes tiramisu fruitcake. Marzipan tart lemon drops chocolate sesame snaps jelly beans.

33 |
34 |
35 | img01 36 |
37 |
38 |
39 |
40 | img01 41 |
42 |
43 |

Plum caramels

44 |

Lollipop powder danish sugar plum caramels liquorice sweet cookie. Gummi bears caramels gummi bears candy canes cheesecake sweet roll icing dragée. Gummies jelly-o tart. Cheesecake unerdwear.com candy canes apple pie halvah chocolate tiramisu.

45 |
46 |
47 |
48 |
49 |

Marzipan gingerbread

50 |

Soufflé bonbon jelly cotton candy liquorice dessert jelly bear claw candy canes. Pudding halvah bonbon marzipan powder. Marzipan gingerbread sweet jelly.

51 |
52 |
53 | img01 54 |
55 |
56 |
57 |
58 | img01 59 |
60 |
61 |

Carrot cake

62 |

Sesame snaps sweet wafer danish. Chupa chups carrot cake icing donut halvah bonbon. Chocolate cake candy marshmallow pudding dessert marzipan jujubes sugar plum.

63 |
64 |
65 |
66 |
67 |

Pudding lollipop

68 |

Chupa chups pudding lollipop gummi bears gummies cupcake pie. Cookie cotton candy caramels. Oat cake dessert applicake. Sweet roll tiramisu sweet roll sweet roll.

69 |
70 |
71 | img01 72 |
73 |
74 |
75 |
76 | img01 77 |
78 |
79 |

Soufflé bonbon

80 |

Cake cotton candy lollipop. Cake croissant cheesecake candy sugar plum icing apple pie wafer. Pie sugar plum tiramisu tiramisu pie fruitcake candy icing. Candy icing gummies gummies cheesecake brownie lemon drops chocolate gingerbread.

81 |
82 |
83 |
84 |
85 | 86 | 87 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /js/cbpScroller.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpScroller.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | var docElem = window.document.documentElement; 16 | 17 | function getViewportH() { 18 | var client = docElem['clientHeight'], 19 | inner = window['innerHeight']; 20 | 21 | if( client < inner ) 22 | return inner; 23 | else 24 | return client; 25 | } 26 | 27 | function scrollY() { 28 | return window.pageYOffset || docElem.scrollTop; 29 | } 30 | 31 | // http://stackoverflow.com/a/5598797/989439 32 | function getOffset( el ) { 33 | var offsetTop = 0, offsetLeft = 0; 34 | do { 35 | if ( !isNaN( el.offsetTop ) ) { 36 | offsetTop += el.offsetTop; 37 | } 38 | if ( !isNaN( el.offsetLeft ) ) { 39 | offsetLeft += el.offsetLeft; 40 | } 41 | } while( el = el.offsetParent ) 42 | 43 | return { 44 | top : offsetTop, 45 | left : offsetLeft 46 | } 47 | } 48 | 49 | function inViewport( el, h ) { 50 | var elH = el.offsetHeight, 51 | scrolled = scrollY(), 52 | viewed = scrolled + getViewportH(), 53 | elTop = getOffset(el).top, 54 | elBottom = elTop + elH, 55 | // if 0, the element is considered in the viewport as soon as it enters. 56 | // if 1, the element is considered in the viewport only when it's fully inside 57 | // value in percentage (1 >= h >= 0) 58 | h = h || 0; 59 | 60 | return (elTop + elH * h) <= viewed && (elBottom) >= scrolled; 61 | } 62 | 63 | function extend( a, b ) { 64 | for( var key in b ) { 65 | if( b.hasOwnProperty( key ) ) { 66 | a[key] = b[key]; 67 | } 68 | } 69 | return a; 70 | } 71 | 72 | function cbpScroller( el, options ) { 73 | this.el = el; 74 | this.options = extend( this.defaults, options ); 75 | this._init(); 76 | } 77 | 78 | cbpScroller.prototype = { 79 | defaults : { 80 | // The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation 81 | // if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. 82 | // If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it) 83 | viewportFactor : 0.2 84 | }, 85 | _init : function() { 86 | if( Modernizr.touch ) return; 87 | this.sections = Array.prototype.slice.call( this.el.querySelectorAll( '.cbp-so-section' ) ); 88 | this.didScroll = false; 89 | 90 | var self = this; 91 | // the sections already shown... 92 | this.sections.forEach( function( el, i ) { 93 | if( !inViewport( el ) ) { 94 | classie.add( el, 'cbp-so-init' ); 95 | } 96 | } ); 97 | 98 | var scrollHandler = function() { 99 | if( !self.didScroll ) { 100 | self.didScroll = true; 101 | setTimeout( function() { self._scrollPage(); }, 60 ); 102 | } 103 | }, 104 | resizeHandler = function() { 105 | function delayed() { 106 | self._scrollPage(); 107 | self.resizeTimeout = null; 108 | } 109 | if ( self.resizeTimeout ) { 110 | clearTimeout( self.resizeTimeout ); 111 | } 112 | self.resizeTimeout = setTimeout( delayed, 200 ); 113 | }; 114 | 115 | window.addEventListener( 'scroll', scrollHandler, false ); 116 | window.addEventListener( 'resize', resizeHandler, false ); 117 | }, 118 | _scrollPage : function() { 119 | var self = this; 120 | 121 | this.sections.forEach( function( el, i ) { 122 | if( inViewport( el, self.options.viewportFactor ) ) { 123 | classie.add( el, 'cbp-so-animate' ); 124 | } 125 | else { 126 | classie.add( el, 'cbp-so-init' ); 127 | classie.remove( el, 'cbp-so-animate' ); 128 | } 129 | }); 130 | this.didScroll = false; 131 | } 132 | } 133 | 134 | // add to global namespace 135 | window.cbpScroller = cbpScroller; 136 | 137 | } )( window ); -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f