├── 1.css ├── 2.js ├── 3.js ├── README.md ├── favicon.ico ├── index.html └── rewrite_now.png /1.css: -------------------------------------------------------------------------------- 1 | {margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}html,body{margin:0;padding:0;font:14px/1.5 'Lato',sans-serif;color:#fefeff;-webkit-font-smoothing:antialiased;font-weight:normal;}body{background:#000;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}h1{font:2.1em 'Cinzel',serif;font-weight:180;letter-spacing:0.1em;text-shadow:0 0 25px rgba(254,254,255,0.85);}h2{font:1.5em 'Cinzel',serif;font-weight:130;letter-spacing:0.2em;text-shadow:0 0 20px rgba(254,254,255,0.65);text-transform:uppercase;}[class^="letter"]{-webkit-transition:opacity 3s ease;-moz-transition:opacity 3s ease;-transition:opacity 3s ease;}.letter-0{transition-delay:0.2s;}.letter-1{transition-delay:0.4s;}.letter-2{transition-delay:0.6s;}.letter-3{transition-delay:0.8s;}.letter-4{transition-delay:1.0s;}.letter-5{transition-delay:1.2s;}.letter-6{transition-delay:1.4s;}.letter-7{transition-delay:1.6s;}.letter-8{transition-delay:1.8s;}.letter-9{transition-delay:2.0s;}.letter-10{transition-delay:2.2s;}.letter-11{transition-delay:2.4s;}.letter-12{transition-delay:2.6s;}.letter-13{transition-delay:2.8s;}.letter-14{transition-delay:3.0s;}h1,h2{visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}h1.transition-in,h2.transition-in{visibility:visible;}h1 [class^="letter"],h2 [class^="letter"]{opacity:0;}h1.transition-in [class^="letter"],h2.transition-in [class^="letter"]{opacity:1;}#container{display:table;position:absolute;z-index:20;width:100%;height:100%;text-align:center;cursor:default;}#container > div{display:table-cell;vertical-align:middle;}#container p{position:absolute;width:100%;left:0;bottom:25px;font-size:60%;letter-spacing:0.1em;font-weight:300;color:#76747a;-webkit-font-smoothing:subpixel-antialiased;font-smoothing:subpixel-antialiased;}#container p strong{color:#b3abc5;}#container p span{font-size:80%;padding:0 2px;}#canvas{position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;cursor:default;}#stats{position:absolute;z-index:10;left:10px;top:10px;}.dg.ac{z-index:100 !important;}a:hover{color:#CCCCCC;text-decoration:underline;}a,a:link{color:#fff;text-decoration:none;}.STYLE1{font-family:Arual;font-weight:bold;}.STYLE2{color:#FF0000} 2 | -------------------------------------------------------------------------------- /2.js: -------------------------------------------------------------------------------- 1 | var Stats=function(){var e=Date.now(),t=e,i=0,n=1/0,r=0,s=0,o=1/0,a=0,l=0,h=0,c=document.createElement("div");c.id="stats",c.addEventListener("mousedown",function(e){e.preventDefault(),v(++h%2)},!1),c.style.cssText="width:80px;opacity:0.9;cursor:pointer";var u=document.createElement("div");u.id="fps",u.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002",c.appendChild(u);var d=document.createElement("div");d.id="fpsText",d.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",d.innerHTML="FPS",u.appendChild(d);var p=document.createElement("div");for(p.id="fpsGraph",p.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff",u.appendChild(p);74>p.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#113",p.appendChild(f)}var m=document.createElement("div");m.id="ms",m.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none",c.appendChild(m);var g=document.createElement("div");g.id="msText",g.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",g.innerHTML="MS",m.appendChild(g);var y=document.createElement("div");for(y.id="msGraph",y.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0",m.appendChild(y);74>y.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#131",y.appendChild(f)}var v=function(e){switch(h=e){case 0:u.style.display="block",m.style.display="none";break;case 1:u.style.display="none",m.style.display="block"}},b=function(e,t){var i=e.appendChild(e.firstChild);i.style.height=t+"px"};return{REVISION:11,domElement:c,setMode:v,begin:function(){e=Date.now()},end:function(){var h=Date.now();return i=h-e,n=Math.min(n,i),r=Math.max(r,i),g.textContent=i+" MS ("+n+"-"+r+")",b(y,Math.min(30,30-30*(i/200))),l++,h>t+1e3&&(s=Math.round(1e3*l/(h-t)),o=Math.min(o,s),a=Math.max(a,s),d.textContent=s+" FPS ("+o+"-"+a+")",b(p,Math.min(30,30-30*(s/100))),t=h,l=0),h},update:function(){e=this.end()}}}; -------------------------------------------------------------------------------- /3.js: -------------------------------------------------------------------------------- 1 | ;(function(window) { 2 | var ctx, 3 | hue, 4 | logo, 5 | form, 6 | buffer, 7 | target = {}, 8 | tendrils = [], 9 | settings = {}; 10 | 11 | settings.debug = true; 12 | settings.friction = 0.5; 13 | settings.trails = 20; 14 | settings.size = 50; 15 | settings.dampening = 0.25; 16 | settings.tension = 0.98; 17 | 18 | Math.TWO_PI = Math.PI * 2; 19 | 20 | // ======================================================================================== 21 | // Oscillator 22 | // ---------------------------------------------------------------------------------------- 23 | 24 | function Oscillator(options) { 25 | this.init(options || {}); 26 | } 27 | 28 | Oscillator.prototype = (function() { 29 | 30 | var value = 0; 31 | 32 | return { 33 | 34 | init: function(options) { 35 | this.phase = options.phase || 0; 36 | this.offset = options.offset || 0; 37 | this.frequency = options.frequency || 0.001; 38 | this.amplitude = options.amplitude || 1; 39 | }, 40 | 41 | update: function() { 42 | this.phase += this.frequency; 43 | value = this.offset + Math.sin(this.phase) * this.amplitude; 44 | return value; 45 | }, 46 | 47 | value: function() { 48 | return value; 49 | } 50 | }; 51 | 52 | })(); 53 | 54 | // ======================================================================================== 55 | // Tendril 56 | // ---------------------------------------------------------------------------------------- 57 | 58 | function Tendril(options) { 59 | this.init(options || {}); 60 | } 61 | 62 | Tendril.prototype = (function() { 63 | 64 | function Node() { 65 | this.x = 0; 66 | this.y = 0; 67 | this.vy = 0; 68 | this.vx = 0; 69 | } 70 | 71 | return { 72 | 73 | init: function(options) { 74 | 75 | this.spring = options.spring + (Math.random() * 0.1) - 0.05; 76 | this.friction = settings.friction + (Math.random() * 0.01) - 0.005; 77 | this.nodes = []; 78 | 79 | for(var i = 0, node; i < settings.size; i++) { 80 | 81 | node = new Node(); 82 | node.x = target.x; 83 | node.y = target.y; 84 | 85 | this.nodes.push(node); 86 | } 87 | }, 88 | 89 | update: function() { 90 | 91 | var spring = this.spring, 92 | node = this.nodes[0]; 93 | 94 | node.vx += (target.x - node.x) * spring; 95 | node.vy += (target.y - node.y) * spring; 96 | 97 | for(var prev, i = 0, n = this.nodes.length; i < n; i++) { 98 | 99 | node = this.nodes[i]; 100 | 101 | if(i > 0) { 102 | 103 | prev = this.nodes[i - 1]; 104 | 105 | node.vx += (prev.x - node.x) * spring; 106 | node.vy += (prev.y - node.y) * spring; 107 | node.vx += prev.vx * settings.dampening; 108 | node.vy += prev.vy * settings.dampening; 109 | } 110 | 111 | node.vx *= this.friction; 112 | node.vy *= this.friction; 113 | node.x += node.vx; 114 | node.y += node.vy; 115 | 116 | spring *= settings.tension; 117 | } 118 | }, 119 | 120 | draw: function() { 121 | 122 | var x = this.nodes[0].x, 123 | y = this.nodes[0].y, 124 | a, b; 125 | 126 | ctx.beginPath(); 127 | ctx.moveTo(x, y); 128 | 129 | for(var i = 1, n = this.nodes.length - 2; i < n; i++) { 130 | 131 | a = this.nodes[i]; 132 | b = this.nodes[i + 1]; 133 | x = (a.x + b.x) * 0.5; 134 | y = (a.y + b.y) * 0.5; 135 | 136 | ctx.quadraticCurveTo(a.x, a.y, x, y); 137 | } 138 | 139 | a = this.nodes[i]; 140 | b = this.nodes[i + 1]; 141 | 142 | ctx.quadraticCurveTo(a.x, a.y, b.x, b.y); 143 | ctx.stroke(); 144 | ctx.closePath(); 145 | } 146 | }; 147 | 148 | })(); 149 | 150 | // ---------------------------------------------------------------------------------------- 151 | 152 | function init(event) { 153 | 154 | document.removeEventListener('mousemove', init); 155 | document.removeEventListener('touchstart', init); 156 | 157 | document.addEventListener('mousemove', mousemove); 158 | document.addEventListener('touchmove', mousemove); 159 | document.addEventListener('touchstart', touchstart); 160 | 161 | mousemove(event); 162 | reset(); 163 | loop(); 164 | } 165 | 166 | function reset() { 167 | 168 | tendrils = []; 169 | for(var i = 0; i < settings.trails; i++) { 170 | 171 | tendrils.push(new Tendril({ 172 | spring: 0.45 + 0.025 * (i / settings.trails) 173 | })); 174 | } 175 | } 176 | 177 | function loop() { 178 | 179 | if(!ctx.running) return; 180 | 181 | ctx.globalCompositeOperation = 'source-over'; 182 | ctx.fillStyle = 'rgba(8,5,16,0.4)'; 183 | ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 184 | ctx.globalCompositeOperation = 'lighter'; 185 | ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)'; 186 | ctx.lineWidth = 1; 187 | 188 | 189 | 190 | for(var i = 0, tendril; i < settings.trails; i++) { 191 | tendril = tendrils[i]; 192 | tendril.update(); 193 | tendril.draw(); 194 | } 195 | 196 | ctx.frame++; 197 | ctx.stats.update(); 198 | requestAnimFrame(loop); 199 | } 200 | 201 | function resize() { 202 | ctx.canvas.width = window.innerWidth; 203 | ctx.canvas.height = window.innerHeight; 204 | } 205 | 206 | function start() { 207 | if(!ctx.running) { 208 | ctx.running = true; 209 | loop(); 210 | } 211 | } 212 | 213 | function stop() { 214 | ctx.running = false; 215 | } 216 | 217 | function mousemove(event) { 218 | if(event.touches) { 219 | target.x = event.touches[0].pageX; 220 | target.y = event.touches[0].pageY; 221 | } else { 222 | target.x = event.clientX 223 | target.y = event.clientY; 224 | } 225 | event.preventDefault(); 226 | } 227 | 228 | function touchstart(event) { 229 | if(event.touches.length == 1) { 230 | target.x = event.touches[0].pageX; 231 | target.y = event.touches[0].pageY; 232 | } 233 | } 234 | 235 | function keyup(event) { 236 | 237 | switch(event.keyCode) { 238 | case 32: 239 | save(); 240 | break; 241 | default: 242 | // console.log(event.keyCode); 243 | } 244 | } 245 | 246 | function letters(id) { 247 | 248 | var el = document.getElementById(id), 249 | letters = el.innerHTML.replace('&', '&').split(''), 250 | heading = ''; 251 | 252 | for(var i = 0, n = letters.length, letter; i < n; i++) { 253 | letter = letters[i].replace('&', '&'); 254 | heading += letter.trim() ? '' + letter + '' : ' '; 255 | } 256 | 257 | el.innerHTML = heading; 258 | setTimeout(function() { 259 | el.className = 'transition-in'; 260 | }, (Math.random() * 500) + 500); 261 | } 262 | 263 | function save() { 264 | 265 | if(!buffer) { 266 | 267 | buffer = document.createElement('canvas'); 268 | buffer.width = screen.availWidth; 269 | buffer.height = screen.availHeight; 270 | buffer.ctx = buffer.getContext('2d'); 271 | 272 | form = document.createElement('form'); 273 | form.method = 'post'; 274 | form.input = document.createElement('input'); 275 | form.input.type = 'hidden'; 276 | form.input.name = 'data'; 277 | form.appendChild(form.input); 278 | 279 | document.body.appendChild(form); 280 | } 281 | 282 | buffer.ctx.fillStyle = 'rgba(8,5,16)'; 283 | buffer.ctx.fillRect(0, 0, buffer.width, buffer.height); 284 | 285 | buffer.ctx.drawImage(canvas, 286 | Math.round(buffer.width / 2 - canvas.width / 2), 287 | Math.round(buffer.height / 2 - canvas.height / 2) 288 | ); 289 | 290 | buffer.ctx.drawImage(logo, 291 | Math.round(buffer.width / 2 - logo.width / 4), 292 | Math.round(buffer.height / 2 - logo.height / 4), 293 | logo.width / 2, 294 | logo.height / 2 295 | ); 296 | 297 | window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height); 298 | 299 | // form.input.value = buffer.toDataURL().substr(22); 300 | // form.submit(); 301 | } 302 | 303 | window.requestAnimFrame = (function() { 304 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(fn) { window.setTimeout(fn, 1000 / 60) }; 305 | })(); 306 | 307 | window.onload = function() { 308 | 309 | ctx = document.getElementById('canvas').getContext('2d'); 310 | ctx.stats = new Stats(); 311 | ctx.running = true; 312 | ctx.frame = 1; 313 | 314 | logo = new Image(); 315 | logo.src = 'http://www.whsir.com/rewrite_now.png'; 316 | 317 | hue = new Oscillator({ 318 | phase: Math.random() * Math.TWO_PI, 319 | amplitude: 85, 320 | frequency: 0.0015, 321 | offset: 285 322 | }); 323 | 324 | letters('h1'); 325 | letters('h2'); 326 | 327 | document.addEventListener('mousemove', init); 328 | document.addEventListener('touchstart', init); 329 | document.body.addEventListener('orientationchange', resize); 330 | window.addEventListener('resize', resize); 331 | window.addEventListener('keyup', keyup); 332 | window.addEventListener('focus', start); 333 | window.addEventListener('blur', stop); 334 | 335 | resize(); 336 | 337 | if(window.DEBUG) { 338 | 339 | var gui = new dat.GUI(); 340 | 341 | // gui.add(settings, 'debug'); 342 | settings.gui.add(settings, 'trails', 1, 30).onChange(reset); 343 | settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset); 344 | settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset); 345 | settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset); 346 | settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset); 347 | 348 | document.body.appendChild(ctx.stats.domElement); 349 | } 350 | }; 351 | })(window); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | BridgeDeck 2 | ======== 3 | 4 | [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE) 5 | [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu) 6 | 7 | 这是吴昊博客目前在使用的一款导航页StartPage 8 | 演示地址：https://www.whsir.com/ 9 | 10 | 其中3.js是鼠标滑动中的特效，这个js的出处也不知道出自哪里了，如果你知道原作者，可以给我留言备注！ 11 | 12 | 整体导航代码基于第三方进行二次修改，时间太久远，已找不到原作者地址了，有些人很喜欢我这个导航页，于是我这里开源出来 13 | 14 | 如果你觉得该页面对你有所帮助，欢迎各位老板[打赏](https://blog.whsir.com/post-4043.html)：https://blog.whsir.com/post-4043.html 15 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whsir/BridgeDeck/014b41d621a2ed74867e574c204b4c5b6bea6263/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 欢迎访问吴昊博客导航页 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 吴昊博客 20 |
21 |
22 |

或許你沒有辦法改變世界

23 |

但是你可以改變現在

24 |
25 |
26 |

27 | 博客首页 - 28 | 在线工具 - 29 | XSS平台 - 30 | wlnmp一键包 31 |

32 |
33 | 欢迎访问吴昊博客导航页 34 |
35 |

36 |
37 |
38 | 备案xxxxx 39 |

40 |
41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /rewrite_now.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whsir/BridgeDeck/014b41d621a2ed74867e574c204b4c5b6bea6263/rewrite_now.png --------------------------------------------------------------------------------