├── README.md
├── css
├── component.css
└── default.css
├── fonts
└── codropsicons
│ ├── codropsicons.eot
│ ├── codropsicons.svg
│ ├── codropsicons.ttf
│ ├── codropsicons.woff
│ └── license.txt
├── images
├── 1.jpg
├── 10.png
├── 11.png
├── 12.png
├── 13.png
├── 14.png
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── 6.jpg
├── 7.jpg
├── 8.jpg
└── 9.jpg
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── index5.html
├── index6.html
├── index7.html
├── index8.html
└── js
├── AnimOnScroll.js
├── classie.js
├── imagesloaded.js
├── masonry.pkgd.min.js
└── modernizr.custom.js
/README.md:
--------------------------------------------------------------------------------
1 |
2 | Grid Loading Effects
3 | =========
4 | Some inspiration for loading effects of grid items using CSS animations.
5 |
6 | [article on Codrops](http://tympanus.net/codrops/?p=15677)
7 |
8 | [demo](http://tympanus.net/Development/GridLoadingEffects/)
9 |
10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/)
--------------------------------------------------------------------------------
/css/component.css:
--------------------------------------------------------------------------------
1 | .grid {
2 | max-width: 69em;
3 | list-style: none;
4 | margin: 30px auto;
5 | padding: 0;
6 | }
7 |
8 | .grid li {
9 | display: block;
10 | float: left;
11 | padding: 7px;
12 | width: 33%;
13 | opacity: 0;
14 | }
15 |
16 | .grid li.shown,
17 | .no-js .grid li,
18 | .no-cssanimations .grid li {
19 | opacity: 1;
20 | }
21 |
22 | .grid li a,
23 | .grid li img {
24 | outline: none;
25 | border: none;
26 | display: block;
27 | max-width: 100%;
28 | }
29 |
30 | /* Effect 1: opacity */
31 | .grid.effect-1 li.animate {
32 | -webkit-animation: fadeIn 0.65s ease forwards;
33 | animation: fadeIn 0.65s ease forwards;
34 | }
35 |
36 | @-webkit-keyframes fadeIn {
37 | 0% { }
38 | 100% { opacity: 1; }
39 | }
40 |
41 | @keyframes fadeIn {
42 | 0% { }
43 | 100% { opacity: 1; }
44 | }
45 |
46 | /* Effect 2: Move Up */
47 | .grid.effect-2 li.animate {
48 | -webkit-transform: translateY(200px);
49 | transform: translateY(200px);
50 | -webkit-animation: moveUp 0.65s ease forwards;
51 | animation: moveUp 0.65s ease forwards;
52 | }
53 |
54 | @-webkit-keyframes moveUp {
55 | 0% { }
56 | 100% { -webkit-transform: translateY(0); opacity: 1; }
57 | }
58 |
59 | @keyframes moveUp {
60 | 0% { }
61 | 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
62 | }
63 |
64 | /* Effect 3: Scale up */
65 | .grid.effect-3 li.animate {
66 | -webkit-transform: scale(0.6);
67 | transform: scale(0.6);
68 | -webkit-animation: scaleUp 0.65s ease-in-out forwards;
69 | animation: scaleUp 0.65s ease-in-out forwards;
70 | }
71 |
72 | @-webkit-keyframes scaleUp {
73 | 0% { }
74 | 100% { -webkit-transform: scale(1); opacity: 1; }
75 | }
76 |
77 | @keyframes scaleUp {
78 | 0% { }
79 | 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
80 | }
81 |
82 | /* Effect 4: fall perspective */
83 | .grid.effect-4 {
84 | -webkit-perspective: 1300px;
85 | perspective: 1300px;
86 | }
87 |
88 | .grid.effect-4 li.animate {
89 | -webkit-transform-style: preserve-3d;
90 | transform-style: preserve-3d;
91 | -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
92 | transform: translateZ(400px) translateY(300px) rotateX(-90deg);
93 | -webkit-animation: fallPerspective .8s ease-in-out forwards;
94 | animation: fallPerspective .8s ease-in-out forwards;
95 | }
96 |
97 | @-webkit-keyframes fallPerspective {
98 | 0% { }
99 | 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
100 | }
101 |
102 | @keyframes fallPerspective {
103 | 0% { }
104 | 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
105 | }
106 |
107 | /* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
108 | .grid.effect-5 {
109 | -webkit-perspective: 1300px;
110 | perspective: 1300px;
111 | }
112 |
113 | .grid.effect-5 li.animate {
114 | -webkit-transform-style: preserve-3d;
115 | transform-style: preserve-3d;
116 | -webkit-transform-origin: 50% 50% -300px;
117 | transform-origin: 50% 50% -300px;
118 | -webkit-transform: rotateX(-180deg);
119 | transform: rotateX(-180deg);
120 | -webkit-animation: fly .8s ease-in-out forwards;
121 | animation: fly .8s ease-in-out forwards;
122 | }
123 |
124 | @-webkit-keyframes fly {
125 | 0% { }
126 | 100% { -webkit-transform: rotateX(0deg); opacity: 1; }
127 | }
128 |
129 | @keyframes fly {
130 | 0% { }
131 | 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
132 | }
133 |
134 | /* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
135 | .grid.effect-6 {
136 | -webkit-perspective: 1300px;
137 | perspective: 1300px;
138 | }
139 |
140 | .grid.effect-6 li.animate {
141 | -webkit-transform-style: preserve-3d;
142 | transform-style: preserve-3d;
143 | -webkit-transform-origin: 0% 0%;
144 | transform-origin: 0% 0%;
145 | -webkit-transform: rotateX(-80deg);
146 | transform: rotateX(-80deg);
147 | -webkit-animation: flip .8s ease-in-out forwards;
148 | animation: flip .8s ease-in-out forwards;
149 | }
150 |
151 | @-webkit-keyframes flip {
152 | 0% { }
153 | 100% { -webkit-transform: rotateX(0deg); opacity: 1; }
154 | }
155 |
156 | @keyframes flip {
157 | 0% { }
158 | 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
159 | }
160 |
161 | /* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
162 | .grid.effect-7 {
163 | -webkit-perspective: 1300px;
164 | perspective: 1300px;
165 | }
166 |
167 | .grid.effect-7 li.animate {
168 | -webkit-transform-style: preserve-3d;
169 | transform-style: preserve-3d;
170 | -webkit-transform: rotateY(-180deg);
171 | transform: rotateY(-180deg);
172 | -webkit-animation: helix .8s ease-in-out forwards;
173 | animation: helix .8s ease-in-out forwards;
174 | }
175 |
176 | @-webkit-keyframes helix {
177 | 0% { }
178 | 100% { -webkit-transform: rotateY(0deg); opacity: 1; }
179 | }
180 |
181 | @keyframes helix {
182 | 0% { }
183 | 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
184 | }
185 |
186 | /* Effect 8: */
187 | .grid.effect-8 {
188 | -webkit-perspective: 1300px;
189 | perspective: 1300px;
190 | }
191 |
192 | .grid.effect-8 li.animate {
193 | -webkit-transform-style: preserve-3d;
194 | transform-style: preserve-3d;
195 | -webkit-transform: scale(0.4);
196 | transform: scale(0.4);
197 | -webkit-animation: popUp .8s ease-in forwards;
198 | animation: popUp .8s ease-in forwards;
199 | }
200 |
201 | @-webkit-keyframes popUp {
202 | 0% { }
203 | 70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
204 | 100% { -webkit-transform: scale(1); opacity: 1; }
205 | }
206 |
207 | @keyframes popUp {
208 | 0% { }
209 | 70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
210 | 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
211 | }
212 |
213 | @media screen and (max-width: 900px) {
214 | .grid li {
215 | width: 50%;
216 | }
217 | }
218 |
219 | @media screen and (max-width: 400px) {
220 | .grid li {
221 | width: 100%;
222 | }
223 | }
224 |
--------------------------------------------------------------------------------
/css/default.css:
--------------------------------------------------------------------------------
1 | /* General Demo Style */
2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
3 |
4 | @font-face {
5 | font-family: 'codropsicons';
6 | src:url('../fonts/codropsicons/codropsicons.eot');
7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'),
9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
11 | font-weight: normal;
12 | font-style: normal;
13 | }
14 |
15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
16 | body, html { font-size: 100%; padding: 0; margin: 0;}
17 |
18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
19 | .clearfix:before, .clearfix:after { content: " "; display: table; }
20 | .clearfix:after { clear: both; }
21 |
22 | body {
23 | font-family: 'Lato', Calibri, Arial, sans-serif;
24 | color: #6b7381;
25 | background: #f2f2f2;
26 | }
27 |
28 | a {
29 | color: #aaa;
30 | text-decoration: none;
31 | }
32 |
33 | a:hover,
34 | a:active {
35 | color: #333;
36 | }
37 |
38 | /* Header Style */
39 | .container > header {
40 | margin: 0 auto;
41 | padding: 2em;
42 | }
43 |
44 | .container > header {
45 | text-align: center;
46 | background: rgba(0,0,0,0.01);
47 | }
48 |
49 | .container > header h1 {
50 | font-size: 2.625em;
51 | line-height: 1.3;
52 | margin: 0;
53 | font-weight: 300;
54 | }
55 |
56 | .container > header span {
57 | display: block;
58 | font-size: 60%;
59 | opacity: 0.8;
60 | padding: 0 0 0.6em 0.1em;
61 | }
62 |
63 | /* To Navigation Style */
64 | .codrops-top {
65 | background: #fff;
66 | background: rgba(255, 255, 255, 0.8);
67 | text-transform: uppercase;
68 | width: 100%;
69 | font-size: 0.69em;
70 | line-height: 2.2;
71 | }
72 |
73 | .codrops-top a {
74 | padding: 0 1em;
75 | letter-spacing: 0.1em;
76 | color: #6b7381;
77 | display: inline-block;
78 | }
79 |
80 | .codrops-top a:hover {
81 | color: #424b5a;
82 | background: rgba(255,255,255,1);
83 | }
84 |
85 | .codrops-top span.right {
86 | float: right;
87 | }
88 |
89 | .codrops-top span.right a {
90 | float: left;
91 | display: block;
92 | }
93 |
94 | .codrops-icon:before {
95 | font-family: 'codropsicons';
96 | margin: 0 4px;
97 | speak: none;
98 | font-style: normal;
99 | font-weight: normal;
100 | font-variant: normal;
101 | text-transform: none;
102 | line-height: 1;
103 | -webkit-font-smoothing: antialiased;
104 | }
105 |
106 | .codrops-icon-drop:before {
107 | content: "\e001";
108 | }
109 |
110 | .codrops-icon-prev:before {
111 | content: "\e004";
112 | }
113 |
114 | /* Demo Buttons Style */
115 | .codrops-demos {
116 | padding-top: 1em;
117 | font-size: 0.9em;
118 | }
119 |
120 | .codrops-demos a {
121 | display: inline-block;
122 | margin: 0.5em;
123 | padding: 0.7em 1.1em;
124 | border: 3px solid #6b7381;
125 | color: #6b7381;
126 | font-weight: 700;
127 | }
128 |
129 | .codrops-demos a:hover,
130 | .codrops-demos a.current-demo,
131 | .codrops-demos a.current-demo:hover {
132 | opacity: 0.6;
133 | }
134 |
135 | @media screen and (max-width: 25em) {
136 |
137 | .codrops-icon span {
138 | display: none;
139 | }
140 |
141 | }
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/fonts/codropsicons/codropsicons.eot
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/fonts/codropsicons/codropsicons.ttf
--------------------------------------------------------------------------------
/fonts/codropsicons/codropsicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/fonts/codropsicons/codropsicons.woff
--------------------------------------------------------------------------------
/fonts/codropsicons/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.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/1.jpg
--------------------------------------------------------------------------------
/images/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/10.png
--------------------------------------------------------------------------------
/images/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/11.png
--------------------------------------------------------------------------------
/images/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/12.png
--------------------------------------------------------------------------------
/images/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/13.png
--------------------------------------------------------------------------------
/images/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/14.png
--------------------------------------------------------------------------------
/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/2.jpg
--------------------------------------------------------------------------------
/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/3.jpg
--------------------------------------------------------------------------------
/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/4.jpg
--------------------------------------------------------------------------------
/images/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/5.jpg
--------------------------------------------------------------------------------
/images/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/6.jpg
--------------------------------------------------------------------------------
/images/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/7.jpg
--------------------------------------------------------------------------------
/images/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/8.jpg
--------------------------------------------------------------------------------
/images/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/GridLoadingEffects/6f50926ddebedabd04d9fc71264237550085e59b/images/9.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 1
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 2
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 2
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/index4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 2
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/index5.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 2
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/index6.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 2
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/index7.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 2
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/index8.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Loading Effects for Grid Items | Demo 2
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
126 |
127 |
128 |
129 |
130 |
137 |
138 |
--------------------------------------------------------------------------------
/js/AnimOnScroll.js:
--------------------------------------------------------------------------------
1 | /**
2 | * animOnScroll.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 |
12 | ;( function( window ) {
13 |
14 | 'use strict';
15 |
16 | var docElem = window.document.documentElement;
17 |
18 | function getViewportH() {
19 | var client = docElem['clientHeight'],
20 | inner = window['innerHeight'];
21 |
22 | if( client < inner )
23 | return inner;
24 | else
25 | return client;
26 | }
27 |
28 | function scrollY() {
29 | return window.pageYOffset || docElem.scrollTop;
30 | }
31 |
32 | // http://stackoverflow.com/a/5598797/989439
33 | function getOffset( el ) {
34 | var offsetTop = 0, offsetLeft = 0;
35 | do {
36 | if ( !isNaN( el.offsetTop ) ) {
37 | offsetTop += el.offsetTop;
38 | }
39 | if ( !isNaN( el.offsetLeft ) ) {
40 | offsetLeft += el.offsetLeft;
41 | }
42 | } while( el = el.offsetParent )
43 |
44 | return {
45 | top : offsetTop,
46 | left : offsetLeft
47 | }
48 | }
49 |
50 | function inViewport( el, h ) {
51 | var elH = el.offsetHeight,
52 | scrolled = scrollY(),
53 | viewed = scrolled + getViewportH(),
54 | elTop = getOffset(el).top,
55 | elBottom = elTop + elH,
56 | // if 0, the element is considered in the viewport as soon as it enters.
57 | // if 1, the element is considered in the viewport only when it's fully inside
58 | // value in percentage (1 >= h >= 0)
59 | h = h || 0;
60 |
61 | return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
62 | }
63 |
64 | function extend( a, b ) {
65 | for( var key in b ) {
66 | if( b.hasOwnProperty( key ) ) {
67 | a[key] = b[key];
68 | }
69 | }
70 | return a;
71 | }
72 |
73 | function onScrollHandler() {
74 | var self = this;
75 | if( !this.didScroll ) {
76 | this.didScroll = true;
77 | setTimeout( function() { self._scrollPage(); }, 60 );
78 | }
79 | };
80 |
81 | function AnimOnScroll( el, options ) {
82 | this.el = el;
83 | this.options = extend( this.defaults, options );
84 |
85 | this._onScrollFn = onScrollHandler.bind( this );
86 |
87 | this._init();
88 | }
89 |
90 | // IE Fallback for array prototype slice
91 | if(navigator.appVersion.indexOf('MSIE 8') > 0) {
92 | var _slice = Array.prototype.slice;
93 | Array.prototype.slice = function() {
94 | if(this instanceof Array) {
95 | return _slice.apply(this, arguments);
96 | } else {
97 | var result = [];
98 | var start = (arguments.length >= 1) ? arguments[0] : 0;
99 | var end = (arguments.length >= 2) ? arguments[1] : this.length;
100 | for(var i=start; i li' ) );
146 | this.itemsCount = this.items.length;
147 | this.itemsRenderedCount = 0;
148 | this.didScroll = false;
149 |
150 | var self = this;
151 |
152 | imagesLoaded( this.el, function() {
153 |
154 | // initialize masonry
155 | new Masonry( self.el, {
156 | itemSelector: 'li',
157 | transitionDuration : 0
158 | } );
159 |
160 | if( Modernizr.cssanimations ) {
161 | // the items already shown...
162 | self.items.forEach( function( el, i ) {
163 | if( inViewport( el ) ) {
164 | self._checkTotalRendered();
165 | classie.add( el, 'shown' );
166 | }
167 | } );
168 |
169 | // animate on scroll the items inside the viewport
170 | window.addEventListener( 'scroll', self._onScrollFn, false );
171 | window.addEventListener( 'resize', function() {
172 | self._resizeHandler();
173 | }, false );
174 | }
175 |
176 | });
177 | },
178 | _scrollPage : function() {
179 | var self = this;
180 | this.items.forEach( function( el, i ) {
181 | if( !classie.has( el, 'shown' ) && !classie.has( el, 'animate' ) && inViewport( el, self.options.viewportFactor ) ) {
182 | setTimeout( function() {
183 | var perspY = scrollY() + getViewportH() / 2;
184 | self.el.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px';
185 | self.el.style.MozPerspectiveOrigin = '50% ' + perspY + 'px';
186 | self.el.style.perspectiveOrigin = '50% ' + perspY + 'px';
187 |
188 | self._checkTotalRendered();
189 |
190 | if( self.options.minDuration && self.options.maxDuration ) {
191 | var randDuration = ( Math.random() * ( self.options.maxDuration - self.options.minDuration ) + self.options.minDuration ) + 's';
192 | el.style.WebkitAnimationDuration = randDuration;
193 | el.style.MozAnimationDuration = randDuration;
194 | el.style.animationDuration = randDuration;
195 | }
196 |
197 | classie.add( el, 'animate' );
198 | }, 25 );
199 | }
200 | });
201 | this.didScroll = false;
202 | },
203 | _resizeHandler : function() {
204 | var self = this;
205 | function delayed() {
206 | self._scrollPage();
207 | self.resizeTimeout = null;
208 | }
209 | if ( this.resizeTimeout ) {
210 | clearTimeout( this.resizeTimeout );
211 | }
212 | this.resizeTimeout = setTimeout( delayed, 1000 );
213 | },
214 | _checkTotalRendered : function() {
215 | ++this.itemsRenderedCount;
216 | if( this.itemsRenderedCount === this.itemsCount ) {
217 | window.removeEventListener( 'scroll', this._onScrollFn );
218 | }
219 | }
220 | }
221 |
222 | // add to global namespace
223 | window.AnimOnScroll = AnimOnScroll;
224 |
225 | } )( 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/imagesloaded.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * imagesLoaded v3.0.2
3 | * JavaScript is all like "You images are done yet or what?"
4 | */
5 |
6 | ( function( window ) {
7 |
8 | 'use strict';
9 |
10 | var $ = window.jQuery;
11 | var console = window.console;
12 | var hasConsole = typeof console !== 'undefined';
13 |
14 | // -------------------------- helpers -------------------------- //
15 |
16 | // extend objects
17 | function extend( a, b ) {
18 | for ( var prop in b ) {
19 | a[ prop ] = b[ prop ];
20 | }
21 | return a;
22 | }
23 |
24 | var objToString = Object.prototype.toString;
25 | function isArray( obj ) {
26 | return objToString.call( obj ) === '[object Array]';
27 | }
28 |
29 | // turn element or nodeList into an array
30 | function makeArray( obj ) {
31 | var ary = [];
32 | if ( isArray( obj ) ) {
33 | // use object if already an array
34 | ary = obj;
35 | } else if ( typeof obj.length === 'number' ) {
36 | // convert nodeList to array
37 | for ( var i=0, len = obj.length; i < len; i++ ) {
38 | ary.push( obj[i] );
39 | }
40 | } else {
41 | // array of single index
42 | ary.push( obj );
43 | }
44 | return ary;
45 | }
46 |
47 | // -------------------------- -------------------------- //
48 |
49 | function defineImagesLoaded( EventEmitter, eventie ) {
50 |
51 | /**
52 | * @param {Array, Element, NodeList, String} elem
53 | * @param {Object or Function} options - if function, use as callback
54 | * @param {Function} onAlways - callback function
55 | */
56 | function ImagesLoaded( elem, options, onAlways ) {
57 | // coerce ImagesLoaded() without new, to be new ImagesLoaded()
58 | if ( !( this instanceof ImagesLoaded ) ) {
59 | return new ImagesLoaded( elem, options );
60 | }
61 | // use elem as selector string
62 | if ( typeof elem === 'string' ) {
63 | elem = document.querySelectorAll( elem );
64 | }
65 |
66 | this.elements = makeArray( elem );
67 | this.options = extend( {}, this.options );
68 |
69 | if ( typeof options === 'function' ) {
70 | onAlways = options;
71 | } else {
72 | extend( this.options, options );
73 | }
74 |
75 | if ( onAlways ) {
76 | this.on( 'always', onAlways );
77 | }
78 |
79 | this.getImages();
80 |
81 | if ( $ ) {
82 | // add jQuery Deferred object
83 | this.jqDeferred = new $.Deferred();
84 | }
85 |
86 | // HACK check async to allow time to bind listeners
87 | var _this = this;
88 | setTimeout( function() {
89 | _this.check();
90 | });
91 | }
92 |
93 | ImagesLoaded.prototype = new EventEmitter();
94 |
95 | ImagesLoaded.prototype.options = {};
96 |
97 | ImagesLoaded.prototype.getImages = function() {
98 | this.images = [];
99 |
100 | // filter & find items if we have an item selector
101 | for ( var i=0, len = this.elements.length; i < len; i++ ) {
102 | var elem = this.elements[i];
103 | // filter siblings
104 | if ( elem.nodeName === 'IMG' ) {
105 | this.addImage( elem );
106 | }
107 | // find children
108 | var childElems = elem.querySelectorAll('img');
109 | // concat childElems to filterFound array
110 | for ( var j=0, jLen = childElems.length; j < jLen; j++ ) {
111 | var img = childElems[j];
112 | this.addImage( img );
113 | }
114 | }
115 | };
116 |
117 | /**
118 | * @param {Image} img
119 | */
120 | ImagesLoaded.prototype.addImage = function( img ) {
121 | var loadingImage = new LoadingImage( img );
122 | this.images.push( loadingImage );
123 | };
124 |
125 | ImagesLoaded.prototype.check = function() {
126 | var _this = this;
127 | var checkedCount = 0;
128 | var length = this.images.length;
129 | this.hasAnyBroken = false;
130 | // complete if no images
131 | if ( !length ) {
132 | this.complete();
133 | return;
134 | }
135 |
136 | function onConfirm( image, message ) {
137 | if ( _this.options.debug && hasConsole ) {
138 | console.log( 'confirm', image, message );
139 | }
140 |
141 | _this.progress( image );
142 | checkedCount++;
143 | if ( checkedCount === length ) {
144 | _this.complete();
145 | }
146 | return true; // bind once
147 | }
148 |
149 | for ( var i=0; i < length; i++ ) {
150 | var loadingImage = this.images[i];
151 | loadingImage.on( 'confirm', onConfirm );
152 | loadingImage.check();
153 | }
154 | };
155 |
156 | ImagesLoaded.prototype.progress = function( image ) {
157 | this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
158 | this.emit( 'progress', this, image );
159 | if ( this.jqDeferred ) {
160 | this.jqDeferred.notify( this, image );
161 | }
162 | };
163 |
164 | ImagesLoaded.prototype.complete = function() {
165 | var eventName = this.hasAnyBroken ? 'fail' : 'done';
166 | this.isComplete = true;
167 | this.emit( eventName, this );
168 | this.emit( 'always', this );
169 | if ( this.jqDeferred ) {
170 | var jqMethod = this.hasAnyBroken ? 'reject' : 'resolve';
171 | this.jqDeferred[ jqMethod ]( this );
172 | }
173 | };
174 |
175 | // -------------------------- jquery -------------------------- //
176 |
177 | if ( $ ) {
178 | $.fn.imagesLoaded = function( options, callback ) {
179 | var instance = new ImagesLoaded( this, options, callback );
180 | return instance.jqDeferred.promise( $(this) );
181 | };
182 | }
183 |
184 |
185 | // -------------------------- -------------------------- //
186 |
187 | var cache = {};
188 |
189 | function LoadingImage( img ) {
190 | this.img = img;
191 | }
192 |
193 | LoadingImage.prototype = new EventEmitter();
194 |
195 | LoadingImage.prototype.check = function() {
196 | // first check cached any previous images that have same src
197 | var cached = cache[ this.img.src ];
198 | if ( cached ) {
199 | this.useCached( cached );
200 | return;
201 | }
202 | // add this to cache
203 | cache[ this.img.src ] = this;
204 |
205 | // If complete is true and browser supports natural sizes,
206 | // try to check for image status manually.
207 | if ( this.img.complete && this.img.naturalWidth !== undefined ) {
208 | // report based on naturalWidth
209 | this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
210 | return;
211 | }
212 |
213 | // If none of the checks above matched, simulate loading on detached element.
214 | var proxyImage = this.proxyImage = new Image();
215 | eventie.bind( proxyImage, 'load', this );
216 | eventie.bind( proxyImage, 'error', this );
217 | proxyImage.src = this.img.src;
218 | };
219 |
220 | LoadingImage.prototype.useCached = function( cached ) {
221 | if ( cached.isConfirmed ) {
222 | this.confirm( cached.isLoaded, 'cached was confirmed' );
223 | } else {
224 | var _this = this;
225 | cached.on( 'confirm', function( image ) {
226 | _this.confirm( image.isLoaded, 'cache emitted confirmed' );
227 | return true; // bind once
228 | });
229 | }
230 | };
231 |
232 | LoadingImage.prototype.confirm = function( isLoaded, message ) {
233 | this.isConfirmed = true;
234 | this.isLoaded = isLoaded;
235 | this.emit( 'confirm', this, message );
236 | };
237 |
238 | // trigger specified handler for event type
239 | LoadingImage.prototype.handleEvent = function( event ) {
240 | var method = 'on' + event.type;
241 | if ( this[ method ] ) {
242 | this[ method ]( event );
243 | }
244 | };
245 |
246 | LoadingImage.prototype.onload = function() {
247 | this.confirm( true, 'onload' );
248 | this.unbindProxyEvents();
249 | };
250 |
251 | LoadingImage.prototype.onerror = function() {
252 | this.confirm( false, 'onerror' );
253 | this.unbindProxyEvents();
254 | };
255 |
256 | LoadingImage.prototype.unbindProxyEvents = function() {
257 | eventie.unbind( this.proxyImage, 'load', this );
258 | eventie.unbind( this.proxyImage, 'error', this );
259 | };
260 |
261 | // ----- ----- //
262 |
263 | return ImagesLoaded;
264 | }
265 |
266 | // -------------------------- transport -------------------------- //
267 |
268 | if ( typeof define === 'function' && define.amd ) {
269 | // AMD
270 | define( [
271 | 'eventEmitter',
272 | 'eventie'
273 | ],
274 | defineImagesLoaded );
275 | } else {
276 | // browser global
277 | window.imagesLoaded = defineImagesLoaded(
278 | window.EventEmitter,
279 | window.eventie
280 | );
281 | }
282 |
283 | })( window );
--------------------------------------------------------------------------------
/js/masonry.pkgd.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * Masonry PACKAGED v3.0.0
3 | * Cascading grid layout library
4 | * http://masonry.desandro.com
5 | * MIT License
6 | * by David DeSandro
7 | */
8 |
9 | (function(t){"use strict";function e(t){if(t){if("string"==typeof n[t])return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(var e,o=0,r=i.length;r>o;o++)if(e=i[o]+t,"string"==typeof n[e])return e}}var i="Webkit Moz ms Ms O".split(" "),n=document.documentElement.style;"function"==typeof define&&define.amd?define(function(){return e}):t.getStyleProperty=e})(window),function(t){"use strict";function e(t){var e=parseFloat(t),i=-1===t.indexOf("%")&&!isNaN(e);return i&&e}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0,i=s.length;i>e;e++){var n=s[e];t[n]=0}return t}function n(t){function n(t){if("string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var n=r(t);if("none"===n.display)return i();var h={};h.width=t.offsetWidth,h.height=t.offsetHeight;for(var p=h.isBorderBox=!(!a||!n[a]||"border-box"!==n[a]),u=0,f=s.length;f>u;u++){var d=s[u],c=n[d],l=parseFloat(c);h[d]=isNaN(l)?0:l}var m=h.paddingLeft+h.paddingRight,y=h.paddingTop+h.paddingBottom,g=h.marginLeft+h.marginRight,v=h.marginTop+h.marginBottom,_=h.borderLeftWidth+h.borderRightWidth,b=h.borderTopWidth+h.borderBottomWidth,L=p&&o,E=e(n.width);E!==!1&&(h.width=E+(L?0:m+_));var I=e(n.height);return I!==!1&&(h.height=I+(L?0:y+b)),h.innerWidth=h.width-(m+_),h.innerHeight=h.height-(y+b),h.outerWidth=h.width+g,h.outerHeight=h.height+v,h}}var o,a=t("boxSizing");return function(){if(a){var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style[a]="border-box";var i=document.body||document.documentElement;i.appendChild(t);var n=r(t);o=200===e(n.width),i.removeChild(t)}}(),n}var o=document.defaultView,r=o&&o.getComputedStyle?function(t){return o.getComputedStyle(t,null)}:function(t){return t.currentStyle},s=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];"function"==typeof define&&define.amd?define(["get-style-property"],n):t.getSize=n(t.getStyleProperty)}(window),function(t){"use strict";var e=document.documentElement,i=function(){};e.addEventListener?i=function(t,e,i){t.addEventListener(e,i,!1)}:e.attachEvent&&(i=function(e,i,n){e[i+n]=n.handleEvent?function(){var e=t.event;e.target=e.target||e.srcElement,n.handleEvent.call(n,e)}:function(){var i=t.event;i.target=i.target||i.srcElement,n.call(e,i)},e.attachEvent("on"+i,e[i+n])});var n=function(){};e.removeEventListener?n=function(t,e,i){t.removeEventListener(e,i,!1)}:e.detachEvent&&(n=function(t,e,i){t.detachEvent("on"+e,t[e+i]);try{delete t[e+i]}catch(n){t[e+i]=void 0}});var o={bind:i,unbind:n};"function"==typeof define&&define.amd?define(o):t.eventie=o}(this),function(t){"use strict";function e(t){"function"==typeof t&&(e.isReady?t():r.push(t))}function i(t){var i="readystatechange"===t.type&&"complete"!==o.readyState;if(!e.isReady&&!i){e.isReady=!0;for(var n=0,s=r.length;s>n;n++){var a=r[n];a()}}}function n(n){return n.bind(o,"DOMContentLoaded",i),n.bind(o,"readystatechange",i),n.bind(t,"load",i),e}var o=t.document,r=[];e.isReady=!1,"function"==typeof define&&define.amd?define(["eventie"],n):t.docReady=n(t.eventie)}(this),function(t){"use strict";function e(){}function i(t,e){if(o)return e.indexOf(t);for(var i=e.length;i--;)if(e[i]===t)return i;return-1}var n=e.prototype,o=Array.prototype.indexOf?!0:!1;n._getEvents=function(){return this._events||(this._events={})},n.getListeners=function(t){var e,i,n=this._getEvents();if("object"==typeof t){e={};for(i in n)n.hasOwnProperty(i)&&t.test(i)&&(e[i]=n[i])}else e=n[t]||(n[t]=[]);return e},n.getListenersAsObject=function(t){var e,i=this.getListeners(t);return i instanceof Array&&(e={},e[t]=i),e||i},n.addListener=function(t,e){var n,o=this.getListenersAsObject(t);for(n in o)o.hasOwnProperty(n)&&-1===i(e,o[n])&&o[n].push(e);return this},n.on=n.addListener,n.defineEvent=function(t){return this.getListeners(t),this},n.defineEvents=function(t){for(var e=0;t.length>e;e+=1)this.defineEvent(t[e]);return this},n.removeListener=function(t,e){var n,o,r=this.getListenersAsObject(t);for(o in r)r.hasOwnProperty(o)&&(n=i(e,r[o]),-1!==n&&r[o].splice(n,1));return this},n.off=n.removeListener,n.addListeners=function(t,e){return this.manipulateListeners(!1,t,e)},n.removeListeners=function(t,e){return this.manipulateListeners(!0,t,e)},n.manipulateListeners=function(t,e,i){var n,o,r=t?this.removeListener:this.addListener,s=t?this.removeListeners:this.addListeners;if("object"!=typeof e||e instanceof RegExp)for(n=i.length;n--;)r.call(this,e,i[n]);else for(n in e)e.hasOwnProperty(n)&&(o=e[n])&&("function"==typeof o?r.call(this,n,o):s.call(this,n,o));return this},n.removeEvent=function(t){var e,i=typeof t,n=this._getEvents();if("string"===i)delete n[t];else if("object"===i)for(e in n)n.hasOwnProperty(e)&&t.test(e)&&delete n[e];else delete this._events;return this},n.emitEvent=function(t,e){var i,n,o,r=this.getListenersAsObject(t);for(n in r)if(r.hasOwnProperty(n))for(i=r[n].length;i--;)o=e?r[n][i].apply(null,e):r[n][i](),o===!0&&this.removeListener(t,r[n][i]);return this},n.trigger=n.emitEvent,n.emit=function(t){var e=Array.prototype.slice.call(arguments,1);return this.emitEvent(t,e)},"function"==typeof define&&define.amd?define(function(){return e}):t.EventEmitter=e}(this),function(t){"use strict";function e(){}function i(t){function i(e){e.prototype.option||(e.prototype.option=function(e){t.isPlainObject(e)&&(this.options=t.extend(!0,this.options,e))})}function o(e,i){t.fn[e]=function(o){if("string"==typeof o){for(var s=n.call(arguments,1),a=0,h=this.length;h>a;a++){var p=this[a],u=t.data(p,e);if(u)if(t.isFunction(u[o])&&"_"!==o.charAt(0)){var f=u[o].apply(u,s);if(void 0!==f)return f}else r("no such method '"+o+"' for "+e+" instance");else r("cannot call methods on "+e+" prior to initialization; "+"attempted to call '"+o+"'")}return this}return this.each(function(){var n=t.data(this,e);n?(n.option(o),n._init()):(n=new i(this,o),t.data(this,e,n))})}}if(t){var r="undefined"==typeof console?e:function(t){console.error(t)};t.bridget=function(t,e){i(e),o(t,e)}}}var n=Array.prototype.slice;"function"==typeof define&&define.amd?define(["jquery"],i):i(t.jQuery)}(window),function(t,e){"use strict";function i(t,e){return t[a](e)}function n(t){if(!t.parentNode){var e=document.createDocumentFragment();e.appendChild(t)}}function o(t,e){n(t);for(var i=t.parentNode.querySelectorAll(e),o=0,r=i.length;r>o;o++)if(i[o]===t)return!0;return!1}function r(t,e){return n(t),i(t,e)}var s,a=function(){if(e.matchesSelector)return"matchesSelector";for(var t=["webkit","moz","ms","o"],i=0,n=t.length;n>i;i++){var o=t[i],r=o+"MatchesSelector";if(e[r])return r}}();if(a){var h=document.createElement("div"),p=i(h,"div");s=p?i:r}else s=o;"function"==typeof define&&define.amd?define(function(){return s}):window.matchesSelector=s}(this,Element.prototype),function(t){"use strict";function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t,e){t&&(this.element=t,this.layout=e,this.position={x:0,y:0},this._create())}var n=t.getSize,o=t.getStyleProperty,r=t.EventEmitter,s=document.defaultView,a=s&&s.getComputedStyle?function(t){return s.getComputedStyle(t,null)}:function(t){return t.currentStyle},h=o("transition"),p=o("transform"),u=h&&p,f=!!o("perspective"),d={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"otransitionend",transition:"transitionend"}[h],c=["transform","transition","transitionDuration","transitionProperty"],l=function(){for(var t={},e=0,i=c.length;i>e;e++){var n=c[e],r=o(n);r&&r!==n&&(t[n]=r)}return t}();e(i.prototype,r.prototype),i.prototype._create=function(){this.css({position:"absolute"})},i.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},i.prototype.getSize=function(){this.size=n(this.element)},i.prototype.css=function(t){var e=this.element.style;for(var i in t){var n=l[i]||i;e[n]=t[i]}},i.prototype.getPosition=function(){var t=a(this.element),e=this.layout.options,i=e.isOriginLeft,n=e.isOriginTop,o=parseInt(t[i?"left":"right"],10),r=parseInt(t[n?"top":"bottom"],10);o=isNaN(o)?0:o,r=isNaN(r)?0:r;var s=this.layout.size;o-=i?s.paddingLeft:s.paddingRight,r-=n?s.paddingTop:s.paddingBottom,this.position.x=o,this.position.y=r},i.prototype.layoutPosition=function(){var t=this.layout.size,e=this.layout.options,i={};e.isOriginLeft?(i.left=this.position.x+t.paddingLeft+"px",i.right=""):(i.right=this.position.x+t.paddingRight+"px",i.left=""),e.isOriginTop?(i.top=this.position.y+t.paddingTop+"px",i.bottom=""):(i.bottom=this.position.y+t.paddingBottom+"px",i.top=""),this.css(i),this.emitEvent("layout",[this])};var m=f?function(t,e){return"translate3d("+t+"px, "+e+"px, 0)"}:function(t,e){return"translate("+t+"px, "+e+"px)"};i.prototype._transitionTo=function(t,e){this.getPosition();var i=this.position.x,n=this.position.y,o=parseInt(t,10),r=parseInt(e,10),s=o===this.position.x&&r===this.position.y;if(this.setPosition(t,e),s&&!this.isTransitioning)return this.layoutPosition(),void 0;var a=t-i,h=e-n,p={},u=this.layout.options;a=u.isOriginLeft?a:-a,h=u.isOriginTop?h:-h,p.transform=m(a,h),this.transition({to:p,onTransitionEnd:this.layoutPosition,isCleaning:!0})},i.prototype.goTo=function(t,e){this.setPosition(t,e),this.layoutPosition()},i.prototype.moveTo=u?i.prototype._transitionTo:i.prototype.goTo,i.prototype.setPosition=function(t,e){this.position.x=parseInt(t,10),this.position.y=parseInt(e,10)},i.prototype._nonTransition=function(t){this.css(t.to),t.isCleaning&&this._removeStyles(t.to),t.onTransitionEnd&&t.onTransitionEnd.call(this)},i.prototype._transition=function(t){var e=this.layout.options.transitionDuration;if(!parseFloat(e))return this._nonTransition(t),void 0;var i=t.to,n=[];for(var o in i)n.push(o);var r={};if(r.transitionProperty=n.join(","),r.transitionDuration=e,this.element.addEventListener(d,this,!1),(t.isCleaning||t.onTransitionEnd)&&this.on("transitionEnd",function(e){return t.isCleaning&&e._removeStyles(i),t.onTransitionEnd&&t.onTransitionEnd.call(e),!0}),t.from){this.css(t.from);var s=this.element.offsetHeight;s=null}this.css(r),this.css(i),this.isTransitioning=!0},i.prototype.transition=i.prototype[h?"_transition":"_nonTransition"],i.prototype.onwebkitTransitionEnd=function(t){this.ontransitionend(t)},i.prototype.onotransitionend=function(t){this.ontransitionend(t)},i.prototype.ontransitionend=function(t){t.target===this.element&&(this.removeTransitionStyles(),this.element.removeEventListener(d,this,!1),this.isTransitioning=!1,this.emitEvent("transitionEnd",[this]))},i.prototype._removeStyles=function(t){var e={};for(var i in t)e[i]="";this.css(e)};var y={transitionProperty:"",transitionDuration:""};i.prototype.removeTransitionStyles=function(){this.css(y)},i.prototype.removeElem=function(){this.element.parentNode.removeChild(this.element),this.emitEvent("remove",[this])},i.prototype.remove=h?function(){var t=this;this.on("transitionEnd",function(){return t.removeElem(),!0}),this.hide()}:i.prototype.removeElem,i.prototype.reveal=function(){this.css({display:""});var t=this.layout.options;this.transition({from:t.hiddenStyle,to:t.visibleStyle,isCleaning:!0})},i.prototype.hide=function(){this.css({display:""});var t=this.layout.options;this.transition({from:t.visibleStyle,to:t.hiddenStyle,isCleaning:!0,onTransitionEnd:function(){this.css({display:"none"})}})},i.prototype.destroy=function(){this.css({position:"",left:"",right:"",top:"",bottom:"",transition:"",transform:""})},t.Outlayer={Item:i}}(window),function(t){"use strict";function e(t,e){for(var i in e)t[i]=e[i];return t}function i(t){return"[object Array]"===v.call(t)}function n(t){var e=[];if(i(t))e=t;else if("number"==typeof t.length)for(var n=0,o=t.length;o>n;n++)e.push(t[n]);else e.push(t);return e}function o(t){return t.replace(/(.)([A-Z])/g,function(t,e,i){return e+"-"+i}).toLowerCase()}function r(t,i){if("string"==typeof t&&(t=l.querySelector(t)),!t||!_(t))return m&&m.error("Bad "+this.settings.namespace+" element: "+t),void 0;this.element=t,this.options=e({},this.options),e(this.options,i);var n=++L;this.element.outlayerGUID=n,E[n]=this,this._create(),this.options.isInitLayout&&this.layout()}function s(t,i){t.prototype[i]=e({},r.prototype[i])}var a=t.Outlayer,h=a.Item,p=t.docReady,u=t.EventEmitter,f=t.eventie,d=t.getSize,c=t.matchesSelector,l=t.document,m=t.console,y=t.jQuery,g=function(){},v=Object.prototype.toString,_="object"==typeof HTMLElement?function(t){return t instanceof HTMLElement}:function(t){return t&&"object"==typeof t&&1===t.nodeType&&"string"==typeof t.nodeName},b=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,n=t.length;n>i;i++)if(t[i]===e)return i;return-1},L=0,E={};r.prototype.settings={namespace:"outlayer",item:a.Item},r.prototype.options={containerStyle:{position:"relative"},isInitLayout:!0,isOriginLeft:!0,isOriginTop:!0,isResizeBound:!0,transitionDuration:"0.4s",hiddenStyle:{opacity:0,transform:"scale(0.001)"},visibleStyle:{opacity:1,transform:"scale(1)"}},e(r.prototype,u.prototype),r.prototype._create=function(){this.reloadItems(),this.stamps=[],this.stamp(this.options.stamp),e(this.element.style,this.options.containerStyle),this.options.isResizeBound&&this.bindResize()},r.prototype.reloadItems=function(){this.items=this._getItems(this.element.children)},r.prototype._getItems=function(t){for(var e=this._filterFindItemElements(t),i=this.settings.item,n=[],o=0,r=e.length;r>o;o++){var s=e[o],a=new i(s,this,this.options.itemOptions);n.push(a)}return n},r.prototype._filterFindItemElements=function(t){t=n(t);var e=this.options.itemSelector;if(!e)return t;for(var i=[],o=0,r=t.length;r>o;o++){var s=t[o];c(s,e)&&i.push(s);for(var a=s.querySelectorAll(e),h=0,p=a.length;p>h;h++)i.push(a[h])}return i},r.prototype.getItemElements=function(){for(var t=[],e=0,i=this.items.length;i>e;e++)t.push(this.items[e].element);return t},r.prototype.layout=function(){this._resetLayout(),this._manageStamps();var t=void 0!==this.options.isLayoutInstant?this.options.isLayoutInstant:!this._isLayoutInited;this.layoutItems(this.items,t),this._isLayoutInited=!0},r.prototype._init=r.prototype.layout,r.prototype._resetLayout=function(){this.getSize()},r.prototype.getSize=function(){this.size=d(this.element)},r.prototype._getMeasurement=function(t,e){var i,n=this.options[t];n?("string"==typeof n?i=this.element.querySelector(n):_(n)&&(i=n),this[t]=i?d(i)[e]:n):this[t]=0},r.prototype.layoutItems=function(t,e){t=this._getItemsForLayout(t),this._layoutItems(t,e),this._postLayout()},r.prototype._getItemsForLayout=function(t){for(var e=[],i=0,n=t.length;n>i;i++){var o=t[i];o.isIgnored||e.push(o)}return e},r.prototype._layoutItems=function(t,e){if(!t||!t.length)return this.emitEvent("layoutComplete",[this,t]),void 0;this._itemsOn(t,"layout",function(){this.emitEvent("layoutComplete",[this,t])});for(var i=[],n=0,o=t.length;o>n;n++){var r=t[n],s=this._getItemLayoutPosition(r);s.item=r,s.isInstant=e,i.push(s)}this._processLayoutQueue(i)},r.prototype._getItemLayoutPosition=function(){return{x:0,y:0}},r.prototype._processLayoutQueue=function(t){for(var e=0,i=t.length;i>e;e++){var n=t[e];this._positionItem(n.item,n.x,n.y,n.isInstant)}},r.prototype._positionItem=function(t,e,i,n){n?t.goTo(e,i):t.moveTo(e,i)},r.prototype._postLayout=function(){var t=this._getContainerSize();t&&(this._setContainerMeasure(t.width,!0),this._setContainerMeasure(t.height,!1))},r.prototype._getContainerSize=g,r.prototype._setContainerMeasure=function(t,e){if(void 0!==t){var i=this.size;i.isBorderBox&&(t+=e?i.paddingLeft+i.paddingRight+i.borderLeftWidth+i.borderRightWidth:i.paddingBottom+i.paddingTop+i.borderTopWidth+i.borderBottomWidth),t=Math.max(t,0),this.element.style[e?"width":"height"]=t+"px"}},r.prototype._itemsOn=function(t,e,i){function n(){return o++,o===r&&i.call(s),!0}for(var o=0,r=t.length,s=this,a=0,h=t.length;h>a;a++){var p=t[a];p.on(e,n)}},r.prototype.ignore=function(t){var e=this.getItem(t);e&&(e.isIgnored=!0)},r.prototype.unignore=function(t){var e=this.getItem(t);e&&delete e.isIgnored},r.prototype.stamp=function(t){if(t=this._find(t)){this.stamps=this.stamps.concat(t);for(var e=0,i=t.length;i>e;e++){var n=t[e];this.ignore(n)}}},r.prototype.unstamp=function(t){if(t=this._find(t))for(var e=0,i=t.length;i>e;e++){var n=t[e],o=b(this.stamps,n);-1!==o&&this.stamps.splice(o,1),this.unignore(n)}},r.prototype._find=function(t){return t?("string"==typeof t&&(t=this.element.querySelectorAll(t)),t=n(t)):void 0},r.prototype._manageStamps=function(){if(this.stamps&&this.stamps.length){this._getBoundingRect();for(var t=0,e=this.stamps.length;e>t;t++){var i=this.stamps[t];this._manageStamp(i)}}},r.prototype._getBoundingRect=function(){var t=this.element.getBoundingClientRect(),e=this.size;this._boundingRect={left:t.left+e.paddingLeft+e.borderLeftWidth,top:t.top+e.paddingTop+e.borderTopWidth,right:t.right-(e.paddingRight+e.borderRightWidth),bottom:t.bottom-(e.paddingBottom+e.borderBottomWidth)}},r.prototype._manageStamp=g,r.prototype._getElementOffset=function(t){var e=t.getBoundingClientRect(),i=this._boundingRect,n=d(t),o={left:e.left-i.left-n.marginLeft,top:e.top-i.top-n.marginTop,right:i.right-e.right-n.marginRight,bottom:i.bottom-e.bottom-n.marginBottom};return o},r.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},r.prototype.bindResize=function(){this.isResizeBound||(f.bind(t,"resize",this),this.isResizeBound=!0)},r.prototype.unbindResize=function(){f.unbind(t,"resize",this),this.isResizeBound=!1},r.prototype.onresize=function(){function t(){e.resize()}this.resizeTimeout&&clearTimeout(this.resizeTimeout);var e=this;this.resizeTimeout=setTimeout(t,100)},r.prototype.resize=function(){var t=d(this.element),e=this.size&&t;e&&t.innerWidth===this.size.innerWidth||(this.layout(),delete this.resizeTimeout)},r.prototype.addItems=function(t){var e=this._getItems(t);if(e.length)return this.items=this.items.concat(e),e},r.prototype.appended=function(t){var e=this.addItems(t);e.length&&(this.layoutItems(e,!0),this.reveal(e))},r.prototype.prepended=function(t){var e=this._getItems(t);if(e.length){var i=this.items.slice(0);this.items=e.concat(i),this._resetLayout(),this.layoutItems(e,!0),this.reveal(e),this.layoutItems(i)}},r.prototype.reveal=function(t){if(t&&t.length)for(var e=0,i=t.length;i>e;e++){var n=t[e];n.reveal()}},r.prototype.hide=function(t){if(t&&t.length)for(var e=0,i=t.length;i>e;e++){var n=t[e];n.hide()}},r.prototype.getItem=function(t){for(var e=0,i=this.items.length;i>e;e++){var n=this.items[e];if(n.element===t)return n}},r.prototype.getItems=function(t){if(t&&t.length){for(var e=[],i=0,n=t.length;n>i;i++){var o=t[i],r=this.getItem(o);r&&e.push(r)}return e}},r.prototype.remove=function(t){t=n(t);var e=this.getItems(t);this._itemsOn(e,"remove",function(){this.emitEvent("removeComplete",[this,e])});for(var i=0,o=e.length;o>i;i++){var r=e[i];r.remove();var s=b(this.items,r);this.items.splice(s,1)}},r.prototype.destroy=function(){var t=this.element.style;t.height="",t.position="",t.width="";for(var e=0,i=this.items.length;i>e;e++){var n=this.items[e];n.destroy()}this.unbindResize(),delete this.element.outlayerGUID},r.data=function(t){var e=t&&t.outlayerGUID;return e&&E[e]},r.create=function(t,i){function n(){r.apply(this,arguments)}return e(n.prototype,r.prototype),s(n,"options"),s(n,"settings"),e(n.prototype.options,i),n.prototype.settings.namespace=t,n.data=r.data,n.Item=function(){h.apply(this,arguments)},n.Item.prototype=new r.Item,n.prototype.settings.item=n.Item,p(function(){for(var e=o(t),i=l.querySelectorAll(".js-"+e),r="data-"+e+"-options",s=0,a=i.length;a>s;s++){var h,p=i[s],u=p.getAttribute(r);try{h=u&&JSON.parse(u)}catch(f){m&&m.error("Error parsing "+r+" on "+p.nodeName.toLowerCase()+(p.id?"#"+p.id:"")+": "+f);continue}var d=new n(p,h);y&&y.data(p,t,d)}}),y&&y.bridget&&y.bridget(t,n),n},r.Item=h,t.Outlayer=r}(window),function(t){"use strict";function e(t,e){var n=t.create("masonry");return n.prototype._resetLayout=function(){this.getSize(),this._getMeasurement("columnWidth","outerWidth"),this._getMeasurement("gutter","outerWidth"),this.measureColumns();var t=this.cols;for(this.colYs=[];t--;)this.colYs.push(0);this.maxY=0},n.prototype.measureColumns=function(){var t=this.items[0].element;this.columnWidth=this.columnWidth||e(t).outerWidth,this.columnWidth+=this.gutter,this.cols=Math.floor((this.size.innerWidth+this.gutter)/this.columnWidth),this.cols=Math.max(this.cols,1)},n.prototype._getItemLayoutPosition=function(t){t.getSize();var e=Math.ceil(t.size.outerWidth/this.columnWidth);e=Math.min(e,this.cols);for(var n=this._getColGroup(e),o=Math.min.apply(Math,n),r=i(n,o),s={x:this.columnWidth*r,y:o},a=o+t.size.outerHeight,h=this.cols+1-n.length,p=0;h>p;p++)this.colYs[r+p]=a;return s},n.prototype._getColGroup=function(t){if(1===t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++){var o=this.colYs.slice(n,n+t);e[n]=Math.max.apply(Math,o)}return e},n.prototype._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this.options.isOriginLeft?n.left:n.right,r=o+i.outerWidth,s=Math.floor(o/this.columnWidth);s=Math.max(0,s);var a=Math.floor(r/this.columnWidth);a=Math.min(this.cols-1,a);for(var h=(this.options.isOriginTop?n.top:n.bottom)+i.outerHeight,p=s;a>=p;p++)this.colYs[p]=Math.max(h,this.colYs[p])},n.prototype._getContainerSize=function(){return this.maxY=Math.max.apply(Math,this.colYs),{height:this.maxY}},n}var i=Array.prototype.indexOf?function(t,e){return t.indexOf(e)}:function(t,e){for(var i=0,n=t.length;n>i;i++){var o=t[i];if(o===e)return i}return-1};"function"==typeof define&&define.amd?define(["outlayer","get-size"],e):t.Masonry=e(t.Outlayer,t.getSize)}(window);
--------------------------------------------------------------------------------
/js/modernizr.custom.js:
--------------------------------------------------------------------------------
1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD
2 | * Build: http://modernizr.com/download/#-cssanimations-shiv-cssclasses-testprop-testallprops-domprefixes-load
3 | */
4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}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",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(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=t.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(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.cssanimations=function(){return D("animationName")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(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},x(""),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._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.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