Випадковий колаж з зображень за допомогою Web Animation API і Progressive JS

Від автора: надихнувшись популярним скрін сейвером на Mac OS X, за допомогою неймовірних фотографій Liam Wong я створив автоматизовану презентацію для сайтів. Цей колаж підходить для портфоліо і маркетингу. У презентації поєднуються як деякі з найстаріших принципів веб-розробки – прогресивне поліпшення – так і новітні зразок Web Animation API.

Крок за кроком

Для підтримки Web Animation API у всіх браузерах, а не тільки в Chrome і Firefox я буду використовувати полифил. Вкрай важливо вибудовувати взаємодію з можливості, що JavaScript зовсім не буде працювати. Тому зображення на сторінці будуть розміщені наступним чином (атрибут alt ми залишили порожнім для простоти коду)

Метод працює набагато краще з великою кількістю фотографій, тому можна завантажити всі зображення з папки і анімувати їх. Якщо припустити, що базовий CSS завантажився, тоді зображення необхідно розташувати в ряди за допомогою однієї з варіацій техніки, про яку я розповідав у минулій статті:

@keyframes reveal {
to {
opacity: 1;
}
}
.shuffle {
min-height: 100vh;
position: relative;
}
.shuffle img {
width: 33%;
opacity: 0;
transform: scale(1.3);
}
.reveal img {
animation: reveal 1s 1s forwards;
}

Блоку div встановлено властивість min-height в одиницях виміру vh, а також position: relative. Це зроблено, щоб презентація займала всю сторінку. CSS без відповідного JS коду не має сенсу – зображення будуть плавно з’являтися все разом з односекундної затримкою.

Додаємо Web Animation

Мінімум ми зробили, тепер потрібно додати JS. Насамперед необхідно відключити стандартну анімацію; для цього ми видаляємо клас shuffle:

var reveal = document.querySelector(“.reveal”);
reveal.classList.remove(“reveal”);
var revealedImages = reveal.querySelectorAll(“img”),
i = 1;

Зображення будуть розкидані по полю і нахилені у випадковому порядку, тому я написав функцію, яка обчислює випадкове число в двох межах:

function getRandom(min, max) {
return Math.random() * (max – min) + min;
}

Всі зображення всередині DIV передаються в масив, де я можу пройтися в циклі по кожному зображенню:

Array.prototype.forEach.call(revealedImages, function(photo) {
setTimeout(function(){
photo.style.position = “absolute”;
photo.style.width = getRandom(33,45)+”%”;
photo.style.left = getRandom(-5,65)+”%”;
photo.style.top = getRandom(-6,60)+”vh”;
photo.classList.add(“expose”);
var animate = photo.animate([
{ opacity: ‘0’, transform: ‘rotate(‘+getRandom(-12,12)+’deg) scale(1.2)’,
boxShadow: ‘0 0 12px 12px rgba(0,0,0,.3)’ },
{ opacity: ‘1’, transform: ‘rotate(‘+getRandom(-8,8)+’deg)’,
boxShadow: ‘0 0 6px 6px rgba(0,0,0,.3)’ }
], {
duration: 2000,
fill: ‘forwards’
});
}, 1800*i)
i++;
})

На кожній ітерації фотографій:

.expose {
border: 1.4 rem solid #eee;
}

Web Animation API дозволяє створювати ефект випадково розкиданих зображень, для цього використовується змінна animate:

Висновок і поліпшення

В парі з хорошим Web Animation API полілфілом для браузерів, які не підтримують специфікацію, результат досить непоганий. Однак ще є, що покращувати:

Про всі ці можливості я розповім в наступних статтях, а також покажу нові демо.