jquery实现火山喷发动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery实现火山喷发动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; padding: 0; margin: 0; overflow: hidden; font-family: Helvetica, Arial; color: #ffffff; } body { background: linear-gradient(0deg, #aabbbb, #88aadd); } #stage, #smoke { position: absolute; top: 0; left: 0; } #stage { z-index: 20; } #smoke { z-index: 5; } .volcano-container { z-index: 10; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; } .volcano { position: absolute; border: 380px solid transparent; border-left: 140px solid transparent; border-bottom: 200px solid #240904; width: 0; height: 0; bottom: 0; left: 0; right: 0; margin: auto; } .volcano.flipped { transform: scaleX(-1); } .lip { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 300px; height: 240px; background-color: #240904; border-radius: 200px; } .lip .lava { position: absolute; left: 0; right: 0; top: 10px; margin: auto; width: 270px; height: 230px; background-color: #fa7510; border-radius: 200px; clip-path: ellipse(120px 60px at top); } .lip .mask { position: absolute; top: 80px; left: 0; right: 0; margin: auto; background-color: #240904; width: 290px; height: 300px; } .toggle { display: none; z-index: 100; position: absolute; top: 10px; left: 10px; } </style> </head> <body > <canvas id="smoke"></canvas> <canvas id="stage"></canvas> <div class="volcano-container"> <div class="volcano"></div> <div class="volcano flipped"></div> <div class="lip"> <div class="lava"></div> <div class="mask"></div> </div> </div> <div class="toggle"> <label for="awesome"> <input type="checkbox" id="awesome" /> <strong>AWESOME MODE</strong> </label> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > // Best viewed in Chrome //============================= // Consts //============================= const MAX_WIDTH = 12; const FPS = 60; //============================= // Helpers //============================= const getTimestamp = () => { return new Date().getTime(); }; const random = (max = 1, signed = false) => { return signed ? (Math.random() - 0.5) * 2 * max : Math.random() * max; }; const getPower = () => { const power = (getTimestamp() - mouseStart) / 150; return power > 30 ? 30 : power; }; const shakeVolcano = power => { $volcano.css({ left: random(power, true), bottom: -1 * random(power) }); $lava.css({ left: random(power, true), top: 10 + random(power) / 2, width: random(power) + 260 }); }; //============================= // Main //============================= const targetDelta = 1000 / FPS; const stage = document.getElementById('stage'); const ctx = stage.getContext('2d'); const smoke = document.getElementById('smoke'); const ctx2 = smoke.getContext('2d'); let particles = []; let AWESOME_MODE = false; let mouseDown = false; let isExploding = false; let stageWidth = 0; let stageHeight = 0; let previousTimestamp = getTimestamp(); let previousRender = getTimestamp(); let previousPower = 0; let mouseStart = getTimestamp(); let mouseEnd = getTimestamp(); let $volcano; let $lava; const generateParticles = (amount = 20, power) => { for (let i = 0; i < amount; i++) { particles.push(new Particle(power)); } }; const loop = () => { if (getTimestamp() - previousTimestamp < targetDelta) { requestAnimationFrame(loop); return; } ctx.globalCompositeOperation = 'lighter'; if (!AWESOME_MODE) { ctx.clearRect(0, 0, stageWidth, stageHeight); } ctx2.clearRect(0, 0, stageWidth, stageHeight); if (mouseDown) { generateParticles(random(2) + 1, getPower() / 2); shakeVolcano(getPower()); } if (isExploding && previousPower > 0 && !mouseDown) { shakeVolcano(previousPower); previousPower -= 0.35; if (previousPower < 1) { isExploding = false; } } // constant particles if (random() < 0.3) { generateParticles(1, 1); } // smoke effects if (random() < 0.08) { particles.push(new S.........完整代码请登录后点击上方下载按钮下载查看
网友评论0