Необходимо написать скрипт, который создаёт фон из квадратов похожих цветов, со случайным поворотом.
Анимировать фон так, чтобы при движении мыши те квадраты, на которые наводится мышь становились заданным цветом и этот цвет постепенно переходил в изначальный цвет квадрата, также анимация случайного поворота.
Ответ
Решение на основе библиотеки SVG.js
/* компоненты базового цвета */
var rgb = [255,201,218];
/* получаем холст */
var svg = document.getElementById("svg1");
/* добавляем квадрат с задаными параметрами */
function AddRect(x, y, width, height) {
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
/* вычисляем случайную компоненту цвета близкую к базовой */
function randomColorComponent(start,dist) {
var rez = start + Math.floor(Math.random() * dist);
if(rez > 255) {
rez = 255;
}
return rez;
}
/* создаём случайный цвет близкий к базовому */
var rgb2 = rgb.map(x => randomColorComponent(x, 30));
var color = `rgb(${ rgb2.join(",") })`;
rect.setAttribute("fill", color);
/* кастомный атрибут, для восстановления цвета */
rect.setAttribute("mycolor", color);
rect.setAttribute("stroke", "silver");
rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", width);
rect.setAttribute("height", height);
rect.setAttribute("class", "rect1");
/* случайный поворот */
var rot = Math.random() * 360;
rect.setAttribute(
"transform",
" rotate(" + rot + " " + (x + width / 2) + " " + (y + height / 2) + ")"
);
/* вешаем обработчик */
rect.addEventListener("mouseover", mouseOverSquare);
/* добавляем на холст */
document.getElementById("svg1").appendChild(rect);
}
/* обработчик наведения мыши на квадрат */
function mouseOverSquare() {
/* получаем объект SVG.js из текущего */
var rect1 = SVG.adopt(this);
/* останавливаем анимацию которая могла быть запущена ранее с сохранением параметров */
rect1.finish();
/* перемещаем квадрат наверх холста для большей красоты анимации */
this.remove();
svg.append(this);
var rot = (Math.random() - 0.5) * 90;
/* извлекаем цвет для возврата из кастомного атрибута */
var color = this.getAttribute("mycolor");
/* заполняем новым цветом */
rect1.fill("rgb(87, 86, 255)");
/* анимируем варщение и возвращение цвета */
rect1.animate(1100, "-").rotate(rot).attr({
"fill": color
});
}
/* заполнение холста квадратами */
function FillArea() {
var style = window.getComputedStyle(svg);
var width = parseInt(style.width);
var height = parseInt(style.height);
var rectWidth = 24;
var rectHeight = 24;
var vxx = 27;
var vyy = 27;
for (var x = -7; x < width; x += vxx) {
for (var y = -7; y < height; y += vyy) {
AddRect(x, y, rectWidth, rectHeight);
}
}
}
FillArea();
#svg1 {
width: 100%;
height: 175px;
background-color: rgb(255,201,218);
}
Полный код примера - ссылка
Комментариев нет:
Отправить комментарий