feat: 项目基础框架+配置+Kernel
This commit is contained in:
testadmin
@@ -0,0 +1,102 @@
|
||||
/* Header */
|
||||
.large-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #333;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.demo-1 .large-header {
|
||||
background-image: url('../img/demo-1-bg.jpg');
|
||||
}
|
||||
|
||||
.demo-2 .large-header {
|
||||
background-image: url('../img/demo-2-bg.jpg');
|
||||
background-position: center bottom;
|
||||
}
|
||||
|
||||
.demo-3 .large-header {
|
||||
background: #7f8c8d;
|
||||
}
|
||||
|
||||
.demo-4 .large-header {
|
||||
background: #f9f1e9;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #f9f1e9;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate3d(-50%,-50%,0);
|
||||
transform: translate3d(-50%,-50%,0);
|
||||
}
|
||||
|
||||
.demo-1 .main-title,
|
||||
.demo-3 .main-title {
|
||||
text-transform: uppercase;
|
||||
font-size: 4.2em;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.demo-2 .main-title {
|
||||
font-family: 'Clicker Script', cursive;
|
||||
font-weight: normal;
|
||||
font-size: 8em;
|
||||
padding-left: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.demo-2 .main-title::before {
|
||||
content: '';
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
min-width: 3.5em;
|
||||
min-height: 3.5em;
|
||||
background: url(../img/deco.svg) no-repeat center center;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
-webkit-transform: translate3d(-50%,-50%,0);
|
||||
transform: translate3d(-50%,-50%,0);
|
||||
}
|
||||
|
||||
.demo-3 .main-title {
|
||||
padding: 10px 40px;
|
||||
border: 10px double #f9f1e9;
|
||||
text-transform: uppercase;
|
||||
font-family: Londrina Outline, sans-serif;
|
||||
}
|
||||
|
||||
.demo-4 .main-title {
|
||||
font-size: 6em;
|
||||
font-weight: 300;
|
||||
padding: 10px 30px;
|
||||
text-transform: uppercase;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.main-title .thin {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 768px) {
|
||||
.demo-1 .main-title,
|
||||
.demo-3 .main-title,
|
||||
.demo-4 .main-title {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.demo-2 .main-title {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
@font-face {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'codropsicons';
|
||||
src:url('../fonts/codropsicons/codropsicons.eot');
|
||||
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
|
||||
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
|
||||
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
|
||||
}
|
||||
|
||||
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
|
||||
.clearfix:before, .clearfix:after { content: ''; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
color: #383a3c;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
font-family: 'Raleway', Calibri, Arial, sans-serif;
|
||||
}
|
||||
|
||||
a, button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #566473;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.ref {
|
||||
text-align: center;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.codrops-header {
|
||||
margin: 0 auto;
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.codrops-header h1 {
|
||||
margin: 0;
|
||||
font-size: 4.5em;
|
||||
line-height: 1;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.codrops-header h1 span {
|
||||
display: block;
|
||||
padding: 1em 0 1.5em;
|
||||
font-size: 36%;
|
||||
color: #95a5a6;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* To Navigation Style */
|
||||
.codrops-top {
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 0.69em;
|
||||
text-align: center;
|
||||
padding: 3em 0;
|
||||
}
|
||||
|
||||
.codrops-top a {
|
||||
display: inline-block;
|
||||
padding: 1.5em;
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.codrops-icon:before {
|
||||
margin: 0 4px;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-family: 'codropsicons';
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.codrops-icon-drop:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.codrops-icon-prev:before {
|
||||
content: "\e004";
|
||||
}
|
||||
|
||||
/* Demo Buttons Style */
|
||||
.codrops-demos {
|
||||
padding-top: 1em;
|
||||
font-size: 0.8em;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.codrops-demos a {
|
||||
display: inline-block;
|
||||
margin: 0.35em 0.1em;
|
||||
padding: 0.5em 1.2em;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
border-radius: 2px;
|
||||
font-size: 110%;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.codrops-demos a:hover,
|
||||
.codrops-demos a.current-demo {
|
||||
border-color: #383a3c;
|
||||
}
|
||||
|
||||
.codrops-demos h3 {
|
||||
margin: 0;
|
||||
padding: 1em 0 0.5em 0;
|
||||
font-size: 0.9em;
|
||||
float: left;
|
||||
min-width: 90px;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.codrops-demos div:not(:first-child) h3 {
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.codrops-demos a:hover,
|
||||
.codrops-demos a.current-demo {
|
||||
color: inherit;
|
||||
border-color: initial;
|
||||
}
|
||||
|
||||
/* Related demos */
|
||||
.related {
|
||||
padding: 10em 0;
|
||||
}
|
||||
|
||||
.related p {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.related > a {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 20px 10px;
|
||||
padding: 25px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.related a img {
|
||||
max-width: 100%;
|
||||
opacity: 0.8;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.related a:hover img,
|
||||
.related a:active img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.related a h3 {
|
||||
margin: 0;
|
||||
min-height: 63px;
|
||||
padding: 0.5em 0 0.3em;
|
||||
max-width: 300px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
|
||||
.codrops-header h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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;}
|
||||
Binary file not shown.
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="14"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="codropsicons" horiz-adv-x="448" >
|
||||
<font-face units-per-em="448" ascent="384" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="448" />
|
||||
<glyph unicode="" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z" />
|
||||
<glyph unicode="" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545
|
||||
l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
|
||||
c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z" />
|
||||
<glyph unicode="" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
|
||||
M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
|
||||
s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
|
||||
c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z" />
|
||||
<glyph unicode=" " horiz-adv-x="224" />
|
||||
<glyph class="hidden" unicode="" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,6 @@
|
||||
Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
|
||||
License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
|
||||
|
||||
|
||||
Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
|
||||
License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
@@ -0,0 +1,12 @@
|
||||
/*!
|
||||
* VERSION: beta 1.9.4
|
||||
* DATE: 2014-07-17
|
||||
* UPDATES AND DOCS AT: http://www.greensock.com
|
||||
*
|
||||
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
|
||||
* This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
|
||||
* Club GreenSock members, the software agreement that was issued with your membership.
|
||||
*
|
||||
* @author: Jack Doyle, jack@greensock.com
|
||||
**/
|
||||
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,185 @@
|
||||
(function() {
|
||||
|
||||
var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
|
||||
|
||||
// Main
|
||||
initHeader();
|
||||
initAnimation();
|
||||
addListeners();
|
||||
|
||||
function initHeader() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
target = {x: width/2, y: height/2};
|
||||
|
||||
largeHeader = document.getElementById('large-header');
|
||||
largeHeader.style.height = height+'px';
|
||||
|
||||
canvas = document.getElementById('demo-canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// create points
|
||||
points = [];
|
||||
for(var x = 0; x < width; x = x + width/20) {
|
||||
for(var y = 0; y < height; y = y + height/20) {
|
||||
var px = x + Math.random()*width/20;
|
||||
var py = y + Math.random()*height/20;
|
||||
var p = {x: px, originX: px, y: py, originY: py };
|
||||
points.push(p);
|
||||
}
|
||||
}
|
||||
|
||||
// for each point find the 5 closest points
|
||||
for(var i = 0; i < points.length; i++) {
|
||||
var closest = [];
|
||||
var p1 = points[i];
|
||||
for(var j = 0; j < points.length; j++) {
|
||||
var p2 = points[j]
|
||||
if(!(p1 == p2)) {
|
||||
var placed = false;
|
||||
for(var k = 0; k < 5; k++) {
|
||||
if(!placed) {
|
||||
if(closest[k] == undefined) {
|
||||
closest[k] = p2;
|
||||
placed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(var k = 0; k < 5; k++) {
|
||||
if(!placed) {
|
||||
if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
|
||||
closest[k] = p2;
|
||||
placed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
p1.closest = closest;
|
||||
}
|
||||
|
||||
// assign a circle to each point
|
||||
for(var i in points) {
|
||||
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
|
||||
points[i].circle = c;
|
||||
}
|
||||
}
|
||||
|
||||
// Event handling
|
||||
function addListeners() {
|
||||
if(!('ontouchstart' in window)) {
|
||||
window.addEventListener('mousemove', mouseMove);
|
||||
}
|
||||
window.addEventListener('scroll', scrollCheck);
|
||||
window.addEventListener('resize', resize);
|
||||
}
|
||||
|
||||
function mouseMove(e) {
|
||||
var posx = posy = 0;
|
||||
if (e.pageX || e.pageY) {
|
||||
posx = e.pageX;
|
||||
posy = e.pageY;
|
||||
}
|
||||
else if (e.clientX || e.clientY) {
|
||||
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
||||
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
||||
}
|
||||
target.x = posx;
|
||||
target.y = posy;
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
if(document.body.scrollTop > height) animateHeader = false;
|
||||
else animateHeader = true;
|
||||
}
|
||||
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
largeHeader.style.height = height+'px';
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
|
||||
// animation
|
||||
function initAnimation() {
|
||||
animate();
|
||||
for(var i in points) {
|
||||
shiftPoint(points[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if(animateHeader) {
|
||||
ctx.clearRect(0,0,width,height);
|
||||
for(var i in points) {
|
||||
// detect points in range
|
||||
if(Math.abs(getDistance(target, points[i])) < 4000) {
|
||||
points[i].active = 0.3;
|
||||
points[i].circle.active = 0.6;
|
||||
} else if(Math.abs(getDistance(target, points[i])) < 20000) {
|
||||
points[i].active = 0.1;
|
||||
points[i].circle.active = 0.3;
|
||||
} else if(Math.abs(getDistance(target, points[i])) < 40000) {
|
||||
points[i].active = 0.02;
|
||||
points[i].circle.active = 0.1;
|
||||
} else {
|
||||
points[i].active = 0;
|
||||
points[i].circle.active = 0;
|
||||
}
|
||||
|
||||
drawLines(points[i]);
|
||||
points[i].circle.draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function shiftPoint(p) {
|
||||
TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
|
||||
y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
|
||||
onComplete: function() {
|
||||
shiftPoint(p);
|
||||
}});
|
||||
}
|
||||
|
||||
// Canvas manipulation
|
||||
function drawLines(p) {
|
||||
if(!p.active) return;
|
||||
for(var i in p.closest) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(p.x, p.y);
|
||||
ctx.lineTo(p.closest[i].x, p.closest[i].y);
|
||||
ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function Circle(pos,rad,color) {
|
||||
var _this = this;
|
||||
|
||||
// constructor
|
||||
(function() {
|
||||
_this.pos = pos || null;
|
||||
_this.radius = rad || null;
|
||||
_this.color = color || null;
|
||||
})();
|
||||
|
||||
this.draw = function() {
|
||||
if(!_this.active) return;
|
||||
ctx.beginPath();
|
||||
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')';
|
||||
ctx.fill();
|
||||
};
|
||||
}
|
||||
|
||||
// Util
|
||||
function getDistance(p1, p2) {
|
||||
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,92 @@
|
||||
(function() {
|
||||
|
||||
var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
|
||||
|
||||
// Main
|
||||
initHeader();
|
||||
addListeners();
|
||||
|
||||
function initHeader() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
target = {x: 0, y: height};
|
||||
|
||||
largeHeader = document.getElementById('large-header');
|
||||
largeHeader.style.height = height+'px';
|
||||
|
||||
canvas = document.getElementById('demo-canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// create particles
|
||||
circles = [];
|
||||
for(var x = 0; x < width*0.5; x++) {
|
||||
var c = new Circle();
|
||||
circles.push(c);
|
||||
}
|
||||
animate();
|
||||
}
|
||||
|
||||
// Event handling
|
||||
function addListeners() {
|
||||
window.addEventListener('scroll', scrollCheck);
|
||||
window.addEventListener('resize', resize);
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
if(document.body.scrollTop > height) animateHeader = false;
|
||||
else animateHeader = true;
|
||||
}
|
||||
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
largeHeader.style.height = height+'px';
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if(animateHeader) {
|
||||
ctx.clearRect(0,0,width,height);
|
||||
for(var i in circles) {
|
||||
circles[i].draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// Canvas manipulation
|
||||
function Circle() {
|
||||
var _this = this;
|
||||
|
||||
// constructor
|
||||
(function() {
|
||||
_this.pos = {};
|
||||
init();
|
||||
console.log(_this);
|
||||
})();
|
||||
|
||||
function init() {
|
||||
_this.pos.x = Math.random()*width;
|
||||
_this.pos.y = height+Math.random()*100;
|
||||
_this.alpha = 0.1+Math.random()*0.3;
|
||||
_this.scale = 0.1+Math.random()*0.3;
|
||||
_this.velocity = Math.random();
|
||||
}
|
||||
|
||||
this.draw = function() {
|
||||
if(_this.alpha <= 0) {
|
||||
init();
|
||||
}
|
||||
_this.pos.y -= _this.velocity;
|
||||
_this.alpha -= 0.0005;
|
||||
ctx.beginPath();
|
||||
ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
|
||||
ctx.fill();
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,126 @@
|
||||
(function() {
|
||||
|
||||
var width, height, largeHeader, canvas, ctx, triangles, target, animateHeader = true;
|
||||
var colors = ['72,35,68', '43,81,102', '66,152,103', '250,178,67', '224,33,48'];
|
||||
|
||||
// Main
|
||||
initHeader();
|
||||
addListeners();
|
||||
initAnimation();
|
||||
|
||||
function initHeader() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
target = {x: 0, y: height};
|
||||
|
||||
largeHeader = document.getElementById('large-header');
|
||||
largeHeader.style.height = height+'px';
|
||||
|
||||
canvas = document.getElementById('demo-canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// create particles
|
||||
triangles = [];
|
||||
for(var x = 0; x < 480; x++) {
|
||||
addTriangle(x*10);
|
||||
}
|
||||
}
|
||||
|
||||
function addTriangle(delay) {
|
||||
setTimeout(function() {
|
||||
var t = new Triangle();
|
||||
triangles.push(t);
|
||||
tweenTriangle(t);
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function initAnimation() {
|
||||
animate();
|
||||
}
|
||||
|
||||
function tweenTriangle(tri) {
|
||||
var t = Math.random()*(2*Math.PI);
|
||||
var x = (200+Math.random()*100)*Math.cos(t) + width*0.5;
|
||||
var y = (200+Math.random()*100)*Math.sin(t) + height*0.5-20;
|
||||
var time = 4+3*Math.random();
|
||||
|
||||
TweenLite.to(tri.pos, time, {x: x,
|
||||
y: y, ease:Circ.easeOut,
|
||||
onComplete: function() {
|
||||
tri.init();
|
||||
tweenTriangle(tri);
|
||||
}});
|
||||
}
|
||||
|
||||
// Event handling
|
||||
function addListeners() {
|
||||
window.addEventListener('scroll', scrollCheck);
|
||||
window.addEventListener('resize', resize);
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
if(document.body.scrollTop > height) animateHeader = false;
|
||||
else animateHeader = true;
|
||||
}
|
||||
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
largeHeader.style.height = height+'px';
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if(animateHeader) {
|
||||
ctx.clearRect(0,0,width,height);
|
||||
for(var i in triangles) {
|
||||
triangles[i].draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// Canvas manipulation
|
||||
function Triangle() {
|
||||
var _this = this;
|
||||
|
||||
// constructor
|
||||
(function() {
|
||||
_this.coords = [{},{},{}];
|
||||
_this.pos = {};
|
||||
init();
|
||||
})();
|
||||
|
||||
function init() {
|
||||
_this.pos.x = width*0.5;
|
||||
_this.pos.y = height*0.5-20;
|
||||
_this.coords[0].x = -10+Math.random()*40;
|
||||
_this.coords[0].y = -10+Math.random()*40;
|
||||
_this.coords[1].x = -10+Math.random()*40;
|
||||
_this.coords[1].y = -10+Math.random()*40;
|
||||
_this.coords[2].x = -10+Math.random()*40;
|
||||
_this.coords[2].y = -10+Math.random()*40;
|
||||
_this.scale = 0.1+Math.random()*0.3;
|
||||
_this.color = colors[Math.floor(Math.random()*colors.length)];
|
||||
setTimeout(function() { _this.alpha = 0.8; }, 10);
|
||||
}
|
||||
|
||||
this.draw = function() {
|
||||
if(_this.alpha >= 0.005) _this.alpha -= 0.005;
|
||||
else _this.alpha = 0;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(_this.coords[0].x+_this.pos.x, _this.coords[0].y+_this.pos.y);
|
||||
ctx.lineTo(_this.coords[1].x+_this.pos.x, _this.coords[1].y+_this.pos.y);
|
||||
ctx.lineTo(_this.coords[2].x+_this.pos.x, _this.coords[2].y+_this.pos.y);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = 'rgba('+_this.color+','+ _this.alpha+')';
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
this.init = init;
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,100 @@
|
||||
(function() {
|
||||
|
||||
var width, height, largeHeader, canvas, ctx, lines, target, size, animateHeader = true;
|
||||
|
||||
// Main
|
||||
initHeader();
|
||||
addListeners();
|
||||
initAnimation();
|
||||
|
||||
function initHeader() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
size = width > height ? height : width;
|
||||
target = {x: 0, y: height};
|
||||
|
||||
largeHeader = document.getElementById('large-header');
|
||||
largeHeader.style.height = height+'px';
|
||||
|
||||
canvas = document.getElementById('demo-canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
// create particles
|
||||
lines = [];
|
||||
for(var i = 0; i < 90; i++) {
|
||||
var l = new Line(Math.random()*360);
|
||||
lines.push(l);
|
||||
}
|
||||
}
|
||||
|
||||
function initAnimation() {
|
||||
animate();
|
||||
}
|
||||
|
||||
// Event handling
|
||||
function addListeners() {
|
||||
window.addEventListener('scroll', scrollCheck);
|
||||
window.addEventListener('resize', resize);
|
||||
}
|
||||
|
||||
function scrollCheck() {
|
||||
if(document.body.scrollTop > height) animateHeader = false;
|
||||
else animateHeader = true;
|
||||
}
|
||||
|
||||
function resize() {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
size = width > height ? height : width;
|
||||
largeHeader.style.height = height+'px';
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if(animateHeader) {
|
||||
ctx.clearRect(0,0,width,height);
|
||||
for(var i in lines) {
|
||||
lines[i].draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// Canvas manipulation
|
||||
function Line(angle) {
|
||||
var _this = this;
|
||||
|
||||
// constructor
|
||||
(function() {
|
||||
_this.angle = angle;
|
||||
|
||||
})();
|
||||
|
||||
this.draw = function() {
|
||||
|
||||
var r1 = Math.random()*(size < 400 ? 400 : size)*0.4;
|
||||
var r2 = Math.random()*(size < 400 ? 400 : size)*0.4;
|
||||
var x1 = r1*Math.cos(_this.angle*(Math.PI/180)) + width*0.5;
|
||||
var y1 = r1*Math.sin(_this.angle*(Math.PI/180)) + height*0.48;
|
||||
var x2 = r2*Math.cos(_this.angle*(Math.PI/180)) + width*0.5;
|
||||
var y2 = r2*Math.sin(_this.angle*(Math.PI/180)) + height*0.48;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.strokeStyle = 'rgba(255,193,127,'+(0.5+Math.random()*0.5)+')';
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x1, y1, 2, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = 'rgba(255,165,70,'+(0.5+Math.random()*0.5)+')';
|
||||
ctx.fill();
|
||||
|
||||
_this.angle += Math.random();
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,8 @@
|
||||
/*
|
||||
HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
*/
|
||||
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
|
||||
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
|
||||
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
|
||||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);
|
||||
if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
|
||||
@@ -0,0 +1,31 @@
|
||||
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
||||
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
|
||||
|
||||
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
|
||||
|
||||
// MIT license
|
||||
|
||||
(function() {
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|
||||
|| window[vendors[x]+'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame)
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
|
||||
timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
|
||||
if (!window.cancelAnimationFrame)
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}());
|
||||
Reference in New Issue
Block a user