Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
30,000 Particles
A study creating performant particles with Canvas 2D
Use your mouse
css
@import url(http://fonts.googleapis.com/css?family=Quantico); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block } body { line-height:1 } ol,ul { list-style:none } blockquote,q { quotes:none } blockquote:before,blockquote:after,q:before,q:after { content:''; content:none } table { border-collapse:collapse; border-spacing:0 } html,body { background:#111111; } #container { background:#111111; position:absolute; left:50%; top:50%; } #stats { position:absolute; right:10px; top:10px; } /* Info */ @keyframes show-info { 0% { transform:rotateY(120deg); } 100% { transform:rotateY(0deg); } }.info { transition:all 180ms ease-out; transform-style:preserve-3d; transform:perspective(800px); font-family:"Quantico",sans-serif; position:absolute; font-size:12px; opacity:0.8; color:white; width:220px; left:0px; top:20px; } .info:hover { box-shadow:0 0 0 4px rgba(255,255,255,0.05); opacity:1; } .info h1,.info h2,.info h3 { line-height:1; margin:5px 0; } .info a { transition:all 200ms ease-out; border-bottom:1px dotted rgba(255,255,255,0.4); text-decoration:none; opacity:0.6; color:white; } .info a:hover { opacity:0.99; } .info .about,.info .more { transform-origin:0% 50%; transform:rotateY(120deg); margin-bottom:1px; background:rgba(0,0,0,0.8); padding:12px 15px 12px 20px; } .info .about { animation:show-info 500ms cubic-bezier(0.23,1,0.32,1) 600ms 1 normal forwards; padding-bottom:15px; } .info .about a { opacity:0.9; } .info .about h1 { letter-spacing:-1px; font-weight:300; font-size:19px; opacity:0.95; } .info .about h2 { font-weight:300; font-size:13px; opacity:0.8; } .info .about h3 { text-transform:uppercase; margin-top:10px; font-size:11px; } .info .about h3:before { margin-right:2px; font-size:14px; content:"\203A"; } .info .more { animation:show-info 500ms cubic-bezier(0.23,1,0.32,1) 500ms 1 normal forwards; padding:5px 15px 10px 20px; } .info .more a { text-transform:uppercase; margin-right:10px; font-size:10px; }
JavaScript
var NUM_PARTICLES = ((ROWS = 100) * (COLS = 300)), THICKNESS = Math.pow(80, 2), SPACING = 3, MARGIN = 100, COLOR = 220, DRAG = 0.95, EASE = 0.25, /* used for sine approximation, but Math.sin in Chrome is still fast enough :)http://jsperf.com/math-sin-vs-sine-approximation B = 4 / Math.PI, C = -4 / Math.pow( Math.PI, 2 ), P = 0.225, */ container, particle, canvas, mouse, stats, list, ctx, tog, man, dx, dy, mx, my, d, t, f, a, b, i, n, w, h, p, s, r, c; particle = { vx: 0, vy: 0, x: 0, y: 0 }; function init() { container = document.getElementById('container'); canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); man = false; tog = true; list = []; w = canvas.width = COLS * SPACING + MARGIN * 2; h = canvas.height = ROWS * SPACING + MARGIN * 2; container.style.marginLeft = Math.round(w * -0.5) + 'px'; container.style.marginTop = Math.round(h * -0.5) + 'px'; for (i = 0; i < NUM_PARTICLES; i++) { p = Object.create(particle); p.x = p.ox = MARGIN + SPACING * (i % COLS); p.y = p.oy = MARGIN + SPACING * Math.floor(i / COLS); list[i] = p; } container.addEventListener('mousemove', function(e) { bounds = container.getBoundingClientRect(); mx = e.clientX - bounds.left; my = e.clientY - bounds.top; man = true; }); if (typeof Stats === 'function') { document.body.appendChild((stats = new Stats()).domElement); } container.appendChild(canvas); } function step() { if (stats) stats.begin(); if (tog = !tog) { if (!man) { t = +new Date() * 0.001; mx = w * 0.5 + (Math.cos(t * 2.1) * Math.cos(t * 0.9) * w * 0.45); my = h * 0.5 + (Math.sin(t * 3.2) * Math.tan(Math.sin(t * 0.8)) * h * 0.45); } for (i = 0; i < NUM_PARTICLES; i++) { p = list[i]; d = (dx = mx - p.x) * dx + (dy = my - p.y) * dy; f = -THICKNESS / d; if (d < THICKNESS) { t = Math.atan2(dy, dx); p.vx += f * Math.cos(t); p.vy += f * Math.sin(t); } p.x += (p.vx *= DRAG) + (p.ox - p.x) * EASE; p.y += (p.vy *= DRAG) + (p.oy - p.y) * EASE; } } else { b = (a = ctx.createImageData(w, h)).data; for (i = 0; i < NUM_PARTICLES; i++) { p = list[i]; b[n = (~~p.x + (~~p.y * w)) * 4] = b[n + 1] = b[n + 2] = COLOR, b[n + 3] = 255; } ctx.putImageData(a, 0, 0); } if (stats) stats.end(); requestAnimationFrame(step); } init(); step();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>强悍粒子模拟效果-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号