├── fonts ├── icomoon.eot ├── icomoon.ttf ├── icomoon.woff └── icomoon.svg ├── 3d ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ └── icomoon.svg ├── img │ ├── photo-1445810694374-0a94739e4a03.jpg │ ├── photo-1486334803289-1623f249dd1e.jpg │ ├── photo-1488190211105-8b0e65b80b4e.jpg │ ├── photo-1506045412240-22980140a405.jpg │ ├── photo-1514041181368-bca62cceffcd.jpg │ └── photo-1515260268569-9271009adfdb.jpg └── css │ ├── normalize.css │ ├── style.css │ └── htmleaf-demo.css ├── img └── Alien_logo.png ├── game ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ └── icomoon.svg ├── css │ ├── normalize.css │ └── default.css └── js │ └── BlockBlaster.js ├── sky ├── fonts │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ └── icomoon.svg ├── css │ ├── normalize.css │ └── htmleaf-demo.css ├── sky.html └── js │ ├── jquery.warpdrive.min.js │ └── jquery.warpdrive.js ├── game.html ├── css ├── normalize.css └── htmleaf-demo.css ├── 3d.html ├── sky.html ├── js ├── jquery.warpdrive.min.js └── jquery.warpdrive.js └── index.html /fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/fonts/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/fonts/icomoon.ttf -------------------------------------------------------------------------------- /3d/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/fonts/icomoon.eot -------------------------------------------------------------------------------- /3d/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/fonts/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/fonts/icomoon.woff -------------------------------------------------------------------------------- /img/Alien_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/img/Alien_logo.png -------------------------------------------------------------------------------- /3d/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/fonts/icomoon.woff -------------------------------------------------------------------------------- /game/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/game/fonts/icomoon.eot -------------------------------------------------------------------------------- /game/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/game/fonts/icomoon.ttf -------------------------------------------------------------------------------- /sky/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/sky/fonts/icomoon.eot -------------------------------------------------------------------------------- /sky/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/sky/fonts/icomoon.ttf -------------------------------------------------------------------------------- /sky/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/sky/fonts/icomoon.woff -------------------------------------------------------------------------------- /game/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/game/fonts/icomoon.woff -------------------------------------------------------------------------------- /3d/img/photo-1445810694374-0a94739e4a03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/img/photo-1445810694374-0a94739e4a03.jpg -------------------------------------------------------------------------------- /3d/img/photo-1486334803289-1623f249dd1e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/img/photo-1486334803289-1623f249dd1e.jpg -------------------------------------------------------------------------------- /3d/img/photo-1488190211105-8b0e65b80b4e.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/img/photo-1488190211105-8b0e65b80b4e.jpg -------------------------------------------------------------------------------- /3d/img/photo-1506045412240-22980140a405.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/img/photo-1506045412240-22980140a405.jpg -------------------------------------------------------------------------------- /3d/img/photo-1514041181368-bca62cceffcd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/img/photo-1514041181368-bca62cceffcd.jpg -------------------------------------------------------------------------------- /3d/img/photo-1515260268569-9271009adfdb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smallAntcxq/animations/HEAD/3d/img/photo-1515260268569-9271009adfdb.jpg -------------------------------------------------------------------------------- /game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 打方块小游戏 8 | 9 | 10 | 13 | 14 | 15 |
16 |
17 |

HTML5 canvas高性能打方块小游戏

18 |
19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /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;} -------------------------------------------------------------------------------- /3d/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;} -------------------------------------------------------------------------------- /game/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;} -------------------------------------------------------------------------------- /sky/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;} -------------------------------------------------------------------------------- /3d/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /sky/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /game/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /3d/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Full-page view: 4 | 5 | https://codepen.io/GeorgePark/full/gegavO/ 6 | 7 | */ 8 | 9 | /* @import url(https://fonts.googleapis.com/css?family=Montserrat:500); */ 10 | 11 | :root { 12 | /* Base font size */ 13 | font-size: 10px; 14 | 15 | /* Border color variable */ 16 | --border-color: #e70; 17 | } 18 | 19 | * { 20 | box-sizing: border-box; 21 | } 22 | 23 | body { 24 | font-family: "Montserrat", Arial, sans-serif; 25 | font-weight: 500; 26 | line-height: 1.5; 27 | text-align: center; 28 | min-height: 100vh; 29 | /* padding: 4rem 2rem; */ 30 | color: #fafafa; 31 | /* background-color: #080808; */ 32 | } 33 | 34 | h1 { 35 | /* font-size: 4rem; */ 36 | } 37 | 38 | h2 { 39 | font-size: 2rem; 40 | margin-bottom: 2.5rem; 41 | } 42 | 43 | .cube-container { 44 | position: relative; 45 | width: 30rem; 46 | height: 30rem; 47 | margin: 5rem auto 6rem; 48 | perspective: 100rem; 49 | } 50 | 51 | .cube { 52 | position: absolute; 53 | width: 100%; 54 | height: 100%; 55 | transform-style: preserve-3d; 56 | transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6); 57 | } 58 | 59 | .cube-face-image { 60 | display: block; 61 | position: absolute; 62 | /* opacity: 0.95; */ 63 | /* border: 0.2rem solid #fafafa; */ 64 | box-shadow: 0 0 0.5rem #fff, 65 | 0 0 1.5rem var(--border-color), 66 | 0 0 3rem var(--border-color); 67 | } 68 | 69 | .image-buttons { 70 | display: grid; 71 | grid-template-columns: repeat(3, auto); 72 | grid-gap: 1.5rem; 73 | justify-content: center; 74 | margin-bottom:50px; 75 | } 76 | 77 | .image-buttons input { 78 | width: 100px; 79 | border: 0.2rem solid #fafafa; 80 | } 81 | 82 | .image-buttons input:focus { 83 | outline: none; 84 | border: 0.2rem solid var(--border-color); 85 | } 86 | 87 | /* Transform images to create cube */ 88 | 89 | .image-1 { 90 | transform: translateZ(15rem); 91 | } 92 | 93 | .image-2 { 94 | transform: rotateX(-180deg) translateZ(15rem); 95 | } 96 | 97 | .image-3 { 98 | transform: rotateY(90deg) translateZ(15rem); 99 | } 100 | 101 | .image-4 { 102 | transform: rotateY(-90deg) translateZ(15rem); 103 | } 104 | 105 | .image-5 { 106 | transform: rotateX(90deg) translateZ(15rem); 107 | } 108 | 109 | .image-6 { 110 | transform: rotateX(-90deg) translateZ(15rem); 111 | } 112 | 113 | /* Transform cube to show correct image */ 114 | 115 | .cube.initial-position { 116 | transform: translateZ(-15rem) translateY(-2rem) rotateX(-15deg) rotateY(18deg) rotateZ(2deg); 117 | } 118 | 119 | .cube.show-image-1 { 120 | transform: translateZ(-15rem); 121 | } 122 | 123 | .cube.show-image-2 { 124 | transform: translateZ(-15rem) rotateX(180deg); 125 | } 126 | 127 | .cube.show-image-3 { 128 | transform: translateZ(-15rem) rotateY(-90deg); 129 | } 130 | 131 | .cube.show-image-4 { 132 | transform: translateZ(-15rem) rotateY(90deg); 133 | } 134 | 135 | .cube.show-image-5 { 136 | transform: translateZ(-15rem) rotateX(-90deg); 137 | } 138 | 139 | .cube.show-image-6 { 140 | transform: translateZ(-15rem) rotateX(90deg); 141 | } 142 | -------------------------------------------------------------------------------- /3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 画廊特效 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

js和CSS3 3D立方体图片画廊特效

16 |
17 |

3D Cube Image Gallery

18 |
19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 |

点击下面的图片来旋转立方体

39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 | 57 | 88 | 89 | -------------------------------------------------------------------------------- /sky.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 炫酷星空 8 | 9 | 10 | 31 | 32 | 33 |
34 |
35 |

HTML5 canvas炫酷星空背景特效

36 |
37 |
38 |
39 |
40 |

鼠标hover画布查看加速动画效果。

41 |
42 | 43 | 44 | 45 | 46 | 117 | 118 | -------------------------------------------------------------------------------- /sky/sky.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | canvas实现炫酷星空背景特效 8 | 9 | 10 | 31 | 32 | 33 |
34 |
35 |

HTML5 canvas炫酷星空背景特效

36 |
37 |
38 |
39 |
40 |

鼠标hover画布查看加速动画效果。

41 |
42 | 43 | 44 | 45 | 46 | 117 | 118 | -------------------------------------------------------------------------------- /css/htmleaf-demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('../fonts/icomoon.eot?rretjt'); 4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), 5 | url('../fonts/icomoon.woff?rretjt') format('woff'), 6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'), 7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | font-family: 'icomoon'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | body, html { font-size: 100%; padding: 0; margin: 0;} 27 | 28 | /* Reset */ 29 | *, 30 | *:after, 31 | *:before { 32 | -webkit-box-sizing: border-box; 33 | -moz-box-sizing: border-box; 34 | box-sizing: border-box; 35 | } 36 | 37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 38 | .clearfix:before, 39 | .clearfix:after { 40 | content: " "; 41 | display: table; 42 | } 43 | 44 | .clearfix:after { 45 | clear: both; 46 | } 47 | 48 | body{ 49 | background: #494A5F; 50 | color: #D5D6E2; 51 | font-weight: 500; 52 | font-size: 1.05em; 53 | font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; 54 | } 55 | a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;} 56 | a:hover,a:focus{color:#74777b;text-decoration: none;} 57 | .htmleaf-container{ 58 | margin: 0 auto; 59 | } 60 | 61 | .bgcolor-1 { background: #f0efee; } 62 | .bgcolor-2 { background: #f9f9f9; } 63 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ 64 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ 65 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ 66 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ 67 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ 68 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ 69 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ 70 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ 71 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ 72 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ 73 | .bgcolor-20{ background: #494A5F;color: #D5D6E2;} 74 | /* Header */ 75 | .htmleaf-header{ 76 | padding: 1em 190px 1em; 77 | letter-spacing: -1px; 78 | text-align: center; 79 | background: #66677c; 80 | } 81 | .htmleaf-header h1 { 82 | color: #D5D6E2; 83 | font-weight: 600; 84 | font-size: 2em; 85 | line-height: 1; 86 | margin-bottom: 0; 87 | } 88 | .htmleaf-header h1 span { 89 | display: block; 90 | font-size: 60%; 91 | font-weight: 400; 92 | padding: 0.8em 0 0.5em 0; 93 | color: #c3c8cd; 94 | } 95 | /*nav*/ 96 | .htmleaf-demo a{color: #fff;text-decoration: none;} 97 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} 98 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;} 99 | .htmleaf-demo a:hover{opacity: 0.6;} 100 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } 101 | /* Top Navigation Style */ 102 | .htmleaf-links { 103 | position: relative; 104 | display: inline-block; 105 | white-space: nowrap; 106 | font-size: 1.5em; 107 | text-align: center; 108 | } 109 | 110 | .htmleaf-links::after { 111 | position: absolute; 112 | top: 0; 113 | left: 50%; 114 | margin-left: -1px; 115 | width: 2px; 116 | height: 100%; 117 | background: #dbdbdb; 118 | content: ''; 119 | -webkit-transform: rotate3d(0,0,1,22.5deg); 120 | transform: rotate3d(0,0,1,22.5deg); 121 | } 122 | 123 | .htmleaf-icon { 124 | display: inline-block; 125 | margin: 0.5em; 126 | padding: 0em 0; 127 | width: 1.5em; 128 | text-decoration: none; 129 | } 130 | 131 | .htmleaf-icon span { 132 | display: none; 133 | } 134 | 135 | .htmleaf-icon:before { 136 | margin: 0 5px; 137 | text-transform: none; 138 | font-weight: normal; 139 | font-style: normal; 140 | font-variant: normal; 141 | font-family: 'icomoon'; 142 | line-height: 1; 143 | speak: none; 144 | -webkit-font-smoothing: antialiased; 145 | } 146 | /* footer */ 147 | .htmleaf-footer{width: 100%;padding-top: 10px;} 148 | .htmleaf-small{font-size: 0.8em;} 149 | .center{text-align: center;} 150 | /****/ 151 | .related { 152 | color: #fff; 153 | background: #494A5F; 154 | text-align: center; 155 | font-size: 1.25em; 156 | padding: 0.5em 0; 157 | overflow: hidden; 158 | } 159 | 160 | .related > a { 161 | vertical-align: top; 162 | width: calc(100% - 20px); 163 | max-width: 340px; 164 | display: inline-block; 165 | text-align: center; 166 | margin: 20px 10px; 167 | padding: 25px; 168 | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; 169 | } 170 | .related a { 171 | display: inline-block; 172 | text-align: left; 173 | margin: 20px auto; 174 | padding: 10px 20px; 175 | opacity: 0.8; 176 | -webkit-transition: opacity 0.3s; 177 | transition: opacity 0.3s; 178 | -webkit-backface-visibility: hidden; 179 | } 180 | 181 | .related a:hover, 182 | .related a:active { 183 | opacity: 1; 184 | } 185 | 186 | .related a img { 187 | max-width: 100%; 188 | opacity: 0.8; 189 | border-radius: 4px; 190 | } 191 | .related a:hover img, 192 | .related a:active img { 193 | opacity: 1; 194 | } 195 | .related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em} 196 | .related a h3 { 197 | font-size: 0.85em; 198 | font-weight: 300; 199 | margin-top: 0.15em; 200 | color: #fff; 201 | } 202 | /* icomoon */ 203 | .icon-htmleaf-home-outline:before { 204 | content: "\e5000"; 205 | } 206 | 207 | .icon-htmleaf-arrow-forward-outline:before { 208 | content: "\e5001"; 209 | } 210 | 211 | @media screen and (max-width: 1024px) { 212 | .htmleaf-header { 213 | padding: 2em 10% 2em; 214 | } 215 | .htmleaf-header h1 { 216 | font-size:1.4em; 217 | } 218 | .htmleaf-links{font-size: 1.4em} 219 | } 220 | 221 | @media screen and (max-width: 960px) { 222 | .htmleaf-header { 223 | padding: 2em 10% 2em; 224 | } 225 | .htmleaf-header h1 { 226 | font-size:1.2em; 227 | } 228 | .htmleaf-links{font-size: 1.2em} 229 | .related h3{font-size: 1em;} 230 | .related a h3 { 231 | font-size: 0.8em; 232 | } 233 | } 234 | 235 | @media screen and (max-width: 766px) { 236 | .htmleaf-header h1 { 237 | font-size:1.3em; 238 | } 239 | .htmleaf-links{font-size: 1.3em} 240 | } 241 | 242 | @media screen and (max-width: 640px) { 243 | .htmleaf-header { 244 | padding: 2em 10% 2em; 245 | } 246 | .htmleaf-header h1 { 247 | font-size:1em; 248 | } 249 | .htmleaf-links{font-size: 1em} 250 | .related h3{font-size: 0.8em;} 251 | .related a h3 { 252 | font-size: 0.6em; 253 | } 254 | } -------------------------------------------------------------------------------- /sky/css/htmleaf-demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('../fonts/icomoon.eot?rretjt'); 4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), 5 | url('../fonts/icomoon.woff?rretjt') format('woff'), 6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'), 7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | font-family: 'icomoon'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | body, html { font-size: 100%; padding: 0; margin: 0;} 27 | 28 | /* Reset */ 29 | *, 30 | *:after, 31 | *:before { 32 | -webkit-box-sizing: border-box; 33 | -moz-box-sizing: border-box; 34 | box-sizing: border-box; 35 | } 36 | 37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 38 | .clearfix:before, 39 | .clearfix:after { 40 | content: " "; 41 | display: table; 42 | } 43 | 44 | .clearfix:after { 45 | clear: both; 46 | } 47 | 48 | body{ 49 | background: #494A5F; 50 | color: #D5D6E2; 51 | font-weight: 500; 52 | font-size: 1.05em; 53 | font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; 54 | } 55 | a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;} 56 | a:hover,a:focus{color:#74777b;text-decoration: none;} 57 | .htmleaf-container{ 58 | margin: 0 auto; 59 | } 60 | 61 | .bgcolor-1 { background: #f0efee; } 62 | .bgcolor-2 { background: #f9f9f9; } 63 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ 64 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ 65 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ 66 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ 67 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ 68 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ 69 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ 70 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ 71 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ 72 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ 73 | .bgcolor-20{ background: #494A5F;color: #D5D6E2;} 74 | /* Header */ 75 | .htmleaf-header{ 76 | padding: 1em 190px 1em; 77 | letter-spacing: -1px; 78 | text-align: center; 79 | background: #66677c; 80 | } 81 | .htmleaf-header h1 { 82 | color: #D5D6E2; 83 | font-weight: 600; 84 | font-size: 2em; 85 | line-height: 1; 86 | margin-bottom: 0; 87 | } 88 | .htmleaf-header h1 span { 89 | display: block; 90 | font-size: 60%; 91 | font-weight: 400; 92 | padding: 0.8em 0 0.5em 0; 93 | color: #c3c8cd; 94 | } 95 | /*nav*/ 96 | .htmleaf-demo a{color: #fff;text-decoration: none;} 97 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} 98 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;} 99 | .htmleaf-demo a:hover{opacity: 0.6;} 100 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } 101 | /* Top Navigation Style */ 102 | .htmleaf-links { 103 | position: relative; 104 | display: inline-block; 105 | white-space: nowrap; 106 | font-size: 1.5em; 107 | text-align: center; 108 | } 109 | 110 | .htmleaf-links::after { 111 | position: absolute; 112 | top: 0; 113 | left: 50%; 114 | margin-left: -1px; 115 | width: 2px; 116 | height: 100%; 117 | background: #dbdbdb; 118 | content: ''; 119 | -webkit-transform: rotate3d(0,0,1,22.5deg); 120 | transform: rotate3d(0,0,1,22.5deg); 121 | } 122 | 123 | .htmleaf-icon { 124 | display: inline-block; 125 | margin: 0.5em; 126 | padding: 0em 0; 127 | width: 1.5em; 128 | text-decoration: none; 129 | } 130 | 131 | .htmleaf-icon span { 132 | display: none; 133 | } 134 | 135 | .htmleaf-icon:before { 136 | margin: 0 5px; 137 | text-transform: none; 138 | font-weight: normal; 139 | font-style: normal; 140 | font-variant: normal; 141 | font-family: 'icomoon'; 142 | line-height: 1; 143 | speak: none; 144 | -webkit-font-smoothing: antialiased; 145 | } 146 | /* footer */ 147 | .htmleaf-footer{width: 100%;padding-top: 10px;} 148 | .htmleaf-small{font-size: 0.8em;} 149 | .center{text-align: center;} 150 | /****/ 151 | .related { 152 | color: #fff; 153 | background: #494A5F; 154 | text-align: center; 155 | font-size: 1.25em; 156 | padding: 0.5em 0; 157 | overflow: hidden; 158 | } 159 | 160 | .related > a { 161 | vertical-align: top; 162 | width: calc(100% - 20px); 163 | max-width: 340px; 164 | display: inline-block; 165 | text-align: center; 166 | margin: 20px 10px; 167 | padding: 25px; 168 | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; 169 | } 170 | .related a { 171 | display: inline-block; 172 | text-align: left; 173 | margin: 20px auto; 174 | padding: 10px 20px; 175 | opacity: 0.8; 176 | -webkit-transition: opacity 0.3s; 177 | transition: opacity 0.3s; 178 | -webkit-backface-visibility: hidden; 179 | } 180 | 181 | .related a:hover, 182 | .related a:active { 183 | opacity: 1; 184 | } 185 | 186 | .related a img { 187 | max-width: 100%; 188 | opacity: 0.8; 189 | border-radius: 4px; 190 | } 191 | .related a:hover img, 192 | .related a:active img { 193 | opacity: 1; 194 | } 195 | .related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em} 196 | .related a h3 { 197 | font-size: 0.85em; 198 | font-weight: 300; 199 | margin-top: 0.15em; 200 | color: #fff; 201 | } 202 | /* icomoon */ 203 | .icon-htmleaf-home-outline:before { 204 | content: "\e5000"; 205 | } 206 | 207 | .icon-htmleaf-arrow-forward-outline:before { 208 | content: "\e5001"; 209 | } 210 | 211 | @media screen and (max-width: 1024px) { 212 | .htmleaf-header { 213 | padding: 2em 10% 2em; 214 | } 215 | .htmleaf-header h1 { 216 | font-size:1.4em; 217 | } 218 | .htmleaf-links{font-size: 1.4em} 219 | } 220 | 221 | @media screen and (max-width: 960px) { 222 | .htmleaf-header { 223 | padding: 2em 10% 2em; 224 | } 225 | .htmleaf-header h1 { 226 | font-size:1.2em; 227 | } 228 | .htmleaf-links{font-size: 1.2em} 229 | .related h3{font-size: 1em;} 230 | .related a h3 { 231 | font-size: 0.8em; 232 | } 233 | } 234 | 235 | @media screen and (max-width: 766px) { 236 | .htmleaf-header h1 { 237 | font-size:1.3em; 238 | } 239 | .htmleaf-links{font-size: 1.3em} 240 | } 241 | 242 | @media screen and (max-width: 640px) { 243 | .htmleaf-header { 244 | padding: 2em 10% 2em; 245 | } 246 | .htmleaf-header h1 { 247 | font-size:1em; 248 | } 249 | .htmleaf-links{font-size: 1em} 250 | .related h3{font-size: 0.8em;} 251 | .related a h3 { 252 | font-size: 0.6em; 253 | } 254 | } -------------------------------------------------------------------------------- /3d/css/htmleaf-demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('../fonts/icomoon.eot?rretjt'); 4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), 5 | url('../fonts/icomoon.woff?rretjt') format('woff'), 6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'), 7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | font-family: 'icomoon'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | body, html { font-size: 100%; padding: 0; margin: 0;} 27 | 28 | /* Reset */ 29 | *, 30 | *:after, 31 | *:before { 32 | -webkit-box-sizing: border-box; 33 | -moz-box-sizing: border-box; 34 | box-sizing: border-box; 35 | } 36 | 37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 38 | .clearfix:before, 39 | .clearfix:after { 40 | content: " "; 41 | display: table; 42 | } 43 | 44 | .clearfix:after { 45 | clear: both; 46 | } 47 | 48 | body{ 49 | background: #494A5F; 50 | color: #D5D6E2; 51 | font-weight: 500; 52 | font-size: 1.05em; 53 | font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; 54 | } 55 | .htmleaf-links a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;} 56 | .htmleaf-links a:hover,.htmleaf-links a:focus{color:#74777b;text-decoration: none;} 57 | .htmleaf-container{ 58 | margin: 0 auto; 59 | } 60 | 61 | .bgcolor-1 { background: #f0efee; } 62 | .bgcolor-2 { background: #f9f9f9; } 63 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ 64 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ 65 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ 66 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ 67 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ 68 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ 69 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ 70 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ 71 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ 72 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ 73 | .bgcolor-20{ background: #494A5F;color: #D5D6E2;} 74 | /* Header */ 75 | .htmleaf-header{ 76 | padding: 1em 190px 1em; 77 | letter-spacing: -1px; 78 | text-align: center; 79 | background: #66677c; 80 | } 81 | .htmleaf-header h1 { 82 | color: #D5D6E2; 83 | font-weight: 600; 84 | font-size: 2em; 85 | line-height: 1; 86 | margin-bottom: 0; 87 | } 88 | .htmleaf-header h1 span { 89 | display: block; 90 | font-size: 60%; 91 | font-weight: 400; 92 | padding: 0.8em 0 0.5em 0; 93 | color: #c3c8cd; 94 | } 95 | /*nav*/ 96 | .htmleaf-demo a{color: #fff;text-decoration: none;} 97 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} 98 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;} 99 | .htmleaf-demo a:hover{opacity: 0.6;} 100 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } 101 | /* Top Navigation Style */ 102 | .htmleaf-links { 103 | position: relative; 104 | display: inline-block; 105 | white-space: nowrap; 106 | font-size: 1.5em; 107 | text-align: center; 108 | } 109 | 110 | .htmleaf-links::after { 111 | position: absolute; 112 | top: 0; 113 | left: 50%; 114 | margin-left: -1px; 115 | width: 2px; 116 | height: 100%; 117 | background: #dbdbdb; 118 | content: ''; 119 | -webkit-transform: rotate3d(0,0,1,22.5deg); 120 | transform: rotate3d(0,0,1,22.5deg); 121 | } 122 | 123 | .htmleaf-icon { 124 | display: inline-block; 125 | margin: 0.5em; 126 | padding: 0em 0; 127 | width: 1.5em; 128 | text-decoration: none; 129 | } 130 | 131 | .htmleaf-icon span { 132 | display: none; 133 | } 134 | 135 | .htmleaf-icon:before { 136 | margin: 0 5px; 137 | text-transform: none; 138 | font-weight: normal; 139 | font-style: normal; 140 | font-variant: normal; 141 | font-family: 'icomoon'; 142 | line-height: 1; 143 | speak: none; 144 | -webkit-font-smoothing: antialiased; 145 | } 146 | /* footer */ 147 | .htmleaf-footer{width: 100%;padding-top: 10px;} 148 | .htmleaf-small{font-size: 0.8em;} 149 | .center{text-align: center;} 150 | /****/ 151 | .related { 152 | color: #fff; 153 | background: #494A5F; 154 | text-align: center; 155 | font-size: 1.25em; 156 | padding: 0.5em 0; 157 | overflow: hidden; 158 | } 159 | 160 | .related > a { 161 | vertical-align: top; 162 | width: calc(100% - 20px); 163 | max-width: 340px; 164 | display: inline-block; 165 | text-align: center; 166 | margin: 20px 10px; 167 | padding: 25px; 168 | font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo; 169 | } 170 | .related a { 171 | display: inline-block; 172 | text-align: left; 173 | margin: 20px auto; 174 | padding: 10px 20px; 175 | opacity: 0.8; 176 | -webkit-transition: opacity 0.3s; 177 | transition: opacity 0.3s; 178 | -webkit-backface-visibility: hidden; 179 | text-decoration: none; 180 | } 181 | 182 | .related a:hover, 183 | .related a:active { 184 | opacity: 1; 185 | } 186 | 187 | .related a img { 188 | max-width: 100%; 189 | opacity: 0.8; 190 | border-radius: 4px; 191 | } 192 | .related a:hover img, 193 | .related a:active img { 194 | opacity: 1; 195 | } 196 | .related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em} 197 | .related a h3 { 198 | font-size: 0.85em; 199 | font-weight: 300; 200 | margin-top: 0.15em; 201 | color: #fff; 202 | } 203 | /* icomoon */ 204 | .icon-htmleaf-home-outline:before { 205 | content: "\e5000"; 206 | } 207 | 208 | .icon-htmleaf-arrow-forward-outline:before { 209 | content: "\e5001"; 210 | } 211 | 212 | @media screen and (max-width: 1024px) { 213 | .htmleaf-header { 214 | padding: 2em 10% 2em; 215 | } 216 | .htmleaf-header h1 { 217 | font-size:1.4em; 218 | } 219 | .htmleaf-links{font-size: 1.4em} 220 | } 221 | 222 | @media screen and (max-width: 960px) { 223 | .htmleaf-header { 224 | padding: 2em 10% 2em; 225 | } 226 | .htmleaf-header h1 { 227 | font-size:1.2em; 228 | } 229 | .htmleaf-links{font-size: 1.2em} 230 | .related h3{font-size: 1em;} 231 | .related a h3 { 232 | font-size: 0.8em; 233 | } 234 | } 235 | 236 | @media screen and (max-width: 766px) { 237 | .htmleaf-header h1 { 238 | font-size:1.3em; 239 | } 240 | .htmleaf-links{font-size: 1.3em} 241 | } 242 | 243 | @media screen and (max-width: 640px) { 244 | .htmleaf-header { 245 | padding: 2em 10% 2em; 246 | } 247 | .htmleaf-header h1 { 248 | font-size:1em; 249 | } 250 | .htmleaf-links{font-size: 1em} 251 | .related h3{font-size: 0.8em;} 252 | .related a h3 { 253 | font-size: 0.6em; 254 | } 255 | } -------------------------------------------------------------------------------- /game/css/default.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('../fonts/icomoon.eot?rretjt'); 4 | src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'), 5 | url('../fonts/icomoon.woff?rretjt') format('woff'), 6 | url('../fonts/icomoon.ttf?rretjt') format('truetype'), 7 | url('../fonts/icomoon.svg?rretjt#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | font-family: 'icomoon'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | body, html { font-size: 100%; padding: 0; margin: 0;} 27 | 28 | /* Reset */ 29 | *, 30 | *:after, 31 | *:before { 32 | -webkit-box-sizing: border-box; 33 | -moz-box-sizing: border-box; 34 | box-sizing: border-box; 35 | } 36 | 37 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 38 | .clearfix:before, 39 | .clearfix:after { 40 | content: " "; 41 | display: table; 42 | } 43 | 44 | .clearfix:after { 45 | clear: both; 46 | } 47 | 48 | body{ 49 | background: #f9f7f6; 50 | color: #404d5b; 51 | font-weight: 500; 52 | font-size: 1.05em; 53 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 54 | } 55 | a{color: #2fa0ec;text-decoration: none;outline: none;} 56 | a:hover,a:focus{color:#74777b;} 57 | 58 | .htmleaf-container{ 59 | margin: 0 auto; 60 | text-align: center; 61 | overflow: hidden; 62 | } 63 | .htmleaf-content { 64 | font-size: 150%; 65 | padding: 1em 0; 66 | } 67 | 68 | .htmleaf-content h2 { 69 | margin: 0 0 2em; 70 | opacity: 0.1; 71 | } 72 | 73 | .htmleaf-content p { 74 | margin: 1em 0; 75 | padding: 5em 0 0 0; 76 | font-size: 0.65em; 77 | } 78 | .bgcolor-1 { background: #f0efee; } 79 | .bgcolor-2 { background: #f9f9f9; } 80 | .bgcolor-3 { background: #e8e8e8; }/*light grey*/ 81 | .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/ 82 | .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/ 83 | .bgcolor-6 { background: #2fa8ec; }/*sky blue*/ 84 | .bgcolor-7 { background: #d0d6d6; }/*White tea*/ 85 | .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/ 86 | .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/ 87 | .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/ 88 | .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/ 89 | .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/ 90 | /* Header */ 91 | .htmleaf-header{ 92 | padding: 1em 190px 1em; 93 | letter-spacing: -1px; 94 | text-align: center; 95 | } 96 | .htmleaf-header h1 { 97 | font-weight: 600; 98 | font-size: 2em; 99 | line-height: 1; 100 | margin-bottom: 0; 101 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 102 | } 103 | .htmleaf-header h1 span { 104 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 105 | display: block; 106 | font-size: 60%; 107 | font-weight: 400; 108 | padding: 0.8em 0 0.5em 0; 109 | color: #c3c8cd; 110 | } 111 | /*nav*/ 112 | .htmleaf-demo a{color: #1d7db1;text-decoration: none;} 113 | .htmleaf-demo{width: 100%;padding-bottom: 1.2em;} 114 | .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;} 115 | .htmleaf-demo a:hover{opacity: 0.6;} 116 | .htmleaf-demo a.current{background:#1d7db1;color: #fff; } 117 | /* Top Navigation Style */ 118 | .htmleaf-links { 119 | position: relative; 120 | display: inline-block; 121 | white-space: nowrap; 122 | font-size: 1.5em; 123 | text-align: center; 124 | } 125 | 126 | .htmleaf-links::after { 127 | position: absolute; 128 | top: 0; 129 | left: 50%; 130 | margin-left: -1px; 131 | width: 2px; 132 | height: 100%; 133 | background: #dbdbdb; 134 | content: ''; 135 | -webkit-transform: rotate3d(0,0,1,22.5deg); 136 | transform: rotate3d(0,0,1,22.5deg); 137 | } 138 | 139 | .htmleaf-icon { 140 | display: inline-block; 141 | margin: 0.5em; 142 | padding: 0em 0; 143 | width: 1.5em; 144 | text-decoration: none; 145 | } 146 | 147 | .htmleaf-icon span { 148 | display: none; 149 | } 150 | 151 | .htmleaf-icon:before { 152 | margin: 0 5px; 153 | text-transform: none; 154 | font-weight: normal; 155 | font-style: normal; 156 | font-variant: normal; 157 | font-family: 'icomoon'; 158 | line-height: 1; 159 | speak: none; 160 | -webkit-font-smoothing: antialiased; 161 | } 162 | /* footer */ 163 | .htmleaf-footer{width: 100%;padding-top: 10px;} 164 | .htmleaf-small{font-size: 0.8em;} 165 | .center{text-align: center;} 166 | /****/ 167 | .related { 168 | color: #fff; 169 | background: #333; 170 | text-align: center; 171 | font-size: 1.25em; 172 | padding: 0.5em 0; 173 | overflow: hidden; 174 | } 175 | 176 | .related > a { 177 | vertical-align: top; 178 | width: calc(100% - 20px); 179 | max-width: 340px; 180 | display: inline-block; 181 | text-align: center; 182 | margin: 20px 10px; 183 | padding: 25px; 184 | font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; 185 | } 186 | .related a { 187 | display: inline-block; 188 | text-align: left; 189 | margin: 20px auto; 190 | padding: 10px 20px; 191 | opacity: 0.8; 192 | -webkit-transition: opacity 0.3s; 193 | transition: opacity 0.3s; 194 | -webkit-backface-visibility: hidden; 195 | } 196 | 197 | .related a:hover, 198 | .related a:active { 199 | opacity: 1; 200 | } 201 | 202 | .related a img { 203 | max-width: 100%; 204 | opacity: 0.8; 205 | border-radius: 4px; 206 | } 207 | .related a:hover img, 208 | .related a:active img { 209 | opacity: 1; 210 | } 211 | .related h3{font-family: "Microsoft YaHei", sans-serif;} 212 | .related a h3 { 213 | font-weight: 300; 214 | margin-top: 0.15em; 215 | color: #fff; 216 | } 217 | /* icomoon */ 218 | .icon-htmleaf-home-outline:before { 219 | content: "\e5000"; 220 | } 221 | 222 | .icon-htmleaf-arrow-forward-outline:before { 223 | content: "\e5001"; 224 | } 225 | 226 | @media screen and (max-width: 50em) { 227 | .htmleaf-header { 228 | padding: 3em 10% 4em; 229 | } 230 | .htmleaf-header h1 { 231 | font-size:2em; 232 | } 233 | } 234 | 235 | 236 | @media screen and (max-width: 40em) { 237 | .htmleaf-header h1 { 238 | font-size: 1.5em; 239 | } 240 | } 241 | 242 | @media screen and (max-width: 30em) { 243 | .htmleaf-header h1 { 244 | font-size:1.2em; 245 | } 246 | } -------------------------------------------------------------------------------- /js/jquery.warpdrive.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | Warp Drive jQuery plugin 3 | Version: 1.0.0 4 | 5 | Written by Niklas Knaack 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | */ 25 | 26 | !function(){function a(a,b){function da(){W=document.createElement("canvas"),W.style.backgroundColor=ga(q.r,q.g,q.b),W.setAttribute("width",g),W.setAttribute("height",h),c.addMouseControls&&(W.addEventListener("mousemove",ta,!1),W.addEventListener("mousedown",wa,!1),W.addEventListener("mouseup",xa,!1),W.addEventListener("mouseenter",ua,!1),W.addEventListener("mouseleave",va,!1)),c.addTouchControls&&(W.addEventListener("touchstart",za,!1),W.addEventListener("touchend",Aa,!1),W.addEventListener("touchmove",Ba,!1),W.addEventListener("touchcancel",Ca,!1)),c.hideContextMenu&&(W.oncontextmenu=function(a){a.preventDefault()}),a.appendChild(W),X=W.getContext("2d"),Y=X.getImageData(0,0,g,h),Z=Y.data,$={x:W.width/2,y:W.height/2},_=!1,aa=!1,ba={x:$.x,y:$.y},U=[],V=[],S=[],T=[],la(U,o,p,q,n),la(V,l,m,q,k),oa(),pa(),c.autoResize&&(window.addEventListener("resize",ra),sa())}function ea(a,b,c){var d=a<0?-1*a:a,e=Math.round,f=parseInt,g=f(b.slice(1),16),h=f((c||(a<0?"#000000":"#FFFFFF")).slice(1),16),i=g>>16,j=g>>8&255,k=255&g;return"#"+(16777216+65536*(e(((h>>16)-i)*d)+i)+256*(e(((h>>8&255)-j)*d)+j)+(e(((255&h)-k)*d)+k)).toString(16).slice(1)}function fa(a){var b=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;a=a.replace(b,function(a,b,c,d){return b+b+c+c+d+d});var c=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);return c?{r:parseInt(c[1],16),g:parseInt(c[2],16),b:parseInt(c[3],16)}:null}function ga(a,b,c){return"#"+(16777216+(c|b<<8|a<<16)).toString(16).slice(1)}function ha(a){a=a.replace(/\s+/g,"");var b=a.split("(")[1].split(")")[0].split(",");return{r:b[0],g:b[1],b:b[2]}}function ia(){for(var a=0,b=Z.length;a-1&&p-1&&q-k&&(o-=l,p+=m),r0)for(;Math.sqrt(c*c+d*d)I&&(J=I):(J-=1)<0&&(J=0),F=Math.easeOutQuad(J,G,H,I),C-=F*E),_?(w+=1,w>v&&(w=v),B-=1,B<0&&(B=0),N&&($.x+=(ba.x-$.x)*M),O&&($.y+=(ba.y-$.y)*M)):(w-=1,w<0&&(w=0),B+=1,B>A&&(B=A),N&&($.x+=(W.width/2-$.x)*M),O&&($.y+=(W.height/2-$.y)*M)),s=Math.easeOutQuad(w,0,u-t,v)+t,x=Math.easeInQuad(B,0,z-y,A)+y,Q=1-x;var l=s*(s/(u/K));for(a=0,c=T.length;a-1&&j.x2d-1&&j.y2d=0?(j.z-=s,j.distance+=s,j.zR&&(j.z=Q,j.distance=j.distanceTotal)),j.color=j.colorLookupTable[Math.floor(j.distance/j.distanceTotal*100)],k=x/(x+j.z),j.x2d=j.x*k+$.x,j.y2d=j.y*k+$.y,s===t)j.x2d>-1&&j.x2d-1&&j.y2d-1&&n-1&&oc.autoResizeMaxWidth&&(g=c.autoResizeMaxWidth),c.autoResizeMinHeight&&hc.autoResizeMaxHeight&&(h=c.autoResizeMaxHeight),W.setAttribute("width",g),W.setAttribute("height",h),$={x:W.width/2,y:W.height/2},Y=X.getImageData(0,0,g,h),Z=Y.data}function ta(a){ba=ya(W,a)}function ua(a){_=!0}function va(a){_=!1,aa=!1}function wa(a){aa=!0}function xa(a){aa=!1}function ya(a,b){var c=a.getBoundingClientRect();return{x:b.clientX-c.left,y:b.clientY-c.top}}function za(a){a.preventDefault(),aa=!0,_=!0}function Aa(a){a.preventDefault(),aa=!1,_=!1}function Ba(a){a.preventDefault(),ba=Da(W,a)}function Ca(a){aa=!1,_=!1}function Da(a,b){var c=a.getBoundingClientRect();return{x:b.touches[0].clientX-c.left,y:b.touches[0].clientY-c.top}}var c={};if(c.width=480,c.height=480,c.autoResize=!1,c.autoResizeMinWidth=null,c.autoResizeMaxWidth=null,c.autoResizeMinHeight=null,c.autoResizeMaxHeight=null,c.addMouseControls=!0,c.addTouchControls=!0,c.hideContextMenu=!0,c.starCount=6666,c.starBgCount=2222,c.starBgColor={r:255,g:255,b:255},c.starBgColorRangeMin=10,c.starBgColorRangeMax=40,c.starColor={r:255,g:255,b:255},c.starColorRangeMin=10,c.starColorRangeMax=100,c.starfieldBackgroundColor={r:0,g:0,b:0},c.starDirection=1,c.starSpeed=20,c.starSpeedMax=200,c.starSpeedAnimationDuration=2,c.starFov=300,c.starFovMin=200,c.starFovAnimationDuration=2,c.starRotationPermission=!0,c.starRotationDirection=1,c.starRotationSpeed=0,c.starRotationSpeedMax=1,c.starRotationAnimationDuration=2,c.starWarpLineLength=2,c.starWarpTunnelDiameter=100,c.starFollowMouseSensitivity=.025,c.starFollowMouseXAxis=!0,c.starFollowMouseYAxis=!0,void 0!==b)for(var d in b)b.hasOwnProperty(d)&&c.hasOwnProperty(d)&&(c[d]=b[d]);for(var d in c)c.hasOwnProperty(d)&&d.indexOf("Duration")>-1&&(c[d]=60*c[d]);if("string"==typeof c.starBgColor&&c.starBgColor.indexOf("#")>-1?c.starBgColor=fa(c.starBgColor):"string"==typeof c.starBgColor&&c.starBgColor.indexOf("rgb")>-1&&(c.starBgColor=ha(c.starBgColor)),"string"==typeof c.starColor&&c.starColor.indexOf("#")>-1?c.starColor=fa(c.starColor):"string"==typeof c.starColor&&c.starColor.indexOf("rgb")>-1&&(c.starColor=ha(c.starColor)),"string"==typeof c.starfieldBackgroundColor&&c.starfieldBackgroundColor.indexOf("#")>-1?c.starfieldBackgroundColor=fa(c.starfieldBackgroundColor):"string"==typeof c.starfieldBackgroundColor&&c.starfieldBackgroundColor.indexOf("rgb")>-1&&(c.starfieldBackgroundColor=ha(c.starfieldBackgroundColor)),!a)throw Error("\nNo div element found");var S,T,U,V,W,X,Y,Z,$,_,aa,ba,e=Math.PI/180,g=(Math.PI,c.width),h=c.height,i=c.starCount,j=c.starBgCount,k=c.starBgColor,l=c.starBgColorRangeMin,m=c.starBgColorRangeMax,n=c.starColor,o=c.starColorRangeMin,p=c.starColorRangeMax,q=c.starfieldBackgroundColor,r=c.starDirection,s=c.starSpeed,t=s,u=c.starSpeedMax,v=c.starFovAnimationDuration,w=0,x=c.starFov,y=c.starFovMin,z=x,A=c.starFovAnimationDuration,B=A,C=0,D=c.starRotationPermission,E=c.starRotationDirection,F=c.starRotationSpeed,G=F,H=c.starRotationSpeedMax,I=c.starRotationAnimationDuration,J=0,K=c.starWarpLineLength,L=c.starWarpTunnelDiameter,M=c.starFollowMouseSensitivity,N=c.starFollowMouseXAxis,O=c.starFollowMouseYAxis,P=8e3,Q=1-y,R=P,ca=!1;Math.easeInQuad=function(a,b,c,d){return c*a*a/(d*d)+b},Math.easeOutQuad=function(a,b,c,d){return-c*a*a/(d*d)+2*c*a/d+b},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),this.pause=function(){ca=!0},this.unpause=function(){ca=!1},da()}window.WarpDrive=a}(),"undefined"!=typeof jQuery&&function(a){a.fn.warpDrive=function(b){var c=arguments;return this.each(function(){if(a.data(this,"plugin_WarpDrive")){var d=a.data(this,"plugin_WarpDrive");d[b]?d[b].apply(this,Array.prototype.slice.call(c,1)):a.error("Method "+b+" does not exist on jQuery.warpDrive")}else a.data(this,"plugin_WarpDrive",new WarpDrive(this,b))})}}(jQuery); -------------------------------------------------------------------------------- /sky/js/jquery.warpdrive.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | Warp Drive jQuery plugin 3 | Version: 1.0.0 4 | 5 | Written by Niklas Knaack 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | */ 25 | 26 | !function(){function a(a,b){function da(){W=document.createElement("canvas"),W.style.backgroundColor=ga(q.r,q.g,q.b),W.setAttribute("width",g),W.setAttribute("height",h),c.addMouseControls&&(W.addEventListener("mousemove",ta,!1),W.addEventListener("mousedown",wa,!1),W.addEventListener("mouseup",xa,!1),W.addEventListener("mouseenter",ua,!1),W.addEventListener("mouseleave",va,!1)),c.addTouchControls&&(W.addEventListener("touchstart",za,!1),W.addEventListener("touchend",Aa,!1),W.addEventListener("touchmove",Ba,!1),W.addEventListener("touchcancel",Ca,!1)),c.hideContextMenu&&(W.oncontextmenu=function(a){a.preventDefault()}),a.appendChild(W),X=W.getContext("2d"),Y=X.getImageData(0,0,g,h),Z=Y.data,$={x:W.width/2,y:W.height/2},_=!1,aa=!1,ba={x:$.x,y:$.y},U=[],V=[],S=[],T=[],la(U,o,p,q,n),la(V,l,m,q,k),oa(),pa(),c.autoResize&&(window.addEventListener("resize",ra),sa())}function ea(a,b,c){var d=a<0?-1*a:a,e=Math.round,f=parseInt,g=f(b.slice(1),16),h=f((c||(a<0?"#000000":"#FFFFFF")).slice(1),16),i=g>>16,j=g>>8&255,k=255&g;return"#"+(16777216+65536*(e(((h>>16)-i)*d)+i)+256*(e(((h>>8&255)-j)*d)+j)+(e(((255&h)-k)*d)+k)).toString(16).slice(1)}function fa(a){var b=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;a=a.replace(b,function(a,b,c,d){return b+b+c+c+d+d});var c=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);return c?{r:parseInt(c[1],16),g:parseInt(c[2],16),b:parseInt(c[3],16)}:null}function ga(a,b,c){return"#"+(16777216+(c|b<<8|a<<16)).toString(16).slice(1)}function ha(a){a=a.replace(/\s+/g,"");var b=a.split("(")[1].split(")")[0].split(",");return{r:b[0],g:b[1],b:b[2]}}function ia(){for(var a=0,b=Z.length;a-1&&p-1&&q-k&&(o-=l,p+=m),r0)for(;Math.sqrt(c*c+d*d)I&&(J=I):(J-=1)<0&&(J=0),F=Math.easeOutQuad(J,G,H,I),C-=F*E),_?(w+=1,w>v&&(w=v),B-=1,B<0&&(B=0),N&&($.x+=(ba.x-$.x)*M),O&&($.y+=(ba.y-$.y)*M)):(w-=1,w<0&&(w=0),B+=1,B>A&&(B=A),N&&($.x+=(W.width/2-$.x)*M),O&&($.y+=(W.height/2-$.y)*M)),s=Math.easeOutQuad(w,0,u-t,v)+t,x=Math.easeInQuad(B,0,z-y,A)+y,Q=1-x;var l=s*(s/(u/K));for(a=0,c=T.length;a-1&&j.x2d-1&&j.y2d=0?(j.z-=s,j.distance+=s,j.zR&&(j.z=Q,j.distance=j.distanceTotal)),j.color=j.colorLookupTable[Math.floor(j.distance/j.distanceTotal*100)],k=x/(x+j.z),j.x2d=j.x*k+$.x,j.y2d=j.y*k+$.y,s===t)j.x2d>-1&&j.x2d-1&&j.y2d-1&&n-1&&oc.autoResizeMaxWidth&&(g=c.autoResizeMaxWidth),c.autoResizeMinHeight&&hc.autoResizeMaxHeight&&(h=c.autoResizeMaxHeight),W.setAttribute("width",g),W.setAttribute("height",h),$={x:W.width/2,y:W.height/2},Y=X.getImageData(0,0,g,h),Z=Y.data}function ta(a){ba=ya(W,a)}function ua(a){_=!0}function va(a){_=!1,aa=!1}function wa(a){aa=!0}function xa(a){aa=!1}function ya(a,b){var c=a.getBoundingClientRect();return{x:b.clientX-c.left,y:b.clientY-c.top}}function za(a){a.preventDefault(),aa=!0,_=!0}function Aa(a){a.preventDefault(),aa=!1,_=!1}function Ba(a){a.preventDefault(),ba=Da(W,a)}function Ca(a){aa=!1,_=!1}function Da(a,b){var c=a.getBoundingClientRect();return{x:b.touches[0].clientX-c.left,y:b.touches[0].clientY-c.top}}var c={};if(c.width=480,c.height=480,c.autoResize=!1,c.autoResizeMinWidth=null,c.autoResizeMaxWidth=null,c.autoResizeMinHeight=null,c.autoResizeMaxHeight=null,c.addMouseControls=!0,c.addTouchControls=!0,c.hideContextMenu=!0,c.starCount=6666,c.starBgCount=2222,c.starBgColor={r:255,g:255,b:255},c.starBgColorRangeMin=10,c.starBgColorRangeMax=40,c.starColor={r:255,g:255,b:255},c.starColorRangeMin=10,c.starColorRangeMax=100,c.starfieldBackgroundColor={r:0,g:0,b:0},c.starDirection=1,c.starSpeed=20,c.starSpeedMax=200,c.starSpeedAnimationDuration=2,c.starFov=300,c.starFovMin=200,c.starFovAnimationDuration=2,c.starRotationPermission=!0,c.starRotationDirection=1,c.starRotationSpeed=0,c.starRotationSpeedMax=1,c.starRotationAnimationDuration=2,c.starWarpLineLength=2,c.starWarpTunnelDiameter=100,c.starFollowMouseSensitivity=.025,c.starFollowMouseXAxis=!0,c.starFollowMouseYAxis=!0,void 0!==b)for(var d in b)b.hasOwnProperty(d)&&c.hasOwnProperty(d)&&(c[d]=b[d]);for(var d in c)c.hasOwnProperty(d)&&d.indexOf("Duration")>-1&&(c[d]=60*c[d]);if("string"==typeof c.starBgColor&&c.starBgColor.indexOf("#")>-1?c.starBgColor=fa(c.starBgColor):"string"==typeof c.starBgColor&&c.starBgColor.indexOf("rgb")>-1&&(c.starBgColor=ha(c.starBgColor)),"string"==typeof c.starColor&&c.starColor.indexOf("#")>-1?c.starColor=fa(c.starColor):"string"==typeof c.starColor&&c.starColor.indexOf("rgb")>-1&&(c.starColor=ha(c.starColor)),"string"==typeof c.starfieldBackgroundColor&&c.starfieldBackgroundColor.indexOf("#")>-1?c.starfieldBackgroundColor=fa(c.starfieldBackgroundColor):"string"==typeof c.starfieldBackgroundColor&&c.starfieldBackgroundColor.indexOf("rgb")>-1&&(c.starfieldBackgroundColor=ha(c.starfieldBackgroundColor)),!a)throw Error("\nNo div element found");var S,T,U,V,W,X,Y,Z,$,_,aa,ba,e=Math.PI/180,g=(Math.PI,c.width),h=c.height,i=c.starCount,j=c.starBgCount,k=c.starBgColor,l=c.starBgColorRangeMin,m=c.starBgColorRangeMax,n=c.starColor,o=c.starColorRangeMin,p=c.starColorRangeMax,q=c.starfieldBackgroundColor,r=c.starDirection,s=c.starSpeed,t=s,u=c.starSpeedMax,v=c.starFovAnimationDuration,w=0,x=c.starFov,y=c.starFovMin,z=x,A=c.starFovAnimationDuration,B=A,C=0,D=c.starRotationPermission,E=c.starRotationDirection,F=c.starRotationSpeed,G=F,H=c.starRotationSpeedMax,I=c.starRotationAnimationDuration,J=0,K=c.starWarpLineLength,L=c.starWarpTunnelDiameter,M=c.starFollowMouseSensitivity,N=c.starFollowMouseXAxis,O=c.starFollowMouseYAxis,P=8e3,Q=1-y,R=P,ca=!1;Math.easeInQuad=function(a,b,c,d){return c*a*a/(d*d)+b},Math.easeOutQuad=function(a,b,c,d){return-c*a*a/(d*d)+2*c*a/d+b},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),this.pause=function(){ca=!0},this.unpause=function(){ca=!1},da()}window.WarpDrive=a}(),"undefined"!=typeof jQuery&&function(a){a.fn.warpDrive=function(b){var c=arguments;return this.each(function(){if(a.data(this,"plugin_WarpDrive")){var d=a.data(this,"plugin_WarpDrive");d[b]?d[b].apply(this,Array.prototype.slice.call(c,1)):a.error("Method "+b+" does not exist on jQuery.warpDrive")}else a.data(this,"plugin_WarpDrive",new WarpDrive(this,b))})}}(jQuery); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 纯CSS3杂志翻页动画特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

纯CSS3杂志翻页动画特效 Pure CSS Magazine style layout with transitions

17 |
18 | jQuery之家 19 | 返回下载页 20 |
21 |
22 |
23 | 24 | 25 | 26 | 27 |
28 |
29 | 30 |
1 2
31 |
32 |
33 |

The latest in fashion & fashion design

34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |

The latest in fashion & fashion design

43 |
44 |
45 |
46 | 49 |
50 |
51 |
52 |
53 | 54 |
2 3
55 |
56 | 57 |
58 |
59 |
60 | 61 |
62 |
63 |

Subtitle

64 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit. Donec dui turpis, viverra vitae lobortis commodo, lobortis et ex.

65 |
66 |

67 | L 68 | o 69 | o 70 | k 71 |   72 | a 73 | t 74 |   75 | t 76 | h 77 | i 78 | s 79 |   80 | a 81 | w 82 | e 83 | s 84 | o 85 | m 86 | e 87 |
88 | h 89 | e 90 | a 91 | d 92 | l 93 | i 94 | n 95 | e 96 |   97 | r 98 | i 99 | g 100 | h 101 | t 102 |   103 | h 104 | e 105 | r 106 | e 107 |

108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 121 |
122 |
123 | 124 | 125 | 126 | 127 |
128 |
129 |
130 |
131 | 132 | " 133 | 134 | This is a quote 135 | from someone 136 | Jamie Coulter 137 | - Jcoulterdesign 138 | " 139 |
140 |
141 |
142 | 143 |
144 |

145 | L 146 | o 147 | o 148 | k 149 |   150 | a 151 | t 152 |   153 | t 154 | h 155 | i 156 | s 157 |   158 | a 159 | w 160 | e 161 | s 162 | o 163 | m 164 | e 165 |
166 | h 167 | e 168 | a 169 | d 170 | l 171 | i 172 | n 173 | e 174 |   175 | r 176 | i 177 | g 178 | h 179 | t 180 |   181 | h 182 | e 183 | r 184 | e 185 |

186 |
187 |
188 |
189 |
190 |
191 | 192 |
4 5
193 |
194 |
195 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit

196 |
Lorem ipsum dolor sit amet
197 |
198 |
199 |
200 | 201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 | 214 |
215 |
216 | 217 |
218 |
219 |
220 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit

221 |
Lorem ipsum dolor sit amet
222 |
223 |
224 |
225 | 226 | 227 | 228 | 229 |
230 |
231 |
232 |
233 |
234 | 235 |
6 7
236 |
237 |
238 |

Super

239 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit.

240 |
241 |
242 |

Awesome

243 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit.

244 |
245 |
246 |

Great

247 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna.

248 |
249 |
250 |
251 | 252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 | 266 | 267 | 268 | 269 |
270 |
271 |
272 |
273 | 274 |
275 | 276 | 277 | -------------------------------------------------------------------------------- /game/js/BlockBlaster.js: -------------------------------------------------------------------------------- 1 | 2 | //Create canvas 3 | //document.body.innerHTML += ''; 4 | 5 | //Globals Variables 6 | //----------------- 7 | var fps = 30; 8 | var canvas = document.getElementById('canvas'); 9 | var ctx = canvas.getContext("2d"); 10 | var bgColor = "rgb(40,40,40)" 11 | var ready; 12 | var enemyScore; 13 | var renderTimer = setInterval(render,1/fps*100); 14 | var difficultyTimer; 15 | var spawnTimer; 16 | var spawntime; 17 | var gameTime; 18 | var difficulty; 19 | var score; 20 | var highScore=0; 21 | var gameOver; 22 | var entities = []; 23 | var player; 24 | var fader; 25 | 26 | 27 | //Global Functions 28 | //---------------- 29 | 30 | //Reset app back to 'Ready?' Screen 31 | function reset(){ 32 | if (score > highScore) highScore = score; 33 | ready = true; 34 | enemyScore = 0; 35 | gameTime = 0; 36 | difficulty = 1; 37 | score = 0; 38 | spawntime = 1500; 39 | gameOver = false; 40 | fader = 0; 41 | entities = []; 42 | player = null; 43 | clearTimers() 44 | } 45 | 46 | //Clear all timers 47 | function clearTimers(){ 48 | clearInterval(difficultyTimer); 49 | clearInterval(spawnTimer); 50 | } 51 | 52 | //Initialize all timers 53 | function initializeTimers(){ 54 | difficultyTimer = setInterval(increaseDifficulty,2000); 55 | spawnTimer = setInterval(spawnEnemy,spawntime); 56 | } 57 | 58 | //Initialize / Start game 59 | function init(){ 60 | ready = false; 61 | clearTimers(); 62 | initializeTimers(); 63 | 64 | //Spawn player 65 | player = new Player(); 66 | player.position.set(canvas.width/2,canvas.height-player.size); 67 | player.render(); 68 | entities.push(player); 69 | 70 | } 71 | 72 | //Update Entities 73 | function updateEntities(){ 74 | entities.forEach(function(e){ 75 | if (e.position.y > canvas.height + 20){ 76 | if (e.name == "Enemy"){ 77 | enemyScore += 1; 78 | } 79 | removeEntity(e); 80 | } 81 | e.update(1/fps); 82 | }) 83 | } 84 | 85 | //Draw background 86 | function drawBG(){ 87 | ctx.fillStyle = bgColor; 88 | ctx.fillRect(0,0,canvas.width,canvas.height); 89 | } 90 | 91 | //Draw Score / HUD 92 | function drawScore(){ 93 | ctx.fillStyle = "#CCFF99"; 94 | ctx.font = "24px sans-serif"; 95 | ctx.fillText("Score: " + score,10,24); 96 | ctx.font = "16px sans-serif"; 97 | ctx.fillText("High Score: " + highScore,10,48); 98 | var enemyScoreString = ""; 99 | for (var i = 0; i < enemyScore; i++){ 100 | enemyScoreString += "X"; 101 | } 102 | ctx.font = "24px sans-serif"; 103 | ctx.fillStyle = "#FF6666"; 104 | ctx.fillText(enemyScoreString,canvas.width - 75,24); 105 | ctx.font = "16px sans-serif"; 106 | ctx.fillText("Difficulty: " + difficulty,canvas.width/2 - 50,24); 107 | } 108 | 109 | //Draws some static. 110 | //@param alpha transparency 111 | function drawStatic(alpha){ 112 | var s = 15 ; 113 | for (var x = 0; x < canvas.width; x+=s){ 114 | for (var y = 0; y < canvas.width; y+=s){ 115 | var n = Math.floor(Math.random() * 60); 116 | ctx.fillStyle = "rgba(" + n + "," + n + "," + n + "," + (Math.random() * alpha) + ")"; 117 | ctx.fillRect(x,y,s,s); 118 | } 119 | } 120 | } 121 | 122 | //Draws 'Ready?' screen 123 | function drawReadyScreen(){ 124 | drawBG(); 125 | //drawStatic(.25); 126 | drawScore(); 127 | fader += .1 * 1/fps; 128 | ctx.fillStyle = "rgba(255,255,255," + fader + ")"; 129 | ctx.font = "72px sans-serif"; 130 | ctx.fillText("READY?",canvas.width/2 - 140,canvas.height/2); 131 | drawScore(); 132 | } 133 | 134 | //Draw all entities 135 | function drawEntities(){ 136 | entities.forEach(function(e){e.render();}); 137 | } 138 | 139 | //Draw 'Game Over' screen 140 | function drawGameOver(){ 141 | ctx.fillStyle = "rgba(0,0,0,"+fader +")"; 142 | ctx.fillRect(0,0,canvas.width,canvas.height); 143 | drawStatic(fader/2); 144 | drawScore(); 145 | fader += .1 * 1/fps 146 | ctx.fillStyle = "rgba(255,255,255," + fader + ")"; 147 | ctx.font = "72px sans-serif"; 148 | ctx.fillText("GAME OVER",canvas.width/2 - 220,canvas.height/2); 149 | } 150 | 151 | //Render everything 152 | function render(){ 153 | drawBG(); 154 | drawEntities(); 155 | drawScore(); 156 | if (gameOver){drawGameOver(); return;} 157 | else if (ready){drawReadyScreen(); return;} 158 | updateEntities(); 159 | gameTime += 1/fps; 160 | if (enemyScore >= 3) { 161 | clearTimers(); 162 | gameOver = true; 163 | fader = 0; 164 | } 165 | } 166 | 167 | //Return mouse position relative to canvas 168 | function getMousePos(canvas, evt) { 169 | var rect = canvas.getBoundingClientRect(); 170 | return new Vector2(evt.clientX - rect.left, 171 | evt.clientY - rect.top) 172 | } 173 | 174 | //Click Event 175 | function canvasClick(){ 176 | if (gameOver){ if (fader > .5) reset();return;} 177 | if (ready) {init(); return;} 178 | var bullet = new Bullet(); 179 | bullet.position.set(player.position.x + player.size / 2 - bullet.size/2,player.position.y - player.size/2 - bullet.size /2); 180 | bullet.velocity.y = -30; 181 | entities.push(bullet); 182 | if (score > 0) score -= 1; 183 | } 184 | 185 | //Increment difficulty 186 | function increaseDifficulty(){ 187 | difficulty += 1; 188 | if (spawntime > 20) spawntime -= 20; 189 | clearInterval(spawnTimer); 190 | spawnTimer = setInterval(spawnEnemy,spawntime); 191 | } 192 | 193 | //Change alpha of color 194 | function setAlpha(color,alpha){ 195 | if (color.indexOf('a') == -1){ 196 | return color.replace(")",","+alpha+")").replace("rgb","rgba"); 197 | } 198 | } 199 | 200 | //Entity death 201 | function death(entity){ 202 | if (entity.name == "Enemy") { 203 | var particleCount = Math.floor((Math.random() * 6) + 3); 204 | for (var i = 0; i < particleCount; i++){ 205 | var p = new Particle(); 206 | p.color = entity.color; 207 | p.size = Math.floor((Math.random() * entity.size/2) + 5); 208 | p.position.set(entity.position.x+entity.size/2,entity.position.y+entity.size/2); 209 | entities.push(p); 210 | } 211 | score += 25; 212 | } 213 | removeEntity(entity); 214 | } 215 | 216 | //Remove Entity 217 | function removeEntity(entity){ 218 | var idx = entities.indexOf(entity); 219 | if (idx > -1) entities.splice(idx,1); 220 | } 221 | 222 | //Check if two entities overlap 223 | function overlaps(entityA,entityB){ 224 | var sa = entityA.size; 225 | var x1a = entityA.position.x; 226 | var x2a = entityA.position.x + sa; 227 | var y1a = entityA.position.y; 228 | var y2a = entityA.position.y + sa; 229 | var sb = entityB.size; 230 | var x1b = entityB.position.x; 231 | var x2b = entityB.position.x + sb; 232 | var y1b = entityB.position.y; 233 | var y2b = entityB.position.y + sb; 234 | return (x1a < x2b && x2a > x1b && y1a < y2b && y2a > y1b); 235 | } 236 | 237 | //Spawns new enemy 238 | function spawnEnemy(){ 239 | var e = new Enemy(); 240 | var px = Math.floor((Math.random() * canvas.width)); 241 | var py = -e.size; 242 | var v = difficulty; 243 | var a = Math.floor((Math.random() * (v + 15)) + v); 244 | var f = Math.floor((Math.random() * (v + 15)) + v); 245 | e.position.set(px,py); 246 | var r = Math.random(); 247 | if (r > .5){ 248 | straightDownMotion(e,v); 249 | } 250 | else if (r > .3){ 251 | sineMotion(e,a,f,v); 252 | } 253 | else if (r > .1){ 254 | triangularMotion(e,a,f,v); 255 | } 256 | else{ 257 | sawtoothMotion(e,a,f,v); 258 | } 259 | entities.push(e); 260 | } 261 | 262 | //Straight down motion 263 | function straightDownMotion(entity,speed){ 264 | entity.update = function(deltatime){ 265 | this.velocity.x = 0; 266 | this.velocity.y = speed; 267 | Entity.prototype.update.call(this,deltatime); 268 | } 269 | } 270 | 271 | //Define sin wave motion 272 | function sineMotion(entity,amplitude,freq,speed){ 273 | entity.update = function(deltatime){ 274 | this.velocity.x = amplitude * Math.cos(this.position.y/freq); 275 | this.velocity.y = speed; 276 | Entity.prototype.update.call(this,deltatime); 277 | } 278 | } 279 | 280 | //Define saw tooth motion (sorta) 281 | function sawtoothMotion(entity, amplitude,freq,speed){ 282 | var modifier = 1; 283 | if (Math.random() > .5) modifier = -1; 284 | entity.update = function(deltatime){ 285 | this.velocity.x = modifier * ((-2*amplitude)/Math.PI)*Math.atan(1/Math.tan(this.position.y / freq)); 286 | this.velocity.y = speed; 287 | Entity.prototype.update.call(this,deltatime); 288 | } 289 | } 290 | 291 | //Define triangular motion () 292 | function triangularMotion(entity, amplitude,freq,speed){ 293 | entity.update = function(deltatime){ 294 | this.velocity.x = ((2*amplitude)/Math.PI)*Math.asin(Math.sin(this.position.y / freq)); 295 | this.velocity.y = speed; 296 | Entity.prototype.update.call(this,deltatime); 297 | } 298 | } 299 | 300 | //Generate random rgba color string 301 | function randomColor(min,max){ 302 | var r = Math.floor((Math.random() * max) + min); 303 | var g = Math.floor((Math.random() * max) + min); 304 | var b = Math.floor((Math.random() * max) + min); 305 | var col = "rgb(" + r + "," + g + "," + b + ")"; 306 | return col; 307 | } 308 | 309 | // Classes 310 | //---------- 311 | 312 | //Vector2 313 | var Vector2 = function(x1,y1){ 314 | this.x = x1; 315 | this.y = y1; 316 | } 317 | Vector2.prototype.set = function(a,b){ 318 | this.x = a; 319 | this.y = b; 320 | } 321 | 322 | //Entity (Base class) 323 | var Entity = function(){ 324 | this.name = "Entity"; 325 | this.size = 25; 326 | this.position = new Vector2(0,0); 327 | this.velocity = new Vector2(0,0); 328 | this.color = "#FFFFFF"; 329 | } 330 | Entity.prototype.sayName = function(){ 331 | console.log(this.name); 332 | } 333 | Entity.prototype.update = function(deltaTime){ 334 | this.position.x += this.velocity.x * deltaTime; 335 | this.position.y += this.velocity.y * deltaTime; 336 | //Keep in bounds 337 | if (this.position.x - this.size < 0) {this.position.x = this.size;} 338 | if (this.position.x + this.size > canvas.width) {this.position.x = canvas.width - this.size;} 339 | } 340 | Entity.prototype.render = function(){ 341 | ctx.fillStyle = this.color; 342 | ctx.fillRect(this.position.x,this.position.y,this.size,this.size); 343 | } 344 | 345 | //Enemy Entity 346 | var Enemy = function(){ 347 | Entity.call(this); 348 | this.name = "Enemy"; 349 | this.size = Math.floor((Math.random() * 50)+20); 350 | this.color = randomColor(90,150); 351 | } 352 | Enemy.prototype = Object.create(Entity.prototype); 353 | Enemy.prototype.constructor = Entity; 354 | //Player Entity 355 | var Player = function(){ 356 | Entity.call(this); 357 | this.name = "Player"; 358 | this.color = "#4747FF" 359 | } 360 | Player.prototype = Object.create(Entity.prototype); 361 | Player.prototype.constructor = Entity; 362 | 363 | //Particle Entity 364 | var Particle = function(){ 365 | Entity.call(this); 366 | this.name = "Particle"; 367 | this.size = 10; 368 | this.time = 0; 369 | this.maxTime = Math.floor((Math.random() * 10) + 3); 370 | this.velocity.x = Math.floor((Math.random() * 20) - 10); 371 | this.velocity.y = Math.floor((Math.random() * 20) - 10); 372 | } 373 | Particle.prototype = Object.create(Entity.prototype); 374 | Particle.prototype.constructor = Entity; 375 | Particle.prototype.update = function(deltatime){ 376 | Entity.prototype.update.call(this,deltatime); 377 | this.time += deltatime; 378 | if (this.time >= this.maxTime) removeEntity(this); 379 | } 380 | 381 | //Bullet Entity 382 | var Bullet = function(){ 383 | Entity.call(this); 384 | this.name = "Bullet"; 385 | this.size = 10; 386 | this.time = 0; 387 | this.color = "rgba(200,200,200,1)"; 388 | this.particlesDelay = .5; 389 | } 390 | Bullet.prototype = Object.create(Entity.prototype); 391 | Bullet.prototype.constructor = Entity; 392 | Bullet.prototype.update = function(deltatime){ 393 | Entity.prototype.update.call(this,deltatime); 394 | 395 | //Check for collisions 396 | var me = this; 397 | entities.forEach(function(e){ 398 | if (e !== me && e.name != "Particle"){ 399 | if (overlaps(me,e)){ 400 | death(e); 401 | removeEntity(me); 402 | } 403 | } 404 | }) 405 | //Remove from game if outside bounds 406 | if (this.position.y < 0) removeEntity(this); 407 | 408 | //Create particles 409 | this.time += deltatime; 410 | if (this.time >= this.particlesDelay){ 411 | this.time = 0; 412 | var p = new Particle(); 413 | p.size = Math.floor((Math.random() * 5)+2); 414 | p.color = setAlpha("rgb(125,125,125)",Math.random()); 415 | //p.color = setAlpha(randomColor(100,255),Math.random()); //Rainbow colored particles 416 | p.velocity.x /=2; 417 | p.position.x = this.position.x + this.size /2 - p.size/2; 418 | p.position.y = this.position.y - p.size/2; 419 | entities.push(p); 420 | } 421 | } 422 | 423 | 424 | 425 | // These must remain at the bottom of this file & in this order // 426 | // ============================================================ // 427 | 428 | //HTML load event 429 | document.addEventListener('DOMContentLoaded', reset()); 430 | 431 | canvas.addEventListener("click",canvasClick); 432 | 433 | //Mouse move event 434 | canvas.addEventListener('mousemove', function(evt) { 435 | var mousePos = getMousePos(canvas, evt); 436 | if (player && !gameOver) player.position.x = mousePos.x; 437 | }, false); 438 | 439 | -------------------------------------------------------------------------------- /js/jquery.warpdrive.js: -------------------------------------------------------------------------------- 1 | /* 2 | Warp Drive jQuery plugin 3 | Version: 1.0.0 4 | 5 | Written by Niklas Knaack 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | */ 25 | 26 | ( function() { 27 | 28 | function WarpDrive( element, params ) { 29 | 30 | var settings = {}; 31 | settings.width = 480; 32 | settings.height = 480; 33 | settings.autoResize = false; 34 | settings.autoResizeMinWidth = null; 35 | settings.autoResizeMaxWidth = null; 36 | settings.autoResizeMinHeight = null; 37 | settings.autoResizeMaxHeight = null; 38 | settings.addMouseControls = true; 39 | settings.addTouchControls = true; 40 | settings.hideContextMenu = true; 41 | settings.starCount = 6666; 42 | settings.starBgCount = 2222; 43 | settings.starBgColor = { r:255, g:255, b:255 }; 44 | settings.starBgColorRangeMin = 10; 45 | settings.starBgColorRangeMax = 40; 46 | settings.starColor = { r:255, g:255, b:255 }; 47 | settings.starColorRangeMin = 10; 48 | settings.starColorRangeMax = 100; 49 | settings.starfieldBackgroundColor = { r:0, g:0, b:0 }; 50 | settings.starDirection = 1; 51 | settings.starSpeed = 20; 52 | settings.starSpeedMax = 200; 53 | settings.starSpeedAnimationDuration = 2; 54 | settings.starFov = 300; 55 | settings.starFovMin = 200; 56 | settings.starFovAnimationDuration = 2; 57 | settings.starRotationPermission = true; 58 | settings.starRotationDirection = 1; 59 | settings.starRotationSpeed = 0.0; 60 | settings.starRotationSpeedMax = 1.0; 61 | settings.starRotationAnimationDuration = 2; 62 | settings.starWarpLineLength = 2.0; 63 | settings.starWarpTunnelDiameter = 100; 64 | settings.starFollowMouseSensitivity = 0.025; 65 | settings.starFollowMouseXAxis = true; 66 | settings.starFollowMouseYAxis = true; 67 | 68 | //--- 69 | 70 | if ( params !== undefined ) { 71 | 72 | for ( var prop in params ) { 73 | 74 | if ( params.hasOwnProperty( prop ) && settings.hasOwnProperty( prop ) ) { 75 | 76 | settings[ prop ] = params[ prop ]; 77 | 78 | } 79 | 80 | } 81 | 82 | } 83 | 84 | //--- 85 | 86 | for ( var prop in settings ) { 87 | 88 | if ( settings.hasOwnProperty( prop ) && prop.indexOf( 'Duration' ) > -1 ) { 89 | 90 | settings[ prop ] = settings[ prop ] * 60; 91 | 92 | } 93 | 94 | } 95 | 96 | if ( typeof settings.starBgColor === 'string' && settings.starBgColor.indexOf( '#' ) > -1 ) { 97 | 98 | settings.starBgColor = hexToRgb( settings.starBgColor ); 99 | 100 | } else if ( typeof settings.starBgColor === 'string' && settings.starBgColor.indexOf( 'rgb' ) > -1 ) { 101 | 102 | settings.starBgColor = parseRGBString( settings.starBgColor ); 103 | 104 | } 105 | 106 | if ( typeof settings.starColor === 'string' && settings.starColor.indexOf( '#' ) > -1 ) { 107 | 108 | settings.starColor = hexToRgb( settings.starColor ); 109 | 110 | } else if ( typeof settings.starColor === 'string' && settings.starColor.indexOf( 'rgb' ) > -1 ) { 111 | 112 | settings.starColor = parseRGBString( settings.starColor ); 113 | 114 | } 115 | 116 | if ( typeof settings.starfieldBackgroundColor === 'string' && settings.starfieldBackgroundColor.indexOf( '#' ) > -1 ) { 117 | 118 | settings.starfieldBackgroundColor = hexToRgb( settings.starfieldBackgroundColor ); 119 | 120 | } else if ( typeof settings.starfieldBackgroundColor === 'string' && settings.starfieldBackgroundColor.indexOf( 'rgb' ) > -1 ) { 121 | 122 | settings.starfieldBackgroundColor = parseRGBString( settings.starfieldBackgroundColor ); 123 | 124 | } 125 | 126 | if ( !element ) { 127 | 128 | throw Error( '\n' + 'No div element found' ); 129 | 130 | } 131 | 132 | //--- 133 | 134 | var MATHPI180 = Math.PI / 180; 135 | var MATHPI2 = Math.PI * 2; 136 | 137 | var canvasWidth = settings.width; 138 | var canvasHeight = settings.height; 139 | 140 | var starCount = settings.starCount; 141 | var starBgCount = settings.starBgCount; 142 | 143 | var starBgColor = settings.starBgColor; 144 | var starBgColorRangeMin = settings.starBgColorRangeMin 145 | var starBgColorRangeMax = settings.starBgColorRangeMax 146 | var starColor = settings.starColor; 147 | var starColorRangeMin = settings.starColorRangeMin; 148 | var starColorRangeMax = settings.starColorRangeMax; 149 | 150 | var starfieldBackgroundColor = settings.starfieldBackgroundColor; 151 | 152 | var starDirection = settings.starDirection; 153 | 154 | var starSpeed = settings.starSpeed; 155 | var starSpeedMin = starSpeed; 156 | var starSpeedMax = settings.starSpeedMax; 157 | var starSpeedAnimationDuration = settings.starFovAnimationDuration; 158 | var starSpeedAnimationTime = 0; 159 | 160 | var starFov = settings.starFov; 161 | var starFovMin = settings.starFovMin; 162 | var starFovMax = starFov; 163 | var starFovAnimationDuration = settings.starFovAnimationDuration; 164 | var starFovAnimationTime = starFovAnimationDuration; 165 | 166 | var starRotation = 0.0; 167 | var starRotationPermission = settings.starRotationPermission; 168 | var starRotationDirection = settings.starRotationDirection; 169 | var starRotationSpeed = settings.starRotationSpeed; 170 | var starRotationSpeedMin = starRotationSpeed; 171 | var starRotationSpeedMax = settings.starRotationSpeedMax; 172 | var starRotationAnimationDuration = settings.starRotationAnimationDuration; 173 | var starRotationAnimationTime = 0; 174 | 175 | var starWarpLineLength = settings.starWarpLineLength; 176 | var starWarpTunnelDiameter = settings.starWarpTunnelDiameter; 177 | var starFollowMouseSensitivity = settings.starFollowMouseSensitivity; 178 | var starFollowMouseXAxis = settings.starFollowMouseXAxis; 179 | var starFollowMouseYAxis = settings.starFollowMouseYAxis; 180 | var starDistance = 8000; 181 | 182 | var starBorderFront = -starFovMin + 1; 183 | var starBorderBack = starDistance; 184 | 185 | var starHolder; 186 | var starBgHolder; 187 | var starColorLookupTable; 188 | var starBgColorLookupTable; 189 | 190 | var canvas, ctx, imageData, pix; 191 | 192 | var center; 193 | 194 | var mouseActive; 195 | var mouseDown; 196 | var mousePos; 197 | 198 | var paused = false; 199 | 200 | //--- 201 | 202 | function init() { 203 | 204 | canvas = document.createElement( 'canvas' ); 205 | canvas.style.backgroundColor = rgbToHex( starfieldBackgroundColor.r, starfieldBackgroundColor.g, starfieldBackgroundColor.b ); 206 | canvas.setAttribute( 'width', canvasWidth ); 207 | canvas.setAttribute( 'height', canvasHeight ); 208 | 209 | if ( settings.addMouseControls ) { 210 | 211 | canvas.addEventListener( 'mousemove', mouseMoveHandler, false ); 212 | canvas.addEventListener( 'mousedown', mouseDownHandler, false ); 213 | canvas.addEventListener( 'mouseup', mouseUpHandler, false ); 214 | canvas.addEventListener( 'mouseenter', mouseEnterHandler, false ); 215 | canvas.addEventListener( 'mouseleave', mouseLeaveHandler, false ); 216 | 217 | } 218 | 219 | if ( settings.addTouchControls ) { 220 | 221 | canvas.addEventListener( 'touchstart', touchStartHandler, false ); 222 | canvas.addEventListener( 'touchend', touchEndHandler, false ); 223 | canvas.addEventListener( 'touchmove', touchMoveHandler, false ); 224 | canvas.addEventListener( 'touchcancel', touchCancelHandler, false ); 225 | 226 | } 227 | 228 | if ( settings.hideContextMenu ) { 229 | 230 | canvas.oncontextmenu = function( e ) { 231 | 232 | e.preventDefault(); 233 | 234 | }; 235 | 236 | } 237 | 238 | element.appendChild( canvas ); 239 | 240 | //--- 241 | 242 | ctx = canvas.getContext( '2d' ); 243 | imageData = ctx.getImageData( 0, 0, canvasWidth, canvasHeight ); 244 | pix = imageData.data; 245 | 246 | //--- 247 | 248 | center = { x:canvas.width / 2, y:canvas.height / 2 }; 249 | 250 | mouseActive = false; 251 | mouseDown = false; 252 | mousePos = { x:center.x, y:center.y }; 253 | 254 | //--- 255 | 256 | starColorLookupTable = []; 257 | starBgColorLookupTable = []; 258 | starHolder = []; 259 | starBgHolder = []; 260 | 261 | addColorLookupTable( starColorLookupTable, starColorRangeMin, starColorRangeMax, starfieldBackgroundColor, starColor ); 262 | addColorLookupTable( starBgColorLookupTable, starBgColorRangeMin, starBgColorRangeMax, starfieldBackgroundColor, starBgColor ); 263 | addStars(); 264 | animloop(); 265 | 266 | //--- 267 | 268 | if ( settings.autoResize ) { 269 | 270 | window.addEventListener( 'resize', resizeHandler ); 271 | 272 | resize(); 273 | 274 | } 275 | 276 | }; 277 | 278 | //--- 279 | 280 | Math.easeInQuad = function( t, b, c, d ) { 281 | 282 | return c * t * t / ( d * d ) + b; 283 | 284 | }; 285 | 286 | Math.easeOutQuad = function( t, b, c, d ) { 287 | 288 | return -c * t * t / ( d * d ) + 2 * c * t / d + b; 289 | 290 | }; 291 | 292 | //--- 293 | //http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors 294 | 295 | function shadeBlend( p, c0, c1 ) { 296 | 297 | var n = p < 0 ? p * -1 : p, u = Math.round, w = parseInt; 298 | var f = w( c0.slice( 1 ), 16 ), t = w( ( c1 ? c1 : p < 0 ? '#000000' : '#FFFFFF' ).slice( 1 ), 16 ), R1 = f >> 16, G1 = f >> 8 & 0x00FF, B1 = f & 0x0000FF; 299 | 300 | return '#' + ( 0x1000000 + ( u ( ( ( t >> 16 ) - R1 ) * n ) + R1 ) * 0x10000 + ( u ( ( ( t >> 8 & 0x00FF ) - G1 ) * n ) + G1 ) * 0x100 + ( u ( ( ( t & 0x0000FF ) - B1 ) * n ) + B1 ) ).toString( 16 ).slice( 1 ); 301 | 302 | }; 303 | 304 | //--- 305 | //http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb 306 | 307 | function hexToRgb( hex ) { 308 | 309 | var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; 310 | 311 | hex = hex.replace( shorthandRegex, function( m, r, g, b ) { 312 | 313 | return r + r + g + g + b + b; 314 | 315 | } ); 316 | 317 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex ); 318 | 319 | return result ? { 320 | 321 | r: parseInt( result[ 1 ], 16 ), 322 | g: parseInt( result[ 2 ], 16 ), 323 | b: parseInt( result[ 3 ], 16 ) 324 | 325 | } : null; 326 | 327 | }; 328 | 329 | function rgbToHex( r, g, b ) { 330 | 331 | var rgb = b | ( g << 8 ) | ( r << 16 ); 332 | 333 | return '#' + ( 0x1000000 + rgb ).toString( 16 ).slice( 1 ); 334 | 335 | }; 336 | 337 | //--- 338 | 339 | function parseRGBString( rgbString ) { 340 | 341 | rgbString = rgbString.replace( /\s+/g, '' ); 342 | 343 | var rgbValues = rgbString.split( '(' )[ 1 ].split( ')' )[ 0 ].split( ',' ); 344 | 345 | return { r:rgbValues[ 0 ], g:rgbValues[ 1 ], b:rgbValues[ 2 ] }; 346 | 347 | } 348 | 349 | //--- 350 | 351 | function clearImageData() { 352 | 353 | for ( var i = 0, l = pix.length; i < l; i += 4 ) { 354 | 355 | pix[ i ] = starfieldBackgroundColor.r; 356 | pix[ i + 1 ] = starfieldBackgroundColor.g; 357 | pix[ i + 2 ] = starfieldBackgroundColor.b; 358 | pix[ i + 3 ] = 0; 359 | 360 | } 361 | 362 | }; 363 | 364 | function setPixelAdditive( x, y, r, g, b, a ) { 365 | 366 | var i = ( x + y * canvasWidth ) * 4; 367 | 368 | pix[ i ] = pix[ i ] + r; 369 | pix[ i + 1 ] = pix[ i + 1 ] + g; 370 | pix[ i + 2 ] = pix[ i + 2 ] + b; 371 | pix[ i + 3 ] = a; 372 | 373 | }; 374 | 375 | //--- 376 | 377 | function drawLine( x1, y1, x2, y2, r, g, b, a ) { 378 | 379 | var dx = Math.abs( x2 - x1 ); 380 | var dy = Math.abs( y2 - y1 ); 381 | 382 | var sx = ( x1 < x2 ) ? 1 : -1; 383 | var sy = ( y1 < y2 ) ? 1 : -1; 384 | 385 | var err = dx - dy; 386 | 387 | var lx = x1; 388 | var ly = y1; 389 | 390 | while ( true ) { 391 | 392 | if ( lx > -1 && lx < canvasWidth && ly > -1 && ly < canvasHeight ) { 393 | 394 | setPixelAdditive( lx, ly, r, g, b, a ); 395 | 396 | } 397 | 398 | if ( ( lx === x2 ) && ( ly === y2 ) ) 399 | break; 400 | 401 | var e2 = 2 * err; 402 | 403 | if ( e2 > -dx ) { 404 | 405 | err -= dy; 406 | lx += sx; 407 | 408 | } 409 | 410 | if ( e2 < dy ) { 411 | 412 | err += dx; 413 | ly += sy; 414 | 415 | } 416 | 417 | } 418 | 419 | }; 420 | 421 | //--- 422 | 423 | function addColorLookupTable( colorLookupTable, colorRangeMin, colorRangeMax, colorRGBStart, colorRGBEnd ) { 424 | 425 | var colorHexStart = rgbToHex( colorRGBStart.r, colorRGBStart.g, colorRGBStart.b ); 426 | var colorHexEnd = rgbToHex( colorRGBEnd.r, colorRGBEnd.g, colorRGBEnd.b ); 427 | 428 | var colorRange = []; 429 | var colorEndValues = []; 430 | 431 | var percent; 432 | 433 | var i, l, j, k; 434 | 435 | for ( i = 0, l = 100; i <= l; i++ ) { 436 | 437 | percent = i / 100; 438 | 439 | colorRange.push( shadeBlend( percent, colorHexStart, colorHexEnd ) ); 440 | 441 | } 442 | 443 | for ( i = 0, l = colorRangeMax - colorRangeMin; i <= l; i++ ) { 444 | 445 | var index = i + colorRangeMin; 446 | 447 | colorEndValues.push( colorRange[ index ] ); 448 | 449 | } 450 | 451 | for ( i = 0, l = colorEndValues.length; i < l; i++ ) { 452 | 453 | colorRange = []; 454 | 455 | for ( j = 0, k = 100; j <= k; j++ ) { 456 | 457 | percent = j / 100; 458 | 459 | colorRange.push( hexToRgb( shadeBlend( percent, colorHexStart, colorEndValues[ i ] ) ) ); 460 | 461 | 462 | } 463 | 464 | colorLookupTable.push( colorRange ); 465 | 466 | } 467 | 468 | }; 469 | 470 | //--- 471 | 472 | function getStarPosition( radius, sideLength ) { 473 | 474 | var x = Math.random() * sideLength - ( sideLength / 2 ); 475 | var y = Math.random() * sideLength - ( sideLength / 2 ); 476 | 477 | if ( radius > 0 ) { 478 | 479 | while ( Math.sqrt( x * x + y * y ) < radius ) { 480 | 481 | x = Math.random() * sideLength - ( sideLength / 2 ); 482 | y = Math.random() * sideLength - ( sideLength / 2 ); 483 | 484 | } 485 | 486 | } 487 | 488 | return { x:x, y:y }; 489 | 490 | }; 491 | 492 | function addStar( x, y, z, ox, oy, oz ) { 493 | 494 | var star = {}; 495 | star.x = x; 496 | star.y = y; 497 | star.z = z; 498 | star.ox = ox; 499 | star.oy = oy; 500 | star.x2d = 0; 501 | star.y2d = 0; 502 | 503 | return star; 504 | 505 | }; 506 | 507 | function addStars() { 508 | 509 | var i; 510 | 511 | var x, y, z; 512 | 513 | var star, starPosition; 514 | 515 | for ( i = 0; i < starBgCount; i++ ) { 516 | 517 | starPosition = getStarPosition( 0, 20000 ); 518 | 519 | x = starPosition.x; 520 | y = starPosition.y; 521 | z = Math.round( Math.random() * starDistance ); 522 | 523 | star = addStar( x, y, z, x, y, z ); 524 | star.colorIndex = Math.floor( Math.random() * starBgColorLookupTable.length ); 525 | star.colorLookupTable = starBgColorLookupTable[ star.colorIndex ]; 526 | star.color = star.colorLookupTable[ Math.floor( Math.random() * 100 ) ]; 527 | 528 | starBgHolder.push( star ); 529 | 530 | } 531 | 532 | for ( i = 0; i < starCount; i++ ) { 533 | 534 | starPosition = getStarPosition( starWarpTunnelDiameter, 10000 ); 535 | 536 | x = starPosition.x; 537 | y = starPosition.y; 538 | z = Math.round( Math.random() * starDistance ); 539 | 540 | star = addStar( x, y, z, x, y, z ); 541 | star.distance = starDistance - z; 542 | star.distanceTotal = Math.round( starDistance + starFov ); 543 | star.colorIndex = Math.floor( Math.random() * starColorLookupTable.length ); 544 | star.colorLookupTable = starColorLookupTable[ star.colorIndex ]; 545 | star.color = star.colorLookupTable[ Math.floor( ( star.distance / star.distanceTotal ) * 100 ) ]; 546 | 547 | starHolder.push( star ); 548 | 549 | } 550 | 551 | }; 552 | 553 | //--- 554 | 555 | window.requestAnimFrame = ( function() { 556 | 557 | return window.requestAnimationFrame || 558 | window.webkitRequestAnimationFrame || 559 | window.mozRequestAnimationFrame || 560 | function( callback ) { 561 | window.setTimeout( callback, 1000 / 60 ); 562 | }; 563 | 564 | } )(); 565 | 566 | function animloop() { 567 | 568 | requestAnimFrame( animloop ); 569 | 570 | if ( !paused ) { 571 | 572 | render(); 573 | 574 | } 575 | 576 | }; 577 | 578 | //--- 579 | 580 | function render() { 581 | 582 | clearImageData(); 583 | 584 | //--- 585 | 586 | var i, j, l, k, m, n; 587 | 588 | //--- 589 | 590 | var star; 591 | var scale; 592 | 593 | //--- 594 | 595 | if ( starRotationPermission ) { 596 | 597 | if ( mouseDown ) { 598 | 599 | starRotationAnimationTime += 1; 600 | 601 | if ( starRotationAnimationTime > starRotationAnimationDuration ) 602 | starRotationAnimationTime = starRotationAnimationDuration; 603 | 604 | } else { 605 | 606 | starRotationAnimationTime -= 1; 607 | 608 | if ( starRotationAnimationTime < 0 ) 609 | starRotationAnimationTime = 0; 610 | 611 | } 612 | 613 | starRotationSpeed = Math.easeOutQuad( starRotationAnimationTime, starRotationSpeedMin, starRotationSpeedMax, starRotationAnimationDuration ); 614 | starRotation -= starRotationSpeed * starRotationDirection; 615 | 616 | } 617 | 618 | //--- 619 | 620 | if ( mouseActive ) { 621 | 622 | starSpeedAnimationTime += 1; 623 | 624 | if ( starSpeedAnimationTime > starSpeedAnimationDuration ) 625 | starSpeedAnimationTime = starSpeedAnimationDuration; 626 | 627 | starFovAnimationTime -= 1; 628 | 629 | if ( starFovAnimationTime < 0 ) 630 | starFovAnimationTime = 0; 631 | 632 | //--- 633 | 634 | if ( starFollowMouseXAxis ) { 635 | 636 | center.x += ( mousePos.x - center.x ) * starFollowMouseSensitivity; 637 | 638 | } 639 | 640 | if ( starFollowMouseYAxis ) { 641 | 642 | center.y += ( mousePos.y - center.y ) * starFollowMouseSensitivity; 643 | 644 | } 645 | 646 | } else { 647 | 648 | starSpeedAnimationTime -= 1; 649 | 650 | if ( starSpeedAnimationTime < 0 ) 651 | starSpeedAnimationTime = 0; 652 | 653 | starFovAnimationTime += 1; 654 | 655 | if ( starFovAnimationTime > starFovAnimationDuration ) 656 | starFovAnimationTime = starFovAnimationDuration; 657 | 658 | //--- 659 | 660 | if ( starFollowMouseXAxis ) { 661 | 662 | center.x += ( ( canvas.width / 2 ) - center.x ) * starFollowMouseSensitivity; 663 | 664 | } 665 | 666 | if ( starFollowMouseYAxis ) { 667 | 668 | center.y += ( ( canvas.height / 2 ) - center.y ) * starFollowMouseSensitivity; 669 | 670 | } 671 | 672 | } 673 | 674 | starSpeed = Math.easeOutQuad( starSpeedAnimationTime, 0, starSpeedMax - starSpeedMin, starSpeedAnimationDuration ) + starSpeedMin; 675 | starFov = Math.easeInQuad( starFovAnimationTime, 0, starFovMax - starFovMin, starFovAnimationDuration ) + starFovMin; 676 | 677 | //--- 678 | 679 | starBorderFront = -starFov + 1; 680 | 681 | //--- 682 | 683 | var warpSpeedValue = starSpeed * ( starSpeed / ( starSpeedMax / starWarpLineLength ) ); 684 | 685 | //--- 686 | //stars bg 687 | 688 | for ( i = 0, l = starBgHolder.length; i < l; i++ ) { 689 | 690 | star = starBgHolder[ i ]; 691 | 692 | scale = starFov / ( starFov + star.z ); 693 | 694 | star.x2d = ( star.x * scale ) + center.x; 695 | star.y2d = ( star.y * scale ) + center.y; 696 | 697 | if ( star.x2d > -1 && star.x2d < canvasWidth && star.y2d > -1 && star.y2d < canvasHeight ) { 698 | 699 | setPixelAdditive( star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255 ); 700 | 701 | } 702 | 703 | } 704 | 705 | //--- 706 | //stars moving 707 | 708 | for ( i = 0, l = starHolder.length; i < l; i++ ) { 709 | 710 | star = starHolder[ i ]; 711 | 712 | //--- 713 | //star distance calc 714 | 715 | star.distanceTotal = Math.round( starDistance + starFov ); 716 | 717 | //--- 718 | //star movement 719 | 720 | if ( starDirection >= 0 ) { 721 | 722 | star.z -= starSpeed; 723 | star.distance += starSpeed; 724 | 725 | if ( star.z < starBorderFront ) { 726 | 727 | star.z = starBorderBack; 728 | star.distance = 0; 729 | 730 | } 731 | 732 | } else { 733 | 734 | star.z += starSpeed; 735 | star.distance -= starSpeed; 736 | 737 | if ( star.z > starBorderBack ) { 738 | 739 | star.z = starBorderFront; 740 | star.distance = star.distanceTotal; 741 | 742 | } 743 | 744 | } 745 | 746 | //--- 747 | //star color 748 | 749 | star.color = star.colorLookupTable[ Math.floor( ( star.distance / star.distanceTotal ) * 100 ) ]; 750 | 751 | //--- 752 | //star position & draw 753 | 754 | scale = starFov / ( starFov + star.z ); 755 | 756 | star.x2d = ( star.x * scale ) + center.x; 757 | star.y2d = ( star.y * scale ) + center.y; 758 | 759 | if ( starSpeed === starSpeedMin ) { 760 | 761 | if ( star.x2d > -1 && star.x2d < canvasWidth && star.y2d > -1 && star.y2d < canvasHeight ) { 762 | 763 | setPixelAdditive( star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255 ); 764 | 765 | } 766 | 767 | } else { 768 | 769 | var nz = star.z + warpSpeedValue; 770 | 771 | scale = starFov / ( starFov + nz ); 772 | 773 | var x2d = ( star.x * scale ) + center.x; 774 | var y2d = ( star.y * scale ) + center.y; 775 | 776 | if ( x2d > -1 && x2d < canvasWidth && y2d > -1 && y2d < canvasHeight ) { 777 | 778 | drawLine( star.x2d | 0, star.y2d | 0, x2d | 0, y2d | 0, star.color.r, star.color.g, star.color.b, 255 ); 779 | 780 | } 781 | 782 | } 783 | 784 | //--- 785 | //star rotation 786 | 787 | if ( starRotationSpeed !== starRotationSpeedMin ) { 788 | 789 | var radians = MATHPI180 * starRotation; 790 | 791 | var cos = Math.cos( radians ); 792 | var sin = Math.sin( radians ); 793 | 794 | star.x = cos * star.ox + sin * star.oy; 795 | star.y = cos * star.oy - sin * star.ox; 796 | 797 | } 798 | 799 | } 800 | 801 | //--- 802 | 803 | ctx.putImageData( imageData, 0, 0 ); 804 | 805 | }; 806 | 807 | function resizeHandler( event ) { 808 | 809 | resize(); 810 | 811 | }; 812 | 813 | function resize() { 814 | 815 | canvasWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 816 | canvasHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 817 | 818 | if ( settings.autoResizeMinWidth && canvasWidth < settings.autoResizeMinWidth ) { 819 | 820 | canvasWidth = settings.autoResizeMinWidth; 821 | 822 | } else if ( settings.autoResizeMaxWidth && canvasWidth > settings.autoResizeMaxWidth ) { 823 | 824 | canvasWidth = settings.autoResizeMaxWidth; 825 | 826 | } 827 | 828 | if ( settings.autoResizeMinHeight && canvasHeight < settings.autoResizeMinHeight ) { 829 | 830 | canvasHeight = settings.autoResizeMinHeight; 831 | 832 | } else if ( settings.autoResizeMaxHeight && canvasHeight > settings.autoResizeMaxHeight ) { 833 | 834 | canvasHeight = settings.autoResizeMaxHeight; 835 | 836 | } 837 | 838 | //--- 839 | 840 | canvas.setAttribute( 'width', canvasWidth ); 841 | canvas.setAttribute( 'height', canvasHeight ); 842 | 843 | center = { x:canvas.width / 2, y:canvas.height / 2 }; 844 | 845 | //--- 846 | 847 | imageData = ctx.getImageData( 0, 0, canvasWidth, canvasHeight ); 848 | pix = imageData.data; 849 | 850 | }; 851 | 852 | //--- 853 | 854 | function mouseMoveHandler( event ) { 855 | 856 | mousePos = getMousePos( canvas, event ); 857 | 858 | }; 859 | 860 | function mouseEnterHandler( event ) { 861 | 862 | mouseActive = true; 863 | 864 | }; 865 | 866 | function mouseLeaveHandler( event ) { 867 | 868 | mouseActive = false; 869 | mouseDown = false; 870 | 871 | }; 872 | 873 | function mouseDownHandler( event ) { 874 | 875 | mouseDown = true; 876 | 877 | }; 878 | 879 | function mouseUpHandler( event ) { 880 | 881 | mouseDown = false; 882 | 883 | }; 884 | 885 | //--- 886 | 887 | function getMousePos( canvas, event ) { 888 | 889 | var rect = canvas.getBoundingClientRect(); 890 | 891 | return { x: event.clientX - rect.left, y: event.clientY - rect.top }; 892 | 893 | }; 894 | 895 | //--- 896 | 897 | function touchStartHandler( event ) { 898 | 899 | event.preventDefault(); 900 | 901 | mouseDown = true; 902 | mouseActive = true; 903 | 904 | }; 905 | 906 | function touchEndHandler( event ) { 907 | 908 | event.preventDefault(); 909 | 910 | mouseDown = false; 911 | mouseActive = false; 912 | 913 | }; 914 | 915 | function touchMoveHandler( event ) { 916 | 917 | event.preventDefault(); 918 | 919 | mousePos = getTouchPos( canvas, event ); 920 | 921 | }; 922 | 923 | function touchCancelHandler( event ) { 924 | 925 | mouseDown = false; 926 | mouseActive = false; 927 | 928 | }; 929 | 930 | //--- 931 | 932 | function getTouchPos( canvas, event ) { 933 | 934 | var rect = canvas.getBoundingClientRect(); 935 | 936 | return { x: event.touches[ 0 ].clientX - rect.left, y: event.touches[ 0 ].clientY - rect.top }; 937 | 938 | }; 939 | 940 | //--- 941 | 942 | this.pause = function() { 943 | 944 | paused = true; 945 | 946 | }; 947 | 948 | this.unpause = function() { 949 | 950 | paused = false; 951 | 952 | }; 953 | 954 | //--- 955 | 956 | init(); 957 | 958 | }; 959 | 960 | window.WarpDrive = WarpDrive; 961 | 962 | } () ); 963 | 964 | if ( typeof jQuery !== 'undefined' ) { 965 | 966 | ( function( $ ) { 967 | 968 | $.fn.warpDrive = function( params ) { 969 | 970 | var args = arguments; 971 | 972 | return this.each( function() { 973 | 974 | if ( !$.data( this, 'plugin_WarpDrive' ) ) { 975 | 976 | $.data( this, 'plugin_WarpDrive', new WarpDrive( this, params ) ); 977 | 978 | } else { 979 | 980 | var plugin = $.data( this, 'plugin_WarpDrive' ); 981 | 982 | if ( plugin[ params ] ) { 983 | 984 | plugin[ params ].apply( this, Array.prototype.slice.call( args, 1 ) ); 985 | 986 | } else { 987 | 988 | $.error( 'Method ' + params + ' does not exist on jQuery.warpDrive' ); 989 | 990 | } 991 | 992 | } 993 | 994 | } ); 995 | 996 | }; 997 | 998 | } ( jQuery ) ); 999 | 1000 | } -------------------------------------------------------------------------------- /sky/js/jquery.warpdrive.js: -------------------------------------------------------------------------------- 1 | /* 2 | Warp Drive jQuery plugin 3 | Version: 1.0.0 4 | 5 | Written by Niklas Knaack 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | */ 25 | 26 | ( function() { 27 | 28 | function WarpDrive( element, params ) { 29 | 30 | var settings = {}; 31 | settings.width = 480; 32 | settings.height = 480; 33 | settings.autoResize = false; 34 | settings.autoResizeMinWidth = null; 35 | settings.autoResizeMaxWidth = null; 36 | settings.autoResizeMinHeight = null; 37 | settings.autoResizeMaxHeight = null; 38 | settings.addMouseControls = true; 39 | settings.addTouchControls = true; 40 | settings.hideContextMenu = true; 41 | settings.starCount = 6666; 42 | settings.starBgCount = 2222; 43 | settings.starBgColor = { r:255, g:255, b:255 }; 44 | settings.starBgColorRangeMin = 10; 45 | settings.starBgColorRangeMax = 40; 46 | settings.starColor = { r:255, g:255, b:255 }; 47 | settings.starColorRangeMin = 10; 48 | settings.starColorRangeMax = 100; 49 | settings.starfieldBackgroundColor = { r:0, g:0, b:0 }; 50 | settings.starDirection = 1; 51 | settings.starSpeed = 20; 52 | settings.starSpeedMax = 200; 53 | settings.starSpeedAnimationDuration = 2; 54 | settings.starFov = 300; 55 | settings.starFovMin = 200; 56 | settings.starFovAnimationDuration = 2; 57 | settings.starRotationPermission = true; 58 | settings.starRotationDirection = 1; 59 | settings.starRotationSpeed = 0.0; 60 | settings.starRotationSpeedMax = 1.0; 61 | settings.starRotationAnimationDuration = 2; 62 | settings.starWarpLineLength = 2.0; 63 | settings.starWarpTunnelDiameter = 100; 64 | settings.starFollowMouseSensitivity = 0.025; 65 | settings.starFollowMouseXAxis = true; 66 | settings.starFollowMouseYAxis = true; 67 | 68 | //--- 69 | 70 | if ( params !== undefined ) { 71 | 72 | for ( var prop in params ) { 73 | 74 | if ( params.hasOwnProperty( prop ) && settings.hasOwnProperty( prop ) ) { 75 | 76 | settings[ prop ] = params[ prop ]; 77 | 78 | } 79 | 80 | } 81 | 82 | } 83 | 84 | //--- 85 | 86 | for ( var prop in settings ) { 87 | 88 | if ( settings.hasOwnProperty( prop ) && prop.indexOf( 'Duration' ) > -1 ) { 89 | 90 | settings[ prop ] = settings[ prop ] * 60; 91 | 92 | } 93 | 94 | } 95 | 96 | if ( typeof settings.starBgColor === 'string' && settings.starBgColor.indexOf( '#' ) > -1 ) { 97 | 98 | settings.starBgColor = hexToRgb( settings.starBgColor ); 99 | 100 | } else if ( typeof settings.starBgColor === 'string' && settings.starBgColor.indexOf( 'rgb' ) > -1 ) { 101 | 102 | settings.starBgColor = parseRGBString( settings.starBgColor ); 103 | 104 | } 105 | 106 | if ( typeof settings.starColor === 'string' && settings.starColor.indexOf( '#' ) > -1 ) { 107 | 108 | settings.starColor = hexToRgb( settings.starColor ); 109 | 110 | } else if ( typeof settings.starColor === 'string' && settings.starColor.indexOf( 'rgb' ) > -1 ) { 111 | 112 | settings.starColor = parseRGBString( settings.starColor ); 113 | 114 | } 115 | 116 | if ( typeof settings.starfieldBackgroundColor === 'string' && settings.starfieldBackgroundColor.indexOf( '#' ) > -1 ) { 117 | 118 | settings.starfieldBackgroundColor = hexToRgb( settings.starfieldBackgroundColor ); 119 | 120 | } else if ( typeof settings.starfieldBackgroundColor === 'string' && settings.starfieldBackgroundColor.indexOf( 'rgb' ) > -1 ) { 121 | 122 | settings.starfieldBackgroundColor = parseRGBString( settings.starfieldBackgroundColor ); 123 | 124 | } 125 | 126 | if ( !element ) { 127 | 128 | throw Error( '\n' + 'No div element found' ); 129 | 130 | } 131 | 132 | //--- 133 | 134 | var MATHPI180 = Math.PI / 180; 135 | var MATHPI2 = Math.PI * 2; 136 | 137 | var canvasWidth = settings.width; 138 | var canvasHeight = settings.height; 139 | 140 | var starCount = settings.starCount; 141 | var starBgCount = settings.starBgCount; 142 | 143 | var starBgColor = settings.starBgColor; 144 | var starBgColorRangeMin = settings.starBgColorRangeMin 145 | var starBgColorRangeMax = settings.starBgColorRangeMax 146 | var starColor = settings.starColor; 147 | var starColorRangeMin = settings.starColorRangeMin; 148 | var starColorRangeMax = settings.starColorRangeMax; 149 | 150 | var starfieldBackgroundColor = settings.starfieldBackgroundColor; 151 | 152 | var starDirection = settings.starDirection; 153 | 154 | var starSpeed = settings.starSpeed; 155 | var starSpeedMin = starSpeed; 156 | var starSpeedMax = settings.starSpeedMax; 157 | var starSpeedAnimationDuration = settings.starFovAnimationDuration; 158 | var starSpeedAnimationTime = 0; 159 | 160 | var starFov = settings.starFov; 161 | var starFovMin = settings.starFovMin; 162 | var starFovMax = starFov; 163 | var starFovAnimationDuration = settings.starFovAnimationDuration; 164 | var starFovAnimationTime = starFovAnimationDuration; 165 | 166 | var starRotation = 0.0; 167 | var starRotationPermission = settings.starRotationPermission; 168 | var starRotationDirection = settings.starRotationDirection; 169 | var starRotationSpeed = settings.starRotationSpeed; 170 | var starRotationSpeedMin = starRotationSpeed; 171 | var starRotationSpeedMax = settings.starRotationSpeedMax; 172 | var starRotationAnimationDuration = settings.starRotationAnimationDuration; 173 | var starRotationAnimationTime = 0; 174 | 175 | var starWarpLineLength = settings.starWarpLineLength; 176 | var starWarpTunnelDiameter = settings.starWarpTunnelDiameter; 177 | var starFollowMouseSensitivity = settings.starFollowMouseSensitivity; 178 | var starFollowMouseXAxis = settings.starFollowMouseXAxis; 179 | var starFollowMouseYAxis = settings.starFollowMouseYAxis; 180 | var starDistance = 8000; 181 | 182 | var starBorderFront = -starFovMin + 1; 183 | var starBorderBack = starDistance; 184 | 185 | var starHolder; 186 | var starBgHolder; 187 | var starColorLookupTable; 188 | var starBgColorLookupTable; 189 | 190 | var canvas, ctx, imageData, pix; 191 | 192 | var center; 193 | 194 | var mouseActive; 195 | var mouseDown; 196 | var mousePos; 197 | 198 | var paused = false; 199 | 200 | //--- 201 | 202 | function init() { 203 | 204 | canvas = document.createElement( 'canvas' ); 205 | canvas.style.backgroundColor = rgbToHex( starfieldBackgroundColor.r, starfieldBackgroundColor.g, starfieldBackgroundColor.b ); 206 | canvas.setAttribute( 'width', canvasWidth ); 207 | canvas.setAttribute( 'height', canvasHeight ); 208 | 209 | if ( settings.addMouseControls ) { 210 | 211 | canvas.addEventListener( 'mousemove', mouseMoveHandler, false ); 212 | canvas.addEventListener( 'mousedown', mouseDownHandler, false ); 213 | canvas.addEventListener( 'mouseup', mouseUpHandler, false ); 214 | canvas.addEventListener( 'mouseenter', mouseEnterHandler, false ); 215 | canvas.addEventListener( 'mouseleave', mouseLeaveHandler, false ); 216 | 217 | } 218 | 219 | if ( settings.addTouchControls ) { 220 | 221 | canvas.addEventListener( 'touchstart', touchStartHandler, false ); 222 | canvas.addEventListener( 'touchend', touchEndHandler, false ); 223 | canvas.addEventListener( 'touchmove', touchMoveHandler, false ); 224 | canvas.addEventListener( 'touchcancel', touchCancelHandler, false ); 225 | 226 | } 227 | 228 | if ( settings.hideContextMenu ) { 229 | 230 | canvas.oncontextmenu = function( e ) { 231 | 232 | e.preventDefault(); 233 | 234 | }; 235 | 236 | } 237 | 238 | element.appendChild( canvas ); 239 | 240 | //--- 241 | 242 | ctx = canvas.getContext( '2d' ); 243 | imageData = ctx.getImageData( 0, 0, canvasWidth, canvasHeight ); 244 | pix = imageData.data; 245 | 246 | //--- 247 | 248 | center = { x:canvas.width / 2, y:canvas.height / 2 }; 249 | 250 | mouseActive = false; 251 | mouseDown = false; 252 | mousePos = { x:center.x, y:center.y }; 253 | 254 | //--- 255 | 256 | starColorLookupTable = []; 257 | starBgColorLookupTable = []; 258 | starHolder = []; 259 | starBgHolder = []; 260 | 261 | addColorLookupTable( starColorLookupTable, starColorRangeMin, starColorRangeMax, starfieldBackgroundColor, starColor ); 262 | addColorLookupTable( starBgColorLookupTable, starBgColorRangeMin, starBgColorRangeMax, starfieldBackgroundColor, starBgColor ); 263 | addStars(); 264 | animloop(); 265 | 266 | //--- 267 | 268 | if ( settings.autoResize ) { 269 | 270 | window.addEventListener( 'resize', resizeHandler ); 271 | 272 | resize(); 273 | 274 | } 275 | 276 | }; 277 | 278 | //--- 279 | 280 | Math.easeInQuad = function( t, b, c, d ) { 281 | 282 | return c * t * t / ( d * d ) + b; 283 | 284 | }; 285 | 286 | Math.easeOutQuad = function( t, b, c, d ) { 287 | 288 | return -c * t * t / ( d * d ) + 2 * c * t / d + b; 289 | 290 | }; 291 | 292 | //--- 293 | //http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors 294 | 295 | function shadeBlend( p, c0, c1 ) { 296 | 297 | var n = p < 0 ? p * -1 : p, u = Math.round, w = parseInt; 298 | var f = w( c0.slice( 1 ), 16 ), t = w( ( c1 ? c1 : p < 0 ? '#000000' : '#FFFFFF' ).slice( 1 ), 16 ), R1 = f >> 16, G1 = f >> 8 & 0x00FF, B1 = f & 0x0000FF; 299 | 300 | return '#' + ( 0x1000000 + ( u ( ( ( t >> 16 ) - R1 ) * n ) + R1 ) * 0x10000 + ( u ( ( ( t >> 8 & 0x00FF ) - G1 ) * n ) + G1 ) * 0x100 + ( u ( ( ( t & 0x0000FF ) - B1 ) * n ) + B1 ) ).toString( 16 ).slice( 1 ); 301 | 302 | }; 303 | 304 | //--- 305 | //http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb 306 | 307 | function hexToRgb( hex ) { 308 | 309 | var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; 310 | 311 | hex = hex.replace( shorthandRegex, function( m, r, g, b ) { 312 | 313 | return r + r + g + g + b + b; 314 | 315 | } ); 316 | 317 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex ); 318 | 319 | return result ? { 320 | 321 | r: parseInt( result[ 1 ], 16 ), 322 | g: parseInt( result[ 2 ], 16 ), 323 | b: parseInt( result[ 3 ], 16 ) 324 | 325 | } : null; 326 | 327 | }; 328 | 329 | function rgbToHex( r, g, b ) { 330 | 331 | var rgb = b | ( g << 8 ) | ( r << 16 ); 332 | 333 | return '#' + ( 0x1000000 + rgb ).toString( 16 ).slice( 1 ); 334 | 335 | }; 336 | 337 | //--- 338 | 339 | function parseRGBString( rgbString ) { 340 | 341 | rgbString = rgbString.replace( /\s+/g, '' ); 342 | 343 | var rgbValues = rgbString.split( '(' )[ 1 ].split( ')' )[ 0 ].split( ',' ); 344 | 345 | return { r:rgbValues[ 0 ], g:rgbValues[ 1 ], b:rgbValues[ 2 ] }; 346 | 347 | } 348 | 349 | //--- 350 | 351 | function clearImageData() { 352 | 353 | for ( var i = 0, l = pix.length; i < l; i += 4 ) { 354 | 355 | pix[ i ] = starfieldBackgroundColor.r; 356 | pix[ i + 1 ] = starfieldBackgroundColor.g; 357 | pix[ i + 2 ] = starfieldBackgroundColor.b; 358 | pix[ i + 3 ] = 0; 359 | 360 | } 361 | 362 | }; 363 | 364 | function setPixelAdditive( x, y, r, g, b, a ) { 365 | 366 | var i = ( x + y * canvasWidth ) * 4; 367 | 368 | pix[ i ] = pix[ i ] + r; 369 | pix[ i + 1 ] = pix[ i + 1 ] + g; 370 | pix[ i + 2 ] = pix[ i + 2 ] + b; 371 | pix[ i + 3 ] = a; 372 | 373 | }; 374 | 375 | //--- 376 | 377 | function drawLine( x1, y1, x2, y2, r, g, b, a ) { 378 | 379 | var dx = Math.abs( x2 - x1 ); 380 | var dy = Math.abs( y2 - y1 ); 381 | 382 | var sx = ( x1 < x2 ) ? 1 : -1; 383 | var sy = ( y1 < y2 ) ? 1 : -1; 384 | 385 | var err = dx - dy; 386 | 387 | var lx = x1; 388 | var ly = y1; 389 | 390 | while ( true ) { 391 | 392 | if ( lx > -1 && lx < canvasWidth && ly > -1 && ly < canvasHeight ) { 393 | 394 | setPixelAdditive( lx, ly, r, g, b, a ); 395 | 396 | } 397 | 398 | if ( ( lx === x2 ) && ( ly === y2 ) ) 399 | break; 400 | 401 | var e2 = 2 * err; 402 | 403 | if ( e2 > -dx ) { 404 | 405 | err -= dy; 406 | lx += sx; 407 | 408 | } 409 | 410 | if ( e2 < dy ) { 411 | 412 | err += dx; 413 | ly += sy; 414 | 415 | } 416 | 417 | } 418 | 419 | }; 420 | 421 | //--- 422 | 423 | function addColorLookupTable( colorLookupTable, colorRangeMin, colorRangeMax, colorRGBStart, colorRGBEnd ) { 424 | 425 | var colorHexStart = rgbToHex( colorRGBStart.r, colorRGBStart.g, colorRGBStart.b ); 426 | var colorHexEnd = rgbToHex( colorRGBEnd.r, colorRGBEnd.g, colorRGBEnd.b ); 427 | 428 | var colorRange = []; 429 | var colorEndValues = []; 430 | 431 | var percent; 432 | 433 | var i, l, j, k; 434 | 435 | for ( i = 0, l = 100; i <= l; i++ ) { 436 | 437 | percent = i / 100; 438 | 439 | colorRange.push( shadeBlend( percent, colorHexStart, colorHexEnd ) ); 440 | 441 | } 442 | 443 | for ( i = 0, l = colorRangeMax - colorRangeMin; i <= l; i++ ) { 444 | 445 | var index = i + colorRangeMin; 446 | 447 | colorEndValues.push( colorRange[ index ] ); 448 | 449 | } 450 | 451 | for ( i = 0, l = colorEndValues.length; i < l; i++ ) { 452 | 453 | colorRange = []; 454 | 455 | for ( j = 0, k = 100; j <= k; j++ ) { 456 | 457 | percent = j / 100; 458 | 459 | colorRange.push( hexToRgb( shadeBlend( percent, colorHexStart, colorEndValues[ i ] ) ) ); 460 | 461 | 462 | } 463 | 464 | colorLookupTable.push( colorRange ); 465 | 466 | } 467 | 468 | }; 469 | 470 | //--- 471 | 472 | function getStarPosition( radius, sideLength ) { 473 | 474 | var x = Math.random() * sideLength - ( sideLength / 2 ); 475 | var y = Math.random() * sideLength - ( sideLength / 2 ); 476 | 477 | if ( radius > 0 ) { 478 | 479 | while ( Math.sqrt( x * x + y * y ) < radius ) { 480 | 481 | x = Math.random() * sideLength - ( sideLength / 2 ); 482 | y = Math.random() * sideLength - ( sideLength / 2 ); 483 | 484 | } 485 | 486 | } 487 | 488 | return { x:x, y:y }; 489 | 490 | }; 491 | 492 | function addStar( x, y, z, ox, oy, oz ) { 493 | 494 | var star = {}; 495 | star.x = x; 496 | star.y = y; 497 | star.z = z; 498 | star.ox = ox; 499 | star.oy = oy; 500 | star.x2d = 0; 501 | star.y2d = 0; 502 | 503 | return star; 504 | 505 | }; 506 | 507 | function addStars() { 508 | 509 | var i; 510 | 511 | var x, y, z; 512 | 513 | var star, starPosition; 514 | 515 | for ( i = 0; i < starBgCount; i++ ) { 516 | 517 | starPosition = getStarPosition( 0, 20000 ); 518 | 519 | x = starPosition.x; 520 | y = starPosition.y; 521 | z = Math.round( Math.random() * starDistance ); 522 | 523 | star = addStar( x, y, z, x, y, z ); 524 | star.colorIndex = Math.floor( Math.random() * starBgColorLookupTable.length ); 525 | star.colorLookupTable = starBgColorLookupTable[ star.colorIndex ]; 526 | star.color = star.colorLookupTable[ Math.floor( Math.random() * 100 ) ]; 527 | 528 | starBgHolder.push( star ); 529 | 530 | } 531 | 532 | for ( i = 0; i < starCount; i++ ) { 533 | 534 | starPosition = getStarPosition( starWarpTunnelDiameter, 10000 ); 535 | 536 | x = starPosition.x; 537 | y = starPosition.y; 538 | z = Math.round( Math.random() * starDistance ); 539 | 540 | star = addStar( x, y, z, x, y, z ); 541 | star.distance = starDistance - z; 542 | star.distanceTotal = Math.round( starDistance + starFov ); 543 | star.colorIndex = Math.floor( Math.random() * starColorLookupTable.length ); 544 | star.colorLookupTable = starColorLookupTable[ star.colorIndex ]; 545 | star.color = star.colorLookupTable[ Math.floor( ( star.distance / star.distanceTotal ) * 100 ) ]; 546 | 547 | starHolder.push( star ); 548 | 549 | } 550 | 551 | }; 552 | 553 | //--- 554 | 555 | window.requestAnimFrame = ( function() { 556 | 557 | return window.requestAnimationFrame || 558 | window.webkitRequestAnimationFrame || 559 | window.mozRequestAnimationFrame || 560 | function( callback ) { 561 | window.setTimeout( callback, 1000 / 60 ); 562 | }; 563 | 564 | } )(); 565 | 566 | function animloop() { 567 | 568 | requestAnimFrame( animloop ); 569 | 570 | if ( !paused ) { 571 | 572 | render(); 573 | 574 | } 575 | 576 | }; 577 | 578 | //--- 579 | 580 | function render() { 581 | 582 | clearImageData(); 583 | 584 | //--- 585 | 586 | var i, j, l, k, m, n; 587 | 588 | //--- 589 | 590 | var star; 591 | var scale; 592 | 593 | //--- 594 | 595 | if ( starRotationPermission ) { 596 | 597 | if ( mouseDown ) { 598 | 599 | starRotationAnimationTime += 1; 600 | 601 | if ( starRotationAnimationTime > starRotationAnimationDuration ) 602 | starRotationAnimationTime = starRotationAnimationDuration; 603 | 604 | } else { 605 | 606 | starRotationAnimationTime -= 1; 607 | 608 | if ( starRotationAnimationTime < 0 ) 609 | starRotationAnimationTime = 0; 610 | 611 | } 612 | 613 | starRotationSpeed = Math.easeOutQuad( starRotationAnimationTime, starRotationSpeedMin, starRotationSpeedMax, starRotationAnimationDuration ); 614 | starRotation -= starRotationSpeed * starRotationDirection; 615 | 616 | } 617 | 618 | //--- 619 | 620 | if ( mouseActive ) { 621 | 622 | starSpeedAnimationTime += 1; 623 | 624 | if ( starSpeedAnimationTime > starSpeedAnimationDuration ) 625 | starSpeedAnimationTime = starSpeedAnimationDuration; 626 | 627 | starFovAnimationTime -= 1; 628 | 629 | if ( starFovAnimationTime < 0 ) 630 | starFovAnimationTime = 0; 631 | 632 | //--- 633 | 634 | if ( starFollowMouseXAxis ) { 635 | 636 | center.x += ( mousePos.x - center.x ) * starFollowMouseSensitivity; 637 | 638 | } 639 | 640 | if ( starFollowMouseYAxis ) { 641 | 642 | center.y += ( mousePos.y - center.y ) * starFollowMouseSensitivity; 643 | 644 | } 645 | 646 | } else { 647 | 648 | starSpeedAnimationTime -= 1; 649 | 650 | if ( starSpeedAnimationTime < 0 ) 651 | starSpeedAnimationTime = 0; 652 | 653 | starFovAnimationTime += 1; 654 | 655 | if ( starFovAnimationTime > starFovAnimationDuration ) 656 | starFovAnimationTime = starFovAnimationDuration; 657 | 658 | //--- 659 | 660 | if ( starFollowMouseXAxis ) { 661 | 662 | center.x += ( ( canvas.width / 2 ) - center.x ) * starFollowMouseSensitivity; 663 | 664 | } 665 | 666 | if ( starFollowMouseYAxis ) { 667 | 668 | center.y += ( ( canvas.height / 2 ) - center.y ) * starFollowMouseSensitivity; 669 | 670 | } 671 | 672 | } 673 | 674 | starSpeed = Math.easeOutQuad( starSpeedAnimationTime, 0, starSpeedMax - starSpeedMin, starSpeedAnimationDuration ) + starSpeedMin; 675 | starFov = Math.easeInQuad( starFovAnimationTime, 0, starFovMax - starFovMin, starFovAnimationDuration ) + starFovMin; 676 | 677 | //--- 678 | 679 | starBorderFront = -starFov + 1; 680 | 681 | //--- 682 | 683 | var warpSpeedValue = starSpeed * ( starSpeed / ( starSpeedMax / starWarpLineLength ) ); 684 | 685 | //--- 686 | //stars bg 687 | 688 | for ( i = 0, l = starBgHolder.length; i < l; i++ ) { 689 | 690 | star = starBgHolder[ i ]; 691 | 692 | scale = starFov / ( starFov + star.z ); 693 | 694 | star.x2d = ( star.x * scale ) + center.x; 695 | star.y2d = ( star.y * scale ) + center.y; 696 | 697 | if ( star.x2d > -1 && star.x2d < canvasWidth && star.y2d > -1 && star.y2d < canvasHeight ) { 698 | 699 | setPixelAdditive( star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255 ); 700 | 701 | } 702 | 703 | } 704 | 705 | //--- 706 | //stars moving 707 | 708 | for ( i = 0, l = starHolder.length; i < l; i++ ) { 709 | 710 | star = starHolder[ i ]; 711 | 712 | //--- 713 | //star distance calc 714 | 715 | star.distanceTotal = Math.round( starDistance + starFov ); 716 | 717 | //--- 718 | //star movement 719 | 720 | if ( starDirection >= 0 ) { 721 | 722 | star.z -= starSpeed; 723 | star.distance += starSpeed; 724 | 725 | if ( star.z < starBorderFront ) { 726 | 727 | star.z = starBorderBack; 728 | star.distance = 0; 729 | 730 | } 731 | 732 | } else { 733 | 734 | star.z += starSpeed; 735 | star.distance -= starSpeed; 736 | 737 | if ( star.z > starBorderBack ) { 738 | 739 | star.z = starBorderFront; 740 | star.distance = star.distanceTotal; 741 | 742 | } 743 | 744 | } 745 | 746 | //--- 747 | //star color 748 | 749 | star.color = star.colorLookupTable[ Math.floor( ( star.distance / star.distanceTotal ) * 100 ) ]; 750 | 751 | //--- 752 | //star position & draw 753 | 754 | scale = starFov / ( starFov + star.z ); 755 | 756 | star.x2d = ( star.x * scale ) + center.x; 757 | star.y2d = ( star.y * scale ) + center.y; 758 | 759 | if ( starSpeed === starSpeedMin ) { 760 | 761 | if ( star.x2d > -1 && star.x2d < canvasWidth && star.y2d > -1 && star.y2d < canvasHeight ) { 762 | 763 | setPixelAdditive( star.x2d | 0, star.y2d | 0, star.color.r, star.color.g, star.color.b, 255 ); 764 | 765 | } 766 | 767 | } else { 768 | 769 | var nz = star.z + warpSpeedValue; 770 | 771 | scale = starFov / ( starFov + nz ); 772 | 773 | var x2d = ( star.x * scale ) + center.x; 774 | var y2d = ( star.y * scale ) + center.y; 775 | 776 | if ( x2d > -1 && x2d < canvasWidth && y2d > -1 && y2d < canvasHeight ) { 777 | 778 | drawLine( star.x2d | 0, star.y2d | 0, x2d | 0, y2d | 0, star.color.r, star.color.g, star.color.b, 255 ); 779 | 780 | } 781 | 782 | } 783 | 784 | //--- 785 | //star rotation 786 | 787 | if ( starRotationSpeed !== starRotationSpeedMin ) { 788 | 789 | var radians = MATHPI180 * starRotation; 790 | 791 | var cos = Math.cos( radians ); 792 | var sin = Math.sin( radians ); 793 | 794 | star.x = cos * star.ox + sin * star.oy; 795 | star.y = cos * star.oy - sin * star.ox; 796 | 797 | } 798 | 799 | } 800 | 801 | //--- 802 | 803 | ctx.putImageData( imageData, 0, 0 ); 804 | 805 | }; 806 | 807 | function resizeHandler( event ) { 808 | 809 | resize(); 810 | 811 | }; 812 | 813 | function resize() { 814 | 815 | canvasWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 816 | canvasHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 817 | 818 | if ( settings.autoResizeMinWidth && canvasWidth < settings.autoResizeMinWidth ) { 819 | 820 | canvasWidth = settings.autoResizeMinWidth; 821 | 822 | } else if ( settings.autoResizeMaxWidth && canvasWidth > settings.autoResizeMaxWidth ) { 823 | 824 | canvasWidth = settings.autoResizeMaxWidth; 825 | 826 | } 827 | 828 | if ( settings.autoResizeMinHeight && canvasHeight < settings.autoResizeMinHeight ) { 829 | 830 | canvasHeight = settings.autoResizeMinHeight; 831 | 832 | } else if ( settings.autoResizeMaxHeight && canvasHeight > settings.autoResizeMaxHeight ) { 833 | 834 | canvasHeight = settings.autoResizeMaxHeight; 835 | 836 | } 837 | 838 | //--- 839 | 840 | canvas.setAttribute( 'width', canvasWidth ); 841 | canvas.setAttribute( 'height', canvasHeight ); 842 | 843 | center = { x:canvas.width / 2, y:canvas.height / 2 }; 844 | 845 | //--- 846 | 847 | imageData = ctx.getImageData( 0, 0, canvasWidth, canvasHeight ); 848 | pix = imageData.data; 849 | 850 | }; 851 | 852 | //--- 853 | 854 | function mouseMoveHandler( event ) { 855 | 856 | mousePos = getMousePos( canvas, event ); 857 | 858 | }; 859 | 860 | function mouseEnterHandler( event ) { 861 | 862 | mouseActive = true; 863 | 864 | }; 865 | 866 | function mouseLeaveHandler( event ) { 867 | 868 | mouseActive = false; 869 | mouseDown = false; 870 | 871 | }; 872 | 873 | function mouseDownHandler( event ) { 874 | 875 | mouseDown = true; 876 | 877 | }; 878 | 879 | function mouseUpHandler( event ) { 880 | 881 | mouseDown = false; 882 | 883 | }; 884 | 885 | //--- 886 | 887 | function getMousePos( canvas, event ) { 888 | 889 | var rect = canvas.getBoundingClientRect(); 890 | 891 | return { x: event.clientX - rect.left, y: event.clientY - rect.top }; 892 | 893 | }; 894 | 895 | //--- 896 | 897 | function touchStartHandler( event ) { 898 | 899 | event.preventDefault(); 900 | 901 | mouseDown = true; 902 | mouseActive = true; 903 | 904 | }; 905 | 906 | function touchEndHandler( event ) { 907 | 908 | event.preventDefault(); 909 | 910 | mouseDown = false; 911 | mouseActive = false; 912 | 913 | }; 914 | 915 | function touchMoveHandler( event ) { 916 | 917 | event.preventDefault(); 918 | 919 | mousePos = getTouchPos( canvas, event ); 920 | 921 | }; 922 | 923 | function touchCancelHandler( event ) { 924 | 925 | mouseDown = false; 926 | mouseActive = false; 927 | 928 | }; 929 | 930 | //--- 931 | 932 | function getTouchPos( canvas, event ) { 933 | 934 | var rect = canvas.getBoundingClientRect(); 935 | 936 | return { x: event.touches[ 0 ].clientX - rect.left, y: event.touches[ 0 ].clientY - rect.top }; 937 | 938 | }; 939 | 940 | //--- 941 | 942 | this.pause = function() { 943 | 944 | paused = true; 945 | 946 | }; 947 | 948 | this.unpause = function() { 949 | 950 | paused = false; 951 | 952 | }; 953 | 954 | //--- 955 | 956 | init(); 957 | 958 | }; 959 | 960 | window.WarpDrive = WarpDrive; 961 | 962 | } () ); 963 | 964 | if ( typeof jQuery !== 'undefined' ) { 965 | 966 | ( function( $ ) { 967 | 968 | $.fn.warpDrive = function( params ) { 969 | 970 | var args = arguments; 971 | 972 | return this.each( function() { 973 | 974 | if ( !$.data( this, 'plugin_WarpDrive' ) ) { 975 | 976 | $.data( this, 'plugin_WarpDrive', new WarpDrive( this, params ) ); 977 | 978 | } else { 979 | 980 | var plugin = $.data( this, 'plugin_WarpDrive' ); 981 | 982 | if ( plugin[ params ] ) { 983 | 984 | plugin[ params ].apply( this, Array.prototype.slice.call( args, 1 ) ); 985 | 986 | } else { 987 | 988 | $.error( 'Method ' + params + ' does not exist on jQuery.warpDrive' ); 989 | 990 | } 991 | 992 | } 993 | 994 | } ); 995 | 996 | }; 997 | 998 | } ( jQuery ) ); 999 | 1000 | } --------------------------------------------------------------------------------