├── .gitignore ├── README.md ├── build ├── app.js ├── demo.css ├── effect1.css ├── fonts │ ├── .DS_Store │ ├── blokk │ │ ├── BLOKKRegular.eot │ │ ├── BLOKKRegular.svg │ │ ├── BLOKKRegular.ttf │ │ └── BLOKKRegular.woff │ ├── codropsicons │ │ ├── codropsicons.eot │ │ ├── codropsicons.svg │ │ ├── codropsicons.ttf │ │ ├── codropsicons.woff │ │ └── license.txt │ └── feather │ │ ├── feather.eot │ │ ├── feather.svg │ │ ├── feather.ttf │ │ └── feather.woff ├── img │ ├── 5.jpg │ ├── browser.png │ └── landscape.jpg ├── index.html └── normalize.css ├── gulp ├── config.js ├── tasks │ ├── browserSync.js │ ├── browserify.js │ ├── build.js │ ├── css.js │ ├── default.js │ ├── markup.js │ ├── setWatch.js │ └── watch.js └── util │ ├── bundleLogger.js │ └── handleErrors.js ├── gulpfile.js ├── package.json └── src ├── app ├── app.jsx └── components │ ├── main.jsx │ └── morphBox.jsx ├── css ├── demo.css ├── effect1.css └── normalize.css └── www └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-PagePreloading 2 | 3 | Inspiration from [Codrops](http://tympanus.net/codrops/2014/08/05/page-preloading-effect/) 4 | 5 | There is An idea to create Some React component from Codrops Demo 6 | 7 | more information can see [vimeo](https://vimeo.com/137932055) 8 | 9 | ###How to use 10 | This one just demo so you can Donload and 11 | 12 | npm install 13 | ... ... 14 | npm start 15 | more information can see the code -------------------------------------------------------------------------------- /build/demo.css: -------------------------------------------------------------------------------- 1 | /*@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700); 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 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 | }*/ 12 | 13 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 14 | .clearfix:before, .clearfix:after { content: ''; display: table; } 15 | .clearfix:after { clear: both; } 16 | 17 | body { 18 | background: rgb(244, 244, 244); 19 | color: #fff; 20 | font-weight: 400; 21 | font-size: 1em; 22 | font-family: 'Raleway', Arial, sans-serif; 23 | } 24 | 25 | a { 26 | color: #f0f0f0; 27 | text-decoration: none; 28 | outline: none; 29 | } 30 | 31 | /* Demo colors */ 32 | .demo-1 { background: #ef6e7e; } 33 | .demo-1 a { color: #be4856; } 34 | 35 | .demo-2 { background: #72d0f4; } 36 | .demo-2 a { color: #1c9ccd; } 37 | 38 | a:hover, a:focus { 39 | color: #fff; 40 | } 41 | 42 | section { 43 | padding: 1em; 44 | text-align: center; 45 | } 46 | 47 | /* Header */ 48 | .codrops-header { 49 | margin: 0 auto; 50 | padding: 2em; 51 | text-align: center; 52 | } 53 | 54 | .codrops-header h1 { 55 | margin: 0; 56 | font-weight: 300; 57 | font-size: 2.5em; 58 | line-height: 1.3; 59 | } 60 | 61 | .codrops-header h1 span { 62 | display: block; 63 | padding: 0 0 0.6em 0.1em; 64 | font-size: 60%; 65 | opacity: 0.7; 66 | } 67 | 68 | /* To Navigation Style */ 69 | .codrops-top { 70 | width: 100%; 71 | text-transform: uppercase; 72 | font-weight: 700; 73 | font-size: 0.69em; 74 | line-height: 2.2; 75 | } 76 | 77 | .codrops-top a { 78 | display: inline-block; 79 | padding: 2em; 80 | text-decoration: none; 81 | letter-spacing: 1px; 82 | } 83 | 84 | .codrops-top span.right { 85 | float: right; 86 | } 87 | 88 | .codrops-top span.right a { 89 | display: block; 90 | float: left; 91 | } 92 | 93 | .codrops-icon:before { 94 | margin: 0 4px; 95 | text-transform: none; 96 | font-weight: normal; 97 | font-style: normal; 98 | font-variant: normal; 99 | font-family: 'codropsicons'; 100 | line-height: 1; 101 | speak: none; 102 | -webkit-font-smoothing: antialiased; 103 | } 104 | 105 | .codrops-icon-drop:before { 106 | content: "\e001"; 107 | } 108 | 109 | .codrops-icon-prev:before { 110 | content: "\e004"; 111 | } 112 | 113 | /* Demo Buttons Style */ 114 | .codrops-demos { 115 | padding: 2em 0 1em; 116 | font-size: 0.8em; 117 | text-align: center; 118 | } 119 | 120 | .codrops-demos a { 121 | display: inline-block; 122 | margin: 0.5em 0.75em; 123 | line-height: 1.5; 124 | outline: none; 125 | text-decoration: none; 126 | text-transform: uppercase; 127 | letter-spacing: 1px; 128 | font-weight: 700; 129 | } 130 | 131 | .codrops-demos a.current-demo { 132 | color: inherit; 133 | } 134 | 135 | /* Related demos */ 136 | .related { 137 | padding: 4em 0 3em; 138 | } 139 | 140 | .related p { 141 | font-size: 1.25em; 142 | font-weight: 700; 143 | } 144 | 145 | .related > a { 146 | border: 2px solid #000; 147 | border-color: initial; 148 | display: inline-block; 149 | text-align: center; 150 | margin: 20px 10px; 151 | padding: 25px; 152 | } 153 | 154 | .related a img { 155 | max-width: 100%; 156 | opacity: 0.8; 157 | } 158 | 159 | .related a:hover img, 160 | .related a:active img { 161 | opacity: 1; 162 | } 163 | 164 | .related a h3 { 165 | margin: 0; 166 | padding: 0.5em 0 0.3em; 167 | max-width: 300px; 168 | text-align: left; 169 | } 170 | 171 | /* Demo ad design */ 172 | body #cdawrap { 173 | background: none; 174 | top: 50px; 175 | opacity: 0; 176 | -webkit-transition: opacity 0.3s 1.2s; 177 | transition: opacity 0.3s 1.2s; 178 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 179 | } 180 | 181 | body #cdawrap a { 182 | color: #fff !important; 183 | } 184 | 185 | body .loaded ~ #cdawrap { 186 | opacity: 1; 187 | } 188 | 189 | body #cdawrap #cda-remove { 190 | top: 20px; 191 | right: 25px; 192 | width: 20px; 193 | height: 20px; 194 | opacity: 0; 195 | } 196 | 197 | body #cdawrap:hover #cda-remove { 198 | opacity: 1; 199 | } 200 | 201 | @media screen and (max-width: 35em) { 202 | .codrops-icon span { 203 | display: none; 204 | } 205 | } -------------------------------------------------------------------------------- /build/effect1.css: -------------------------------------------------------------------------------- 1 | /*@font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'Blokk'; 5 | src: url('../fonts/blokk/BLOKKRegular.eot'); 6 | src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/blokk/BLOKKRegular.woff') format('woff'), 8 | url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg'); 9 | } 10 | 11 | @font-face { 12 | font-weight: normal; 13 | font-style: normal; 14 | font-family: 'feather'; 15 | src:url('../fonts/feather/feather.eot?-9jv4cc'); 16 | src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'), 17 | url('../fonts/feather/feather.woff?-9jv4cc') format('woff'), 18 | url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'), 19 | url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg'); 20 | }*/ 21 | 22 | .ip-header { 23 | position: fixed; 24 | top: 0; 25 | z-index: 100; 26 | min-height: 480px; 27 | width: 100%; 28 | height: 100%; 29 | background: #203880; 30 | } 31 | 32 | .ip-header h1 { 33 | margin: 0; 34 | } 35 | 36 | .ip-logo, 37 | .ip-loader { 38 | position: absolute; 39 | left: 0; 40 | width: 100%; 41 | opacity: 0; 42 | cursor: default; 43 | pointer-events: none; 44 | } 45 | 46 | .ip-logo { 47 | top: 0; 48 | height: 100%; 49 | -webkit-transform: translate3d(0,25%,0); 50 | transform: translate3d(0,25%,0); 51 | } 52 | 53 | .ip-loader { 54 | bottom: 20%; 55 | } 56 | 57 | .ip-header .ip-inner { 58 | display: block; 59 | margin: 0 auto; 60 | } 61 | 62 | .ip-header .ip-logo svg { 63 | min-width: 320px; 64 | max-width: 480px; 65 | width: 25%; 66 | } 67 | 68 | .ip-header .ip-logo svg path { 69 | fill: #fff; 70 | } 71 | 72 | .ip-header .ip-loader svg path { 73 | fill: none; 74 | stroke-width: 6; 75 | } 76 | 77 | .ip-header .ip-loader svg path.ip-loader-circlebg { 78 | stroke: #A6A6A6; 79 | } 80 | 81 | .ip-header .ip-loader svg path.ip-loader-circle { 82 | -webkit-transition: stroke-dashoffset 0.2s; 83 | transition: stroke-dashoffset 0.2s; 84 | stroke: #fff; 85 | } 86 | 87 | /* Content */ 88 | .ip-main { 89 | overflow: hidden; 90 | margin: 0 auto; 91 | padding: 160px 0 10em 0; 92 | max-width: 1100px; 93 | width: 100%; 94 | } 95 | 96 | .ip-main h2 { 97 | margin: 0; 98 | padding: 0.5em 0 1em; 99 | color: #203880; 100 | text-align: center; 101 | font-size: 4.25em; 102 | font-size: 4vw; 103 | line-height: 1; 104 | } 105 | 106 | .browser { 107 | margin: 0 auto; 108 | min-height: 400px; 109 | max-width: 1200px; 110 | width: 100%; 111 | border-radius: 8px; 112 | background-size: 100%; 113 | color: #d3d3d3; 114 | } 115 | 116 | .box { 117 | float: left; 118 | /*padding: 2em;*/ 119 | width: 33.3%; 120 | font-size: 0.7em; 121 | line-height: 1.5; 122 | position: relative; 123 | } 124 | 125 | .box .box-main { 126 | width: 25em; 127 | margin: 0 auto; 128 | position: relative; 129 | background-color: #fff; 130 | box-shadow: 0 1px 6px rgba(0,0,0,.3); 131 | z-index: 10; 132 | -webkit-transition: opacity 0.1s 0.5s; 133 | transition: opacity 0.1s 0.5s; 134 | } 135 | 136 | .box-img { 137 | /*position: absolute;*/ 138 | overflow: hidden; 139 | z-index: 10; 140 | } 141 | 142 | .box-img img { 143 | display: block; 144 | height: auto; 145 | /*width: 100%;*/ 146 | } 147 | 148 | .box-inner { 149 | position: relative; 150 | padding: 30px 16px; 151 | margin-top: -144px; 152 | background: #203880; 153 | } 154 | 155 | .box p { 156 | margin: 24px 0; 157 | font-size: 12px; 158 | color: #fff; /* #212121; */ 159 | } 160 | 161 | .box.open .box-main{ 162 | opacity: 0; 163 | -webkit-transition: opacity 0.1s; 164 | transition: opacity 0.1s; 165 | } 166 | 167 | .box.active .box-main { 168 | z-index: 15; 169 | } 170 | 171 | .box.active .box-content { 172 | z-index: 20; 173 | } 174 | 175 | .box .box-content { 176 | position: fixed; 177 | z-index: 5; 178 | opacity: 0; 179 | overflow: hidden; 180 | width: 25em; 181 | height: 340px; 182 | background-color: #FFF; 183 | -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 184 | transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 185 | } 186 | 187 | .box.open .box-content { 188 | opacity: 1; 189 | top: 0 !important; 190 | left: 0 !important; 191 | width: 100%; 192 | height: 100%; 193 | -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 194 | transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 195 | } 196 | 197 | .box .box-content img { 198 | position: absolute; 199 | top: 0; 200 | left: 0; 201 | display: block; 202 | min-width: 100%; 203 | min-height: 100%; 204 | transition: 0.5s; 205 | } 206 | 207 | .box.open.detail .box-content img { 208 | -webkit-filter: blur(10px); 209 | -webkit-transform: scale(1.25); 210 | transform: scale(1.25); 211 | } 212 | 213 | .box .box-content .box-card { 214 | position: relative; 215 | width: 80%; 216 | max-width: 800px; 217 | height: 250px; 218 | margin: 450px auto 60px; 219 | padding: 30px 40px 22px; 220 | background: #203880; 221 | border-radius: 3px; 222 | cursor: pointer; 223 | transition-property: transform; 224 | transition-duration: 0.5s; 225 | -webkit-transform: translate3d(0,300px,0); 226 | transform: translate3d(0,300px,0); 227 | } 228 | 229 | .box.open .box-content .box-card { 230 | -webkit-transform: translate3d(0,0,0); 231 | transform: translate3d(0,0,0); 232 | } 233 | 234 | .box.open.detail .box-content .box-card { 235 | -webkit-transform: translate3d(0,-200px,0); 236 | transform: translate3d(0,-200px,0); 237 | } 238 | 239 | /*.box .box-content > div { 240 | visibility: hidden; 241 | height: 0; 242 | opacity: 0; 243 | -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; 244 | transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; 245 | } 246 | 247 | .box.open .box-content > div { 248 | visibility: visible; 249 | height: auto; 250 | opacity: 1; 251 | -webkit-transition: opacity 0.3s 0.5s; 252 | transition: opacity 0.3s 0.5s; 253 | }*/ 254 | 255 | .box-content .icon-close { 256 | position: absolute; 257 | top: 20px; 258 | right: 20px; 259 | border: 2px solid #f9e1c9; 260 | border-radius: 50%; 261 | line-height: 2.8; 262 | z-index: 100; 263 | display: block; 264 | overflow: hidden; 265 | width: 3em; 266 | height: 3em; 267 | text-align: center; 268 | cursor: pointer; 269 | } 270 | 271 | /* Animations */ 272 | 273 | /* Initial animation of header elements */ 274 | .loading .ip-logo, 275 | .loading .ip-loader { 276 | opacity: 1; 277 | -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; 278 | animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; 279 | } 280 | 281 | .loading .ip-loader { 282 | -webkit-animation-delay: 0.2s; 283 | animation-delay: 0.2s; 284 | } 285 | 286 | @-webkit-keyframes animInitialHeader { 287 | from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } 288 | } 289 | 290 | @keyframes animInitialHeader { 291 | from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } 292 | } 293 | 294 | /* Header elements when loading finishes */ 295 | .loaded .ip-logo, 296 | .loaded .ip-loader { 297 | opacity: 1; 298 | } 299 | 300 | .loaded .ip-logo { 301 | -webkit-transform-origin: 50% 0; 302 | transform-origin: 50% 0; 303 | -webkit-animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards; 304 | animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards; 305 | } 306 | 307 | @-webkit-keyframes animLoadedLogo { 308 | to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); } 309 | } 310 | 311 | @keyframes animLoadedLogo { 312 | to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); } 313 | } 314 | 315 | .loaded .ip-loader { 316 | -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; 317 | animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; 318 | } 319 | 320 | @-webkit-keyframes animLoadedLoader { 321 | to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } 322 | } 323 | 324 | @keyframes animLoadedLoader { 325 | to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } 326 | } 327 | 328 | /* Change the color of the logo */ 329 | .loaded .ip-logo svg path { 330 | -webkit-transition: all 0.5s ease 0.3s; 331 | transition: all 0.5s ease 0.3s; 332 | fill: #203880; 333 | } 334 | 335 | /* Header animation when loading finishes */ 336 | .loaded .ip-header { 337 | -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; 338 | animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; 339 | } 340 | 341 | @-webkit-keyframes animLoadedHeader { 342 | to { -webkit-transform: translate3d(0,-100%,0); } 343 | } 344 | 345 | @keyframes animLoadedHeader { 346 | to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 347 | } 348 | 349 | /* Content animations */ 350 | .loaded .ip-main h2, 351 | .loaded .ip-main .browser, 352 | .loaded .ip-main .browser .box, 353 | .loaded .codrops-demos { 354 | -webkit-animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both; 355 | animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both; 356 | } 357 | 358 | .loaded .ip-main .browser, 359 | .loaded .ip-main .browser .box:first-child { 360 | -webkit-animation-delay: 0.2s; 361 | animation-delay: 0.2s; 362 | } 363 | 364 | .loaded .ip-main .browser .box:nth-child(2) { 365 | -webkit-animation-delay: 0.25s; 366 | animation-delay: 0.25s; 367 | } 368 | 369 | .loaded .ip-main .browser .box:nth-child(3) { 370 | -webkit-animation-delay: 0.3s; 371 | animation-delay: 0.3s; 372 | } 373 | 374 | @-webkit-keyframes animLoadedContent { 375 | from { opacity: 0; } /* -webkit-transform: translate3d(0,500px,0); */ 376 | } 377 | 378 | @keyframes animLoadedContent { 379 | from { opacity: 0; } /* -webkit-transform: translate3d(0,500px,0); transform: translate3d(0,500px,0); */ 380 | } 381 | 382 | /* Change layout class for header */ 383 | .layout-switch .ip-header { 384 | position: absolute; 385 | } 386 | 387 | /* No JS */ 388 | .no-js .ip-header { 389 | position: relative; 390 | min-height: 0px; 391 | } 392 | 393 | .no-js .ip-header .ip-logo { 394 | margin-top: 20px; 395 | height: 180px; 396 | opacity: 1; 397 | -webkit-transform: none; 398 | transform: none; 399 | } 400 | 401 | .no-js .ip-header .ip-logo svg path { 402 | fill: #fff; 403 | } 404 | 405 | /* Media queries */ 406 | 407 | @media screen and (max-width: 45em) { 408 | 409 | .ip-main h2 { 410 | font-size: 2.25em; 411 | font-size: 10vw; 412 | } 413 | 414 | .box { 415 | width: 100%%; 416 | } 417 | 418 | } -------------------------------------------------------------------------------- /build/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/.DS_Store -------------------------------------------------------------------------------- /build/fonts/blokk/BLOKKRegular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/blokk/BLOKKRegular.eot -------------------------------------------------------------------------------- /build/fonts/blokk/BLOKKRegular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontXChange 20110222 at Fri Feb 1 20:10:43 2013 6 | By Bjørn Kvamme 7 | Copyright tomma 2013 8 | 9 | 10 | 11 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100 | 102 | 104 | 106 | 108 | 110 | 112 | 114 | 116 | 118 | 120 | 122 | 124 | 126 | 128 | 130 | 132 | 134 | 136 | 138 | 140 | 142 | 144 | 146 | 148 | 150 | 152 | 154 | 156 | 158 | 160 | 162 | 164 | 166 | 168 | 170 | 172 | 174 | 176 | 178 | 180 | 182 | 184 | 186 | 188 | 190 | 192 | 194 | 196 | 198 | 200 | 202 | 204 | 206 | 208 | 210 | 212 | 214 | 216 | 218 | 220 | 222 | 224 | 226 | 228 | 230 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /build/fonts/blokk/BLOKKRegular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/blokk/BLOKKRegular.ttf -------------------------------------------------------------------------------- /build/fonts/blokk/BLOKKRegular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/blokk/BLOKKRegular.woff -------------------------------------------------------------------------------- /build/fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /build/fonts/codropsicons/codropsicons.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 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /build/fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /build/fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /build/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/ -------------------------------------------------------------------------------- /build/fonts/feather/feather.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/feather/feather.eot -------------------------------------------------------------------------------- /build/fonts/feather/feather.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /build/fonts/feather/feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/feather/feather.ttf -------------------------------------------------------------------------------- /build/fonts/feather/feather.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/fonts/feather/feather.woff -------------------------------------------------------------------------------- /build/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/img/5.jpg -------------------------------------------------------------------------------- /build/img/browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/img/browser.png -------------------------------------------------------------------------------- /build/img/landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ricko53/React-PagePreloading/c64825203764491c95c424e0bd592c2a0948922e/build/img/landscape.jpg -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Transition 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /build/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /gulp/config.js: -------------------------------------------------------------------------------- 1 | var dest = './build', 2 | src = './src'; 3 | 4 | module.exports = { 5 | browserSync: { 6 | server: { 7 | // We're serving the src folder as well 8 | // for sass sourcemap linking 9 | baseDir: [dest, src] 10 | }, 11 | files: [ 12 | dest + '/**' 13 | ] 14 | }, 15 | css: { 16 | src: src + "/css/*.css", 17 | dest: dest 18 | }, 19 | markup: { 20 | src: src + "/www/**", 21 | dest: dest 22 | }, 23 | browserify: { 24 | // Enable source maps 25 | debug: true, 26 | // A separate bundle will be generated for each 27 | // bundle config in the list below 28 | bundleConfigs: [{ 29 | entries: src + '/app/app.jsx', 30 | dest: dest, 31 | outputName: 'app.js' 32 | }] 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /gulp/tasks/browserSync.js: -------------------------------------------------------------------------------- 1 | var browserSync = require('browser-sync'); 2 | var gulp = require('gulp'); 3 | var config = require('../config').browserSync; 4 | 5 | gulp.task('browserSync', ['build'], function() { 6 | browserSync(config); 7 | }); 8 | -------------------------------------------------------------------------------- /gulp/tasks/browserify.js: -------------------------------------------------------------------------------- 1 | /* browserify task 2 | --------------- 3 | Bundle javascripty things with browserify! 4 | This task is set up to generate multiple separate bundles, from 5 | different sources, and to use Watchify when run from the default task. 6 | See browserify.bundleConfigs in gulp/config.js 7 | */ 8 | 9 | var browserify = require('browserify'); 10 | var watchify = require('watchify'); 11 | var bundleLogger = require('../util/bundleLogger'); 12 | var gulp = require('gulp'); 13 | var handleErrors = require('../util/handleErrors'); 14 | var source = require('vinyl-source-stream'); 15 | var config = require('../config').browserify; 16 | var babelify = require('babelify'); 17 | 18 | gulp.task('browserify', function(callback) { 19 | 20 | var bundleQueue = config.bundleConfigs.length; 21 | 22 | var browserifyThis = function(bundleConfig) { 23 | 24 | var bundler = browserify({ 25 | // Required watchify args 26 | cache: {}, packageCache: {}, fullPaths: false, 27 | // Specify the entry point of your app 28 | entries: bundleConfig.entries, 29 | // Add file extentions to make optional in your requires 30 | extensions: config.extensions, 31 | // Enable source maps! 32 | debug: config.debug 33 | }); 34 | 35 | var bundle = function() { 36 | // Log when bundling starts 37 | bundleLogger.start(bundleConfig.outputName); 38 | 39 | return bundler 40 | .bundle() 41 | // Report compile errors 42 | .on('error', handleErrors) 43 | // Use vinyl-source-stream to make the 44 | // stream gulp compatible. Specifiy the 45 | // desired output filename here. 46 | .pipe(source(bundleConfig.outputName)) 47 | // Specify the output destination 48 | .pipe(gulp.dest(bundleConfig.dest)) 49 | .on('end', reportFinished); 50 | }; 51 | 52 | bundler.transform(babelify.configure({stage: 1})); 53 | 54 | if (global.isWatching) { 55 | // Wrap with watchify and rebundle on changes 56 | bundler = watchify(bundler); 57 | // Rebundle on update 58 | bundler.on('update', bundle); 59 | } 60 | 61 | var reportFinished = function() { 62 | // Log when bundling completes 63 | bundleLogger.end(bundleConfig.outputName); 64 | 65 | if (bundleQueue) { 66 | bundleQueue--; 67 | if (bundleQueue === 0) { 68 | // If queue is empty, tell gulp the task is complete. 69 | // https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback 70 | callback(); 71 | } 72 | } 73 | }; 74 | 75 | return bundle(); 76 | }; 77 | 78 | // Start bundling with Browserify for each bundleConfig specified 79 | config.bundleConfigs.forEach(browserifyThis); 80 | }); 81 | -------------------------------------------------------------------------------- /gulp/tasks/build.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | gulp.task('build', ['browserify', 'markup', 'css']); 4 | -------------------------------------------------------------------------------- /gulp/tasks/css.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var config = require('../config').css; 3 | 4 | gulp.task('css', function() { 5 | return gulp.src(config.src) 6 | .pipe(gulp.dest(config.dest)); 7 | }); 8 | -------------------------------------------------------------------------------- /gulp/tasks/default.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | gulp.task('default', ['watch']); 4 | -------------------------------------------------------------------------------- /gulp/tasks/markup.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var config = require('../config').markup; 3 | 4 | gulp.task('markup', function() { 5 | return gulp.src(config.src) 6 | .pipe(gulp.dest(config.dest)); 7 | }); 8 | -------------------------------------------------------------------------------- /gulp/tasks/setWatch.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | gulp.task('setWatch', function() { 4 | global.isWatching = true; 5 | }); 6 | -------------------------------------------------------------------------------- /gulp/tasks/watch.js: -------------------------------------------------------------------------------- 1 | 2 | /* Notes: 3 | - gulp/tasks/browserify.js handles js recompiling with watchify 4 | - gulp/tasks/browserSync.js watches and reloads compiled files 5 | */ 6 | 7 | var gulp = require('gulp'); 8 | var config = require('../config'); 9 | 10 | gulp.task('watch', ['setWatch', 'browserSync', 'css'], function() { 11 | gulp.watch(config.markup.src, ['markup']); 12 | }); 13 | -------------------------------------------------------------------------------- /gulp/util/bundleLogger.js: -------------------------------------------------------------------------------- 1 | /* bundleLogger 2 | ------------ 3 | Provides gulp style logs to the bundle method in browserify.js 4 | */ 5 | 6 | var gutil = require('gulp-util'); 7 | var prettyHrtime = require('pretty-hrtime'); 8 | var startTime; 9 | 10 | module.exports = { 11 | start: function(filepath) { 12 | startTime = process.hrtime(); 13 | gutil.log('Bundling', gutil.colors.green(filepath) + '...'); 14 | }, 15 | 16 | end: function(filepath) { 17 | var taskTime = process.hrtime(startTime); 18 | var prettyTime = prettyHrtime(taskTime); 19 | gutil.log('Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime)); 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /gulp/util/handleErrors.js: -------------------------------------------------------------------------------- 1 | var notify = require("gulp-notify"); 2 | 3 | module.exports = function() { 4 | 5 | var args = Array.prototype.slice.call(arguments); 6 | 7 | // Send error to notification center with gulp-notify 8 | notify.onError({ 9 | title: "Compile Error", 10 | message: "<%= error.message %>" 11 | }).apply(this, args); 12 | 13 | // Keep gulp from hanging on this task 14 | this.emit('end'); 15 | }; 16 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | gulpfile.js 3 | =========== 4 | Rather than manage one giant configuration file responsible 5 | for creating multiple tasks, each task has been broken out into 6 | its own file in gulp/tasks. Any files in that directory get 7 | automatically required below. 8 | To add a new task, simply add a new task file that directory. 9 | gulp/tasks/default.js specifies the default set of tasks to run 10 | when you run `gulp`. 11 | */ 12 | 13 | var requireDir = require('require-dir'); 14 | 15 | // Require all tasks in gulp/tasks, including subfolders 16 | requireDir('./gulp/tasks', { recurse: true }); 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-example", 3 | "version": "0.8.0", 4 | "description": "Sample project that uses material-ui", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/callemall/material-ui.git" 8 | }, 9 | "scripts": { 10 | "start": "gulp" 11 | }, 12 | "devDependencies": { 13 | "babelify": "^6.1.2", 14 | "browser-sync": "^1.8.1", 15 | "browserify": "^7.0.3", 16 | "gulp": "^3.8.10", 17 | "gulp-notify": "^2.1.0", 18 | "gulp-util": "^3.0.1", 19 | "pretty-hrtime": "^0.2.2", 20 | "require-dir": "^0.1.0", 21 | "underscore": "^1.7.0", 22 | "vinyl-source-stream": "^1.0.0", 23 | "watchify": "^2.2.1" 24 | }, 25 | "dependencies": { 26 | "react": ">=0.13", 27 | "react-tap-event-plugin": "^0.1.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/app.jsx: -------------------------------------------------------------------------------- 1 | (function () { 2 | let React = require('react/addons'); 3 | let injectTapEventPlugin = require('react-tap-event-plugin'); 4 | let Main = require('./components/main.jsx'); // Our custom react component 5 | 6 | //Needed for React Developer Tools 7 | window.React = React; 8 | 9 | //Needed for onTouchTap 10 | //Can go away when react 1.0 release 11 | //Check this repo: 12 | //https://github.com/zilverline/react-tap-event-plugin 13 | injectTapEventPlugin(); 14 | 15 | // Render the main app react component into the document body. 16 | // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render 17 | React.render(
, document.body); 18 | 19 | })(); -------------------------------------------------------------------------------- /src/app/components/main.jsx: -------------------------------------------------------------------------------- 1 | let React = require('react'); 2 | let MorphBox = require('./morphBox.jsx'); 3 | 4 | var Main = React.createClass({ 5 | 6 | getInitialState() { 7 | return{ 8 | demo : " ", 9 | container : "ip-container loading" 10 | }; 11 | }, 12 | 13 | componentDidMount() { 14 | this._startLoading(); 15 | }, 16 | 17 | render() { 18 | return ( 19 |
20 |
21 |
22 |

23 | 24 | Delightful Demonstrations by Codrops 25 | 26 | 27 |

28 |
29 | 30 | 31 | 32 | 33 |
34 |
35 |
36 |

Make yourself at home.

37 |
38 | 39 |
40 |
41 |
42 |
43 | ); 44 | }, 45 | 46 | _startLoading() { 47 | var circle = React.findDOMNode(this.refs.ipLoaderCircle); 48 | var progress = 0; 49 | let self = this; 50 | circle.style.strokeDasharray = circle.style.strokeDashoffset = circle.getTotalLength(); 51 | var interval = setInterval(function(){ 52 | progress = Math.min( progress + Math.random() * 0.1, 1 ); 53 | circle.style.strokeDashoffset = circle.getTotalLength() * ( 1 - progress ); 54 | if ( progress === 1 ) { 55 | clearInterval( interval ); 56 | self._changClass(); 57 | }; 58 | }, 80); 59 | }, 60 | 61 | _changClass() { 62 | this.setState({ 63 | demo : "layout-switch", 64 | container : "ip-container loaded" 65 | }); 66 | } 67 | 68 | }); 69 | 70 | module.exports = Main; -------------------------------------------------------------------------------- /src/app/components/morphBox.jsx: -------------------------------------------------------------------------------- 1 | let React = require('react'); 2 | 3 | var MorphBox = React.createClass({ 4 | 5 | getInitialState() { 6 | return { 7 | left : 0, 8 | top : 0, 9 | image : "img/5.jpg", 10 | boxClass : "box" 11 | }; 12 | }, 13 | 14 | changeOpen() { 15 | this.setState({ 16 | boxClass : "box active open" 17 | }); 18 | }, 19 | 20 | changeClose() { 21 | this.setState({ 22 | boxClass : "box" 23 | }); 24 | }, 25 | 26 | changeBackground() { 27 | this.setState({ 28 | boxClass : "box active open detail" 29 | }); 30 | }, 31 | 32 | handleScroll() { 33 | let button = this.refs.imgPosition.getDOMNode(); 34 | let buttonPos = button.getBoundingClientRect(); 35 | this.setState({ 36 | left : buttonPos.left, 37 | top : buttonPos.top 38 | }); 39 | }, 40 | 41 | componentDidMount() { 42 | let button = this.refs.imgPosition.getDOMNode(); 43 | let buttonPos = button.getBoundingClientRect(); 44 | this.setState({ 45 | left : buttonPos.left, 46 | top : buttonPos.top 47 | }); 48 | window.addEventListener('scroll', this.handleScroll); 49 | }, 50 | 51 | componentWillUnmount() { 52 | window.removeEventListener('scroll', this.handleScroll); 53 | }, 54 | 55 | render() { 56 | 57 | var styles = { 58 | left: this.state.left, 59 | top: this.state.top 60 | }; 61 | 62 | return ( 63 |
64 |
65 |
66 | alt text 67 |
68 |
69 |

Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.

70 |
71 |
72 |
73 | Background Image 74 | close 75 |
76 |
77 |
78 |
79 | ); 80 | } 81 | }); 82 | 83 | module.exports = MorphBox; -------------------------------------------------------------------------------- /src/css/demo.css: -------------------------------------------------------------------------------- 1 | /*@import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700); 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 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 | }*/ 12 | 13 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 14 | .clearfix:before, .clearfix:after { content: ''; display: table; } 15 | .clearfix:after { clear: both; } 16 | 17 | body { 18 | background: rgb(244, 244, 244); 19 | color: #fff; 20 | font-weight: 400; 21 | font-size: 1em; 22 | font-family: 'Raleway', Arial, sans-serif; 23 | } 24 | 25 | a { 26 | color: #f0f0f0; 27 | text-decoration: none; 28 | outline: none; 29 | } 30 | 31 | /* Demo colors */ 32 | .demo-1 { background: #ef6e7e; } 33 | .demo-1 a { color: #be4856; } 34 | 35 | .demo-2 { background: #72d0f4; } 36 | .demo-2 a { color: #1c9ccd; } 37 | 38 | a:hover, a:focus { 39 | color: #fff; 40 | } 41 | 42 | section { 43 | padding: 1em; 44 | text-align: center; 45 | } 46 | 47 | /* Header */ 48 | .codrops-header { 49 | margin: 0 auto; 50 | padding: 2em; 51 | text-align: center; 52 | } 53 | 54 | .codrops-header h1 { 55 | margin: 0; 56 | font-weight: 300; 57 | font-size: 2.5em; 58 | line-height: 1.3; 59 | } 60 | 61 | .codrops-header h1 span { 62 | display: block; 63 | padding: 0 0 0.6em 0.1em; 64 | font-size: 60%; 65 | opacity: 0.7; 66 | } 67 | 68 | /* To Navigation Style */ 69 | .codrops-top { 70 | width: 100%; 71 | text-transform: uppercase; 72 | font-weight: 700; 73 | font-size: 0.69em; 74 | line-height: 2.2; 75 | } 76 | 77 | .codrops-top a { 78 | display: inline-block; 79 | padding: 2em; 80 | text-decoration: none; 81 | letter-spacing: 1px; 82 | } 83 | 84 | .codrops-top span.right { 85 | float: right; 86 | } 87 | 88 | .codrops-top span.right a { 89 | display: block; 90 | float: left; 91 | } 92 | 93 | .codrops-icon:before { 94 | margin: 0 4px; 95 | text-transform: none; 96 | font-weight: normal; 97 | font-style: normal; 98 | font-variant: normal; 99 | font-family: 'codropsicons'; 100 | line-height: 1; 101 | speak: none; 102 | -webkit-font-smoothing: antialiased; 103 | } 104 | 105 | .codrops-icon-drop:before { 106 | content: "\e001"; 107 | } 108 | 109 | .codrops-icon-prev:before { 110 | content: "\e004"; 111 | } 112 | 113 | /* Demo Buttons Style */ 114 | .codrops-demos { 115 | padding: 2em 0 1em; 116 | font-size: 0.8em; 117 | text-align: center; 118 | } 119 | 120 | .codrops-demos a { 121 | display: inline-block; 122 | margin: 0.5em 0.75em; 123 | line-height: 1.5; 124 | outline: none; 125 | text-decoration: none; 126 | text-transform: uppercase; 127 | letter-spacing: 1px; 128 | font-weight: 700; 129 | } 130 | 131 | .codrops-demos a.current-demo { 132 | color: inherit; 133 | } 134 | 135 | /* Related demos */ 136 | .related { 137 | padding: 4em 0 3em; 138 | } 139 | 140 | .related p { 141 | font-size: 1.25em; 142 | font-weight: 700; 143 | } 144 | 145 | .related > a { 146 | border: 2px solid #000; 147 | border-color: initial; 148 | display: inline-block; 149 | text-align: center; 150 | margin: 20px 10px; 151 | padding: 25px; 152 | } 153 | 154 | .related a img { 155 | max-width: 100%; 156 | opacity: 0.8; 157 | } 158 | 159 | .related a:hover img, 160 | .related a:active img { 161 | opacity: 1; 162 | } 163 | 164 | .related a h3 { 165 | margin: 0; 166 | padding: 0.5em 0 0.3em; 167 | max-width: 300px; 168 | text-align: left; 169 | } 170 | 171 | /* Demo ad design */ 172 | body #cdawrap { 173 | background: none; 174 | top: 50px; 175 | opacity: 0; 176 | -webkit-transition: opacity 0.3s 1.2s; 177 | transition: opacity 0.3s 1.2s; 178 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 179 | } 180 | 181 | body #cdawrap a { 182 | color: #fff !important; 183 | } 184 | 185 | body .loaded ~ #cdawrap { 186 | opacity: 1; 187 | } 188 | 189 | body #cdawrap #cda-remove { 190 | top: 20px; 191 | right: 25px; 192 | width: 20px; 193 | height: 20px; 194 | opacity: 0; 195 | } 196 | 197 | body #cdawrap:hover #cda-remove { 198 | opacity: 1; 199 | } 200 | 201 | @media screen and (max-width: 35em) { 202 | .codrops-icon span { 203 | display: none; 204 | } 205 | } -------------------------------------------------------------------------------- /src/css/effect1.css: -------------------------------------------------------------------------------- 1 | /*@font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'Blokk'; 5 | src: url('../fonts/blokk/BLOKKRegular.eot'); 6 | src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/blokk/BLOKKRegular.woff') format('woff'), 8 | url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg'); 9 | } 10 | 11 | @font-face { 12 | font-weight: normal; 13 | font-style: normal; 14 | font-family: 'feather'; 15 | src:url('../fonts/feather/feather.eot?-9jv4cc'); 16 | src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'), 17 | url('../fonts/feather/feather.woff?-9jv4cc') format('woff'), 18 | url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'), 19 | url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg'); 20 | }*/ 21 | 22 | .ip-header { 23 | position: fixed; 24 | top: 0; 25 | z-index: 100; 26 | min-height: 480px; 27 | width: 100%; 28 | height: 100%; 29 | background: #203880; 30 | } 31 | 32 | .ip-header h1 { 33 | margin: 0; 34 | } 35 | 36 | .ip-logo, 37 | .ip-loader { 38 | position: absolute; 39 | left: 0; 40 | width: 100%; 41 | opacity: 0; 42 | cursor: default; 43 | pointer-events: none; 44 | } 45 | 46 | .ip-logo { 47 | top: 0; 48 | height: 100%; 49 | -webkit-transform: translate3d(0,25%,0); 50 | transform: translate3d(0,25%,0); 51 | } 52 | 53 | .ip-loader { 54 | bottom: 20%; 55 | } 56 | 57 | .ip-header .ip-inner { 58 | display: block; 59 | margin: 0 auto; 60 | } 61 | 62 | .ip-header .ip-logo svg { 63 | min-width: 320px; 64 | max-width: 480px; 65 | width: 25%; 66 | } 67 | 68 | .ip-header .ip-logo svg path { 69 | fill: #fff; 70 | } 71 | 72 | .ip-header .ip-loader svg path { 73 | fill: none; 74 | stroke-width: 6; 75 | } 76 | 77 | .ip-header .ip-loader svg path.ip-loader-circlebg { 78 | stroke: #A6A6A6; 79 | } 80 | 81 | .ip-header .ip-loader svg path.ip-loader-circle { 82 | -webkit-transition: stroke-dashoffset 0.2s; 83 | transition: stroke-dashoffset 0.2s; 84 | stroke: #fff; 85 | } 86 | 87 | /* Content */ 88 | .ip-main { 89 | overflow: hidden; 90 | margin: 0 auto; 91 | padding: 160px 0 10em 0; 92 | max-width: 1100px; 93 | width: 100%; 94 | } 95 | 96 | .ip-main h2 { 97 | margin: 0; 98 | padding: 0.5em 0 1em; 99 | color: #203880; 100 | text-align: center; 101 | font-size: 4.25em; 102 | font-size: 4vw; 103 | line-height: 1; 104 | } 105 | 106 | .browser { 107 | margin: 0 auto; 108 | min-height: 400px; 109 | max-width: 1200px; 110 | width: 100%; 111 | border-radius: 8px; 112 | background-size: 100%; 113 | color: #d3d3d3; 114 | } 115 | 116 | .box { 117 | /*float: left;*/ 118 | /*padding: 2em;*/ 119 | /*width: 33.3%;*/ 120 | font-size: 0.7em; 121 | line-height: 1.5; 122 | position: relative; 123 | } 124 | 125 | .box .box-main { 126 | width: 25em; 127 | margin: 0 auto; 128 | position: relative; 129 | background-color: #fff; 130 | box-shadow: 0 1px 6px rgba(0,0,0,.3); 131 | z-index: 10; 132 | -webkit-transition: opacity 0.1s 0.5s; 133 | transition: opacity 0.1s 0.5s; 134 | } 135 | 136 | .box-img { 137 | /*position: absolute;*/ 138 | overflow: hidden; 139 | z-index: 10; 140 | } 141 | 142 | .box-img img { 143 | display: block; 144 | height: auto; 145 | /*width: 100%;*/ 146 | } 147 | 148 | .box-inner { 149 | position: relative; 150 | padding: 30px 16px; 151 | margin-top: -144px; 152 | background: #203880; 153 | } 154 | 155 | .box p { 156 | margin: 24px 0; 157 | font-size: 12px; 158 | color: #fff; /* #212121; */ 159 | } 160 | 161 | .box.open .box-main{ 162 | opacity: 0; 163 | -webkit-transition: opacity 0.1s; 164 | transition: opacity 0.1s; 165 | } 166 | 167 | .box.active .box-main { 168 | z-index: 15; 169 | } 170 | 171 | .box.active .box-content { 172 | z-index: 20; 173 | } 174 | 175 | .box .box-content { 176 | position: fixed; 177 | z-index: 5; 178 | opacity: 0; 179 | overflow: hidden; 180 | width: 25em; 181 | height: 340px; 182 | background-color: #FFF; 183 | -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 184 | transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 185 | } 186 | 187 | .box.open .box-content { 188 | opacity: 1; 189 | top: 0 !important; 190 | left: 0 !important; 191 | width: 100%; 192 | height: 100%; 193 | -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 194 | transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; 195 | } 196 | 197 | .box .box-content img { 198 | position: absolute; 199 | top: 0; 200 | left: 0; 201 | display: block; 202 | min-width: 100%; 203 | min-height: 100%; 204 | transition: 0.5s; 205 | } 206 | 207 | .box.open.detail .box-content img { 208 | -webkit-filter: blur(10px); 209 | -webkit-transform: scale(1.25); 210 | transform: scale(1.25); 211 | } 212 | 213 | .box .box-content .box-card { 214 | position: relative; 215 | width: 80%; 216 | max-width: 800px; 217 | height: 250px; 218 | margin: 450px auto 60px; 219 | padding: 30px 40px 22px; 220 | background: #203880; 221 | border-radius: 3px; 222 | cursor: pointer; 223 | transition-property: transform; 224 | transition-duration: 0.5s; 225 | -webkit-transform: translate3d(0,300px,0); 226 | transform: translate3d(0,300px,0); 227 | } 228 | 229 | .box.open .box-content .box-card { 230 | -webkit-transform: translate3d(0,0,0); 231 | transform: translate3d(0,0,0); 232 | } 233 | 234 | .box.open.detail .box-content .box-card { 235 | -webkit-transform: translate3d(0,-200px,0); 236 | transform: translate3d(0,-200px,0); 237 | } 238 | 239 | /*.box .box-content > div { 240 | visibility: hidden; 241 | height: 0; 242 | opacity: 0; 243 | -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; 244 | transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; 245 | } 246 | 247 | .box.open .box-content > div { 248 | visibility: visible; 249 | height: auto; 250 | opacity: 1; 251 | -webkit-transition: opacity 0.3s 0.5s; 252 | transition: opacity 0.3s 0.5s; 253 | }*/ 254 | 255 | .box-content .icon-close { 256 | position: absolute; 257 | top: 20px; 258 | right: 20px; 259 | border: 2px solid #f9e1c9; 260 | border-radius: 50%; 261 | line-height: 2.8; 262 | z-index: 100; 263 | display: block; 264 | overflow: hidden; 265 | width: 3em; 266 | height: 3em; 267 | text-align: center; 268 | cursor: pointer; 269 | } 270 | 271 | /* Animations */ 272 | 273 | /* Initial animation of header elements */ 274 | .loading .ip-logo, 275 | .loading .ip-loader { 276 | opacity: 1; 277 | -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; 278 | animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; 279 | } 280 | 281 | .loading .ip-loader { 282 | -webkit-animation-delay: 0.2s; 283 | animation-delay: 0.2s; 284 | } 285 | 286 | @-webkit-keyframes animInitialHeader { 287 | from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } 288 | } 289 | 290 | @keyframes animInitialHeader { 291 | from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } 292 | } 293 | 294 | /* Header elements when loading finishes */ 295 | .loaded .ip-logo, 296 | .loaded .ip-loader { 297 | opacity: 1; 298 | } 299 | 300 | .loaded .ip-logo { 301 | -webkit-transform-origin: 50% 0; 302 | transform-origin: 50% 0; 303 | -webkit-animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards; 304 | animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards; 305 | } 306 | 307 | @-webkit-keyframes animLoadedLogo { 308 | to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); } 309 | } 310 | 311 | @keyframes animLoadedLogo { 312 | to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); } 313 | } 314 | 315 | .loaded .ip-loader { 316 | -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; 317 | animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; 318 | } 319 | 320 | @-webkit-keyframes animLoadedLoader { 321 | to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } 322 | } 323 | 324 | @keyframes animLoadedLoader { 325 | to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } 326 | } 327 | 328 | /* Change the color of the logo */ 329 | .loaded .ip-logo svg path { 330 | -webkit-transition: all 0.5s ease 0.3s; 331 | transition: all 0.5s ease 0.3s; 332 | fill: #203880; 333 | } 334 | 335 | /* Header animation when loading finishes */ 336 | .loaded .ip-header { 337 | -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; 338 | animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; 339 | } 340 | 341 | @-webkit-keyframes animLoadedHeader { 342 | to { -webkit-transform: translate3d(0,-100%,0); } 343 | } 344 | 345 | @keyframes animLoadedHeader { 346 | to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } 347 | } 348 | 349 | /* Content animations */ 350 | .loaded .ip-main h2, 351 | .loaded .ip-main .browser, 352 | .loaded .ip-main .browser .box, 353 | .loaded .codrops-demos { 354 | -webkit-animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both; 355 | animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both; 356 | } 357 | 358 | .loaded .ip-main .browser, 359 | .loaded .ip-main .browser .box:first-child { 360 | -webkit-animation-delay: 0.2s; 361 | animation-delay: 0.2s; 362 | } 363 | 364 | .loaded .ip-main .browser .box:nth-child(2) { 365 | -webkit-animation-delay: 0.25s; 366 | animation-delay: 0.25s; 367 | } 368 | 369 | .loaded .ip-main .browser .box:nth-child(3) { 370 | -webkit-animation-delay: 0.3s; 371 | animation-delay: 0.3s; 372 | } 373 | 374 | @-webkit-keyframes animLoadedContent { 375 | from { opacity: 0; } /* -webkit-transform: translate3d(0,500px,0); */ 376 | } 377 | 378 | @keyframes animLoadedContent { 379 | from { opacity: 0; } /* -webkit-transform: translate3d(0,500px,0); transform: translate3d(0,500px,0); */ 380 | } 381 | 382 | /* Change layout class for header */ 383 | .layout-switch .ip-header { 384 | position: absolute; 385 | } 386 | 387 | /* No JS */ 388 | .no-js .ip-header { 389 | position: relative; 390 | min-height: 0px; 391 | } 392 | 393 | .no-js .ip-header .ip-logo { 394 | margin-top: 20px; 395 | height: 180px; 396 | opacity: 1; 397 | -webkit-transform: none; 398 | transform: none; 399 | } 400 | 401 | .no-js .ip-header .ip-logo svg path { 402 | fill: #fff; 403 | } 404 | 405 | /* Media queries */ 406 | 407 | @media screen and (max-width: 45em) { 408 | 409 | .ip-main h2 { 410 | font-size: 2.25em; 411 | font-size: 10vw; 412 | } 413 | 414 | .box { 415 | width: 100%%; 416 | } 417 | 418 | } -------------------------------------------------------------------------------- /src/css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /src/www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Transition 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | --------------------------------------------------------------------------------