Падающие конфетти на HTML5 Canvas
|
1 |
<canvas id="world"></canvas> |
|
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 |
<script> (function() { var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos; NUM_CONFETTI = 350; COLORS = [ [85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70] ]; PI_2 = 2 * Math.PI; canvas = document.getElementById("world"); context = canvas.getContext("2d"); window.w = 0; window.h = 0; resizeWindow = function() { window.w = canvas.width = window.innerWidth; return window.h = canvas.height = window.innerHeight; }; window.addEventListener('resize', resizeWindow, false); window.onload = function() { return setTimeout(resizeWindow, 0); }; range = function(a, b) { return (b - a) * Math.random() + a; }; drawCircle = function(x, y, r, style) { context.beginPath(); context.arc(x, y, r, 0, PI_2, false); context.fillStyle = style; return context.fill(); }; xpos = 0.5; document.onmousemove = function(e) { return xpos = e.pageX / w; }; window.requestAnimationFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { return window.setTimeout(callback, 1000 / 60); }; })(); Confetti = (function() { function Confetti() { this.style = COLORS[~~range(0, 5)]; this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2]; this.r = ~~range(2, 6); this.r2 = 2 * this.r; this.replace(); } Confetti.prototype.replace = function() { this.opacity = 0; this.dop = 0.03 * range(1, 4); this.x = range(-this.r2, w - this.r2); this.y = range(-20, h - this.r2); this.xmax = w - this.r; this.ymax = h - this.r; this.vx = range(0, 2) + 8 * xpos - 5; return this.vy = 0.7 * this.r + range(-1, 1); }; Confetti.prototype.draw = function() { var ref; this.x += this.vx; this.y += this.vy; this.opacity += this.dop; if (this.opacity > 1) { this.opacity = 1; this.dop *= -1; } if (this.opacity < 0 || this.y > this.ymax) { this.replace(); } if (!((0 < (ref = this.x) && ref < this.xmax))) { this.x = (this.x + this.xmax) % this.xmax; } return drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")"); }; return Confetti; })(); confetti = (function() { var j, ref, results; results = []; for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) { results.push(new Confetti); } return results; })(); window.step = function() { var c, j, len, results; requestAnimationFrame(step); context.clearRect(0, 0, w, h); results = []; for (j = 0, len = confetti.length; j < len; j++) { c = confetti[j]; results.push(c.draw()); } return results; }; step(); }).call(this); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Не подскажите в чем может быть проблема? При установке, появляется горизонтальная прокрутка, а сам эффект отображается внизу страницы, после всего контента. Сайт сделан на webflow, код вставляю между и ...
Нужно в самом низу CSS вставить: