Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { margin: 0; background: #000; overflow: hidden; } canvas { width: 100%; height: 100%; }
JavaScript
var c = document.querySelector('#c'), ctx = c.getContext('2d'), ratio = window.devicePixelRatio || 1, dots = [], color = 0, rotation = 23, options = { size: 10, spawnRate: 4, spawnRotationSpeed: 23, dotRotationSpeed: -0.2, colorRotate: 24, moveSpeed: 2, shrinkTime: 5, clear: true }, mouse = { x: (window.innerWidth * ratio) / 2, y: (window.innerHeight * ratio) / 2 }; function render() { if (options.clear) { ctx.clearRect(0, 0, c.width, c.height); }else{ ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, c.width, c.height); } for (var i = 0; i < options.spawnRate; i++) { rotation = rotation < 360 ? rotation + options.spawnRotationSpeed : rotation - 360 + options.spawnRotationSpeed; color += options.colorRotate; color = color < 360 ? color : color - 360; var dot = { rotation: rotation, x: mouse.x, y: mouse.y, size: options.size, color: 'hsl(' + color + ', 100%, 60%)' }; TweenMax.to(dot, options.shrinkTime, {size: 0}); dots.push(dot); } dots.forEach(function(dot, i) { var d = { x: options.moveSpeed * Math.cos(dot.rotation * Math.PI / 180), y: options.moveSpeed * Math.sin(dot.rotation * Math.PI / 180) }; dot.x += d.x; dot.y += d.y; dot.rotation += options.dotRotationSpeed; if (dot.size < 0.5) { dots.splice(i, 1); return; } ctx.fillStyle = dot.color; ctx.beginPath(); ctx.arc(dot.x, dot.y, dot.size * ratio, 0, 2 * Math.PI, false); ctx.fill(); }) } window.addEventListener("mousemove", function(e) { mouse.x = e.clientX; mouse.y = e.clientY; }); window.addEventListener("touchmove", function(e) { e.preventDefault(); mouse.x = e.changedTouches[0].pageX; mouse.y = e.changedTouches[0].pageX; }); window.addEventListener('resize', function() { c.width = window.innerWidth * ratio; c.height = window.innerHeight * ratio; }) window.dispatchEvent(new Event('resize')); (function renderLoop() { requestAnimationFrame(renderLoop); render(); })(); var datGUI = new dat.GUI(); datGUI.add(options, 'size').min(1).max(20).step(1).name('Size'); datGUI.add(options, 'colorRotate').min(1).max(359).step(1).name('Color Rotate'); datGUI.add(options, 'spawnRate').min(1).max(5).step(1).name('Spawn Rate'); datGUI.add(options, 'spawnRotationSpeed').min(0).max(50).step(1).name('Spawn Rotation'); datGUI.add(options, 'dotRotationSpeed').min(-1).max(1).step(0.01).name('Dot Rotation'); datGUI.add(options, 'moveSpeed').min(1).max(5).step(1).name('Move Speed'); datGUI.add(options, 'shrinkTime').min(0.1).max(20).step(0.1).name('Shrink Time (seconds)'); datGUI.add(options, 'clear', true, false).name('Clear'); datGUI.close();
粒子
时间
文字
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号