Пример:
HTML:
1 |
<div id="lines"></div> |
JS:
Подключаем библиотеку p5.min.js и скрипт самой анимации:
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 |
let objectCount = 100; let canbg = "#337AB7"; let canheight = 500; let canwidth = document.getElementById('lines').offsetWidth; let objects = []; class FlowObjects { constructor(x, width, flowAngle, opacity) { this.x = x; this.initX = x; this.y = random(-50, height); this.initY = this.y; this.width = width; this.initWidth = width; this.height = this.width * 3; this.opacity = opacity; this.v = opacity; this.angle = flowAngle; } update() { this.x += this.v; this.y = tan(flowAngle) * 1 + this.y; if (this.y - this.height / 2 >= height) { this.reset(); } if (this.x - this.width / 2 >= width) { this.reset(); } } reset() { this.x = this.initX; this.y = 0 - this.height / 2; this.width = this.initWidth; } draw() { push(); translate(this.x, 0); noStroke(); fill(`rgba(191, 226, 255, ${this.opacity})`); shearX(this.angle); rect(0, this.y, this.width, this.height, 5); pop(); } perspective({ movementX: movX }) { this.x += movX * this.opacity * 0.1; } } function setup() { let myCanvas = createCanvas(canwidth, canheight); myCanvas.parent("lines"); rectMode(CENTER); flowAngle = PI / 6; for (let i = 0; i < objectCount; i++) { objects.push( new FlowObjects( random(-width, width), floor(random(15, 40)), PI / 8, random() ) ); } } function draw() { background(canbg); for (let i = 0; i < objects.length; i++) { objects[i].update(); objects[i].draw(); } noFill(); } function mouseMoved(event) { for (let i = 0; i < objects.length; i++) { objects[i].perspective(event); } } window.addEventListener('resize', () => { objects=[]; setup(); } ); |
Где:
objectCount
- Кол-во трапеций
canbg
- Цвет фона
canheight
- Высота блока
canwidth
- Ширина блока.
Цвет трапеций задается в RGB в строке 38: fill(`rgba(191, 226, 255, ${this.opacity})`);
Найдено на codepen.io у пользователя Abhinash
Добавить комментарий: