javascript — плитки, меняющие цвет фона

Question

javascript — плитки, меняющие цвет фона

Это скорее теоретический вопрос с несколькими фрагментами кода. Я хотел бы создать сайт с фоном, полным плиток, которые постоянно меняют цвет и форму. Хорошим примером являются плитки Windows Phone 8. Конечно, позже я хотел бы создать более сложный эффект, но я хотел бы знать, как, например, вы будете изменять каждую квадратную область размером 50×50 пикселей.

Это фрагмент кода для постоянного изменения цвета фона.

.animate {
height: 200px;
width: 400px;
border: 1px solid #000;
-webkit-animation: animate_bg 5s;
animation: animate_bg 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

@keyframes animate_bg {
0%   {background:red;}
50%  {background:green;}
100% {background:blue;}
}

@keyframes animate_bg {
0%   {background:red;}
50%  {background:green;}
100% {background:blue;}
}

@-webkit-keyframes animate_bg {
0%   {background:red;}
50%  {background:green;}
100% {background:blue;}
}

Теперь мне нужно создавать этот эффект снова и снова и снова, пока он не заполнит мою страницу, или есть лучший способ сделать это? Может быть, есть функция ‘random repeat’, похожая на bg-repeat? Примечание: плитки должны быть рандомизированы в начальный цвет.

Спасибо!

2

ajax css3 html5 javascript php

Решение

Accepted Answer

Конечно, есть лучший способ (как обычно, когда вы повторяете код).

Используйте CSS-переходы для эффекта анимации, определите множество классов — каждый для своего цвета и случайным образом назначьте их с помощью JavaScript.

Вот простой пример, показывающий, что я написал выше в действии. Поддерживает неограниченное количество плиток и цветов.

var tiles = document.getElementsByClassName('tile');
var totalTypes = 5;
var interval = 1000;

function paintTiles() {
for (var i = 0; i < tiles.length; i++) {
tiles[i].className = 'tile'; // reset classes
tiles[i].classList.add('type' + Math.ceil(Math.random() * totalTypes));
}
}
paintTiles(); // initial paint
setInterval(paintTiles, interval); // paint afterwards

.tile {
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid black;
transition: 1s all linear;
}

.type1 {
background: red;
}

.type2 {
background: blue;
}

.type3 {
background: green;
}

.type4 {
background: yellow;
}

.type5 {
background: chucknorris;
/*
:)
inspired by: http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
*/
}

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<br>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

1

Другие решения

Других решений пока нет …

Источник