Искры от костра на HTML5 Canvas
|
1 2 3 4 5 6 7 8 9 10 |
.spark { background-color: #DE4A00; font-family: 'Helvetica', sans-serif; visibility: hidden; position: absolute; width: 4px; height: 4px; border-radius: 30%; box-shadow: 0 0 5px #AB000B; } |
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<script src="/js/TweenMax.min.js"></script> <script> var density = 70, speed = 2, winHeight = window.innerHeight, winWidth = window.innerWidth, start = { yMin: winHeight - 50, yMax: winHeight, xMin: (winWidth / 2) + 10, xMax: (winWidth / 2) + 40, scaleMin: 0.1, scaleMax: 0.25, scaleXMin: 0.1, scaleXMax: 1, scaleYMin: 1, scaleYMax: 2, opacityMin: 0.1, opacityMax: 0.4 }, mid = { yMin: winHeight * 0.4, yMax: winHeight * 0.9, xMin: winWidth * 0.1, xMax: winWidth * 0.9, scaleMin: 0.2, scaleMax: 0.8, opacityMin: 0.5, opacityMax: 1 }, end = { yMin: -180, yMax: -180, xMin: -100, xMax: winWidth + 180, scaleMin: 0.1, scaleMax: 1, opacityMin: 0.4, opacityMax: 0.7 }; function range(map, prop) { var min = map[prop + 'Min'], max = map[prop + 'Max']; return min + (max - min) * Math.random(); } function sign() { return Math.random() < 0.5 ? -1 : 1; } function randomEase(easeThis, easeThat) { if (Math.random() < 0.5) { return easeThat; } return easeThis; } function spawn(particle) { var wholeDuration = (10 / speed) * (0.7 + Math.random() * 0.4), delay = wholeDuration * Math.random(), partialDuration = (wholeDuration + 1) * (0.2 + Math.random() * 0.3); TweenLite.set(particle, { y: range(start, 'y'), x: range(start, 'x'), scaleX: range(start, 'scaleX'), scaleY: range(start, 'scaleY'), scale: range(start, 'scale'), opacity: range(start, 'opacity'), visibility: 'hidden' }); // Moving upward TweenLite.to(particle, partialDuration, { delay: delay, y: range(mid, 'y'), ease: randomEase(Linear.easeOut, Back.easeInOut) }); TweenLite.to(particle, wholeDuration - partialDuration, { delay: partialDuration + delay, y: range(end, 'y'), ease: Back.easeIn }); //Moving on axis X TweenLite.to(particle, partialDuration, { delay: delay, x: range(mid, 'x'), ease: Power1.easeOut }); TweenLite.to(particle, wholeDuration - partialDuration, { delay: partialDuration + delay, x: range(end, 'x'), ease: Power1.easeIn }); //opacity and scale partialDuration = wholeDuration * (0.5 + Math.random() * 0.3); TweenLite.to(particle, partialDuration, { delay: delay, scale: range(mid, 'scale'), autoAlpha: range(mid, 'opacity'), ease: Linear.easeNone }); TweenLite.to(particle, wholeDuration - partialDuration, { delay: partialDuration + delay, scale: range(end, 'scale'), autoAlpha: range(end, 'opacity'), ease: Linear.easeNone, onComplete: spawn, onCompleteParams: [particle] }); } window.onload = createParticle; function createParticle() { var i, particleSpark; for (i = 0; i < density; i += 1) { particleSpark = document.createElement('div'); particleSpark.classList.add('spark'); document.body.appendChild(particleSpark); spawn(particleSpark); } } </script> |
