Фон с движущимися трапециями

Пример:

HTML:

<div id="lines"></div>

1	<div id="lines"></div>

JS:

Подключаем библиотеку p5.min.js и скрипт самой анимации:

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();
}
);

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

Пример:

HTML:

JS:

Где:

Смотрите также:

Добавить комментарий: