Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
神经模式
油漆模式
css
body, html { /*background: #055;*/ background: #1b1b1b; overflow: hidden; } body { font-family: 'Roboto', sans-serif; font-size: 14px; overflow: hidden; } .container, canvas { display: block; width: 100%; margin: 0 auto; } .container { width: 600px; height: 600px; text-align: center; background: #121212; background-size: cover; background-blend-mode: hard-light; -webkit-animation: hue-rotate 40s linear infinite; animation: hue-rotate 40s linear infinite; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes hue-rotate { from { -webkit-filter: brightness(1.5) hue-rotate(0); -moz-filter: brightness(1.5) hue-rotate(0); -ms-filter: brightness(1.5) hue-rotate(0); filter: brightness(1.5) hue-rotate(0); } to { -webkit-filter: brightness(1.5) hue-rotate(360deg); -moz-filter: brightness(1.5) hue-rotate(360deg); -ms-filter: brightness(1.5) hue-rotate(360deg); filter: brightness(1.5) hue-rotate(360deg); } } @keyframes hue-rotate { from { -webkit-filter: brightness(1.5) hue-rotate(0); -moz-filter: brightness(1.5) hue-rotate(0); -ms-filter: brightness(1.5) hue-rotate(0); filter: brightness(1.5) hue-rotate(0); } to { -webkit-filter: brightness(1.5) hue-rotate(360deg); -moz-filter: brightness(1.5) hue-rotate(360deg); -ms-filter: brightness(1.5) hue-rotate(360deg); filter: brightness(1.5) hue-rotate(360deg); } } .canvas { background: #ccc; display: block; display: inline-block; border-radius: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .switchers { position: absolute; top: 20px; left: 20px; } .switch { font-family: "Arial Black"; font-size: 12px; color: ghostwhite; z-index: 1; opacity: .2; transition: opacity .3s; cursor: pointer; } .switch + .switch { margin-left: 12px; } .switch:hover { opacity: 1; } .switch__input { display: none; } .switch__pseudo-input { display: inline-block; width: 14px; height: 14px; background: darkolivegreen; border: 2px solid #797979; vertical-align: middle; margin-right: 5px; } .switch__input:checked + .switch__pseudo-input { background: greenyellow; } .switch__text { display: inline-block; vertical-align: middle; }
JavaScript
'use strict'; (function() { let canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), mouseX = 0, mouseY = 0, width = 600, height = 600, isMouseMove = false, isMousePressed = false; var imagesPathsArr = [ 'http://www.jq22.com/tp/6367714924717928948375004.jpg' ]; var img; let TAU = 2 * Math.PI; let furCloud; let isNervousMode = false; let isPaintingMode = false; function start() { preloadImages(imagesPathsArr).done(function(images){ img = images[0]; setup(); }); } function setup() { canvas.width = width; canvas.height = height; img.resize(width); furCloud = new FurSystem(ctx); background('#121212'); setEventListeners(); draw(); } function draw() { if (!isPaintingMode) { background('#121212'); } furCloud.update(isNervousMode, isMouseMove); isMouseMove = false; window.requestAnimationFrame(draw); } function setEventListeners() { canvas.addEventListener('mousedown', mouseDown); canvas.addEventListener('touchstart', mouseDown); canvas.addEventListener('mouseup', mouseUp); canvas.addEventListener('touchend', mouseUp); canvas.addEventListener('mousemove', mouseMove); canvas.addEventListener('touchmove', mouseMove); document.addEventListener('mouseout', mouseOut ); function mouseDown() { isMousePressed = true; } function mouseUp() { isMousePressed = false; } function mouseMove(evt) { var mousePos = getMousePos(canvas, evt); mouseX = mousePos.x; mouseY = mousePos.y; isMouseMove = true; } function mouseOut () { isMouseMove = false; } let nerv_switcer = document.getElementById('nervous-switch'); if (nerv_switcer) { nerv_switcer.addEventListener('click', function () { isNervousMode = nerv_switcer.checked; }); } let painting_switcher = document.getElementById('painting-switch'); if (painting_switcher) { painting_switcher.addEventListener('click', function () { isPaintingMode = painting_switcher.checked; }); } } /////////////////////////////////////////////////////////////////////////////////////////////////////////// // Classes //////////////////////////////////////////////////////////////////////////////////////////////// function FurSystem(ctx) { this.ctx = ctx; this.radius = 220; this.countOfparticles = 3000; this.particles = []; this.createParticles(); } FurSystem.prototype.update = function (isNervousMode, isMouseMove) { for (let i = 0; i < this.particles.length; ++i) { this.particles[i].calcForces(mouseX, mouseY, isMouseMove); this.particles[i].update(isNervousMode); this.particles[i].draw(); } }; FurSystem.prototype.createParticles = function () { for (let i = 0; i < this.countOfparticles; i++) { let radius = Math.sqrt(random(this.radius * this.radius)); let angle = random(TAU); let x = width / 2 + radius * Math.sin(angle); let y = height / 2 + radius * Math.cos(angle); let clr = img.getColor(x, y); this.particles.push(new Wool(this.ctx, x, y, clr)); } }; // one particle function Wool (ctx, x, y, clr) { this.ctx = ctx; this.currPos = SVector.createPoint(x, y); this.origPos = SVector.createPoint(x, y); this.shifted = SVector.createPoint(x + random(-2, 2), y + random(-2, 2)); this.vel = SVector.createPoint(random(-1, 1), random(-1, 1)); this.acc = SVector.createPoint(0, 0); this.maxSpeed = 8; this.maxForce = .04; this.affectRds = 50; this.clr = clr; this.endSize = .5; this.isNervous = false; this.isMouseMove = false; } Wool.prototype.calcForces = function (x, y, isMouseMove) { this.isMouseMove = isMouseMove; let fleeForce = this.flee(x, y); let arriveForce = this.arrive(); this.applyForce(fleeForce); this.applyForce(arriveForce); }; Wool.prototype.applyForce = function (force) { this.acc = SVector.add(this.acc, force); }; Wool.prototype.flee = function (x,y) { let mousePos = SVector.createPoint(x, y); var distVector = SVector.subtract(mousePos, this.currPos); if (SVector.len(distVector) < this.affectRds && (this.isMouseMove || isMousePressed)) { let magnitude = SVector.calcMag(distVector, this.maxSpeed); let scaleVec = SVector.scale(magnitude, -1); let fleeforce = SVector.subtract(scaleVec, this.vel); fleeforce = SVector.limit(fleeforce, this.maxForce); return fleeforce; } return SVector.createPoint(0, 0); }; Wool.prototype.arrive = function () { let distVector = SVector.subtract(this.origPos, this.currPos); let distance = SVector.len(distVector); let speedRatio = 10; if (distance < this.affectRds + 10) { speedRatio = this.maxSpeed * distance / (this.affectRds + 10); } if (!this.isNervous) { distVector = SVector.calcMag(distVector, speedRatio); } let force = SVector.subtract(distVector, this.vel); force = SVector.limit(force, this.maxForce); return force; }; Wool.prototype.update = function (isNervousMode) { this.isNervous = isNervousMode || false; this.maxSpeed = isNervousMode ? 4 : 8; this.currPos = SVector.add(this.currPos, this.vel); this.vel = SVector.add(this.vel, this.acc); this.acc = SVector.scale(this.acc, 0); }; Wool.prototype.draw = function () { let dist = SVector.len(SVector.subtract(this.origPos, this.currPos)); this.endSize = map(dist, 0, this.affectRds, 2, 5); this.ctx.beginPath(); this.ctx.fillStyle = this.clr; this.ctx.strokeStyle = this.clr; this.ctx.moveTo(this.currPos.x, this.currPos.y); this.ctx.lineTo(this.shifted.x, this.shifted.y); this.ctx.fillRect(this.currPos.x - this.endSize/2, this.currPos.y - this.endSize/2, this.endSize, this.endSize); this.ctx.stroke(); this.ctx.closePath(); }; // Vector functions function SVector() { } SVector.add = function (a, b) { return {x: a.x + b.x, y: a.y + b.y}; }; SVector.subtract = function (a, b) { return {x: a.x - b.x, y: a.y - b.y}; }; SVector.scale = function (a, b) { return {x: a.x * b, y: a.y * b}; }; SVector.len = function (a) { return Math.sqrt(a.x * a.x + a.y * a.y); }; SVector.createPoint = function (x, y) { return {x: x, y: y}; }; SVector.calcMag = function(vv, rt) { var r = vv.x * vv.x + vv.y * vv.y; if (r > 0) { r = 1 / Math.sqrt(r); return {x: vv.x * r * rt, y: vv.y * r * rt}; } return vv; }; SVector.limit = function(vv, rt) { var r = vv.x * vv.x + vv.y * vv.y; if (r > rt * rt) { return {x: vv.x * rt, y: vv.y * rt}; } return vv; }; // RImage Class function RImage (img) { this.img = img; this.width = img.width; this.height = img.height; this.canvas = document.createElement('canvas'); this.canvas.width = this.width; this.canvas.height = this.height; this.drawingContext = this.canvas.getContext('2d'); this.drawingContext.drawImage(this.img, 0, 0); this.pixels = this.drawingContext.getImageData(0, 0, this.width, this.height); } RImage.prototype.getColor = function(x, y, alpha) { x = Math.floor(x || 0); y = Math.floor(y || 0); if(x < 0 || y < 0 || x > this.width || y > this.height){ return [0, 0, 0, 255]; } var targetIdx = (y * this.width * 4 + x * 4); function rgba2str (rgba) { return 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')'; } return rgba2str({ r: this.pixels.data[targetIdx], g: this.pixels.data[targetIdx + 1], b: this.pixels.data[targetIdx + 2], a: alpha || this.pixels.data[targetIdx + 3] }); }; RImage.prototype.resize = function(w, h) { if (!h) { h = this.height / (this.width / w); } this.canvas.width = this.width = w; this.canvas.height = this.height = h; this.drawingContext.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0, this.canvas.width, this.canvas.height); this.pixels = this.drawingContext.getImageData(0, 0, this.width, this.height); return this; }; ////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Helper Functions ////////////////////////////////////////////////////////////////////////////////////////// function getMousePos(block, evt) { let rect = block.getBoundingClientRect(); return { x: evt.touches ? evt.touches[0].clientX - rect.left: evt.clientX - rect.left, y: evt.touches ? evt.touches[0].clientY - rect.top: evt.clientY - rect.top }; } function random (min, max){ if (!min && min !== 0) { return Math.random(); } else if (!max) { return Math.random() * min; } return Math.random() * (max - min) + min; } function map (target, start1, stop1, start2, stop2) { return ((target - start1) / (stop1 - start1)) * (stop2 - start2) + start2; } function background(clr, alpha) { ctx.save(); if (alpha) { ctx.globalAlpha = alpha; } ctx.fillStyle = clr || "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.restore(); } function loadImage (path, successCallback, failureCallback) { var img = new Image(); if(path.indexOf('data:image/') !== 0) { img.crossOrigin = 'Anonymous'; } img.onload = function() { var rImg = new RImage(img); if (typeof successCallback === 'function') { successCallback(rImg); } }; img.onerror = function(e) { console.log('img load error'); if (typeof failureCallback === 'function') { failureCallback(e); } }; img.src = path; } function preloadImages(pathArr){ var newimages = [], loadedimages = 0; var postaction = function() {}; var arr = (typeof pathArr != "object") ? [pathArr] : pathArr; function imageloadpost(loadedImg){ ++loadedimages; newimages.push(loadedImg); if (loadedimages == arr.length){ postaction(newimages); //call postaction and pass in newimages array as parameter } } for (var i = 0; i < arr.length; i++){ loadImage(arr[i], function (loadedImg) { imageloadpost(loadedImg); }); } return { done: function(f){ postaction = f || postaction; } } } start(); })();
粒子
时间
文字
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号