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

23

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

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

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

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

Метод працює набагато краще з великою кількістю фотографій, тому можна завантажити всі зображення з папки і анімувати їх. Якщо припустити, що базовий 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++;
})

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

Задається абсолютне позиціонування, щоб ми могли рухати їх куди завгодно щодо контейнера.

Задається випадкова ширина, яка обчислюється у відсотках від ширини контейнера, значення між 33 і 45%.

Задається випадкове значення left у відсотках, між -5 і 65, тобто зображення можуть трохи виступати за екран по ліву і праву сторони.

Задається властивість top в одиницях виміру vh. Знову ж фото може злегка виходити за видиму область колажу.

Додається клас expose – рамка зображення. Клас необхідно прописати в стилях, щоб скрипт міг використовувати його:

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

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

Первісна opacity фотографій задана в 0, також визначити стартовий кут нахилу і масштаб 1.2. Також застосовується властивість boxShadow (Зверніть увагу на відсутність тире і верблюжа стиль написання властивості JavaScript).

Прозорість фотографії поступово сходить нанівець, трохи змінюється кут нахилу, а також тінь стає більш чіткою. У другому keyframe дані властивості не визначено, тому масштаб автоматично виставляється в 1.

Кожна анімація триває 2 секунди, затримка обчислюється як інкремент i, помножений на 1000 мілісекунд.

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

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

Значення властивість left і top легко передбачити: набагато краще обчислювати їх максимальних значень width і top фотографій, а також співвідношення сторін.

Зображення падають одне на інше в тому порядку, в якому вони з’являються на сторінці. Було б непогано перемішувати фотографії, що б кожен раз вони з’являлися у випадковому порядку.

Верхні зображення можуть загородити нижні; тому добре було б додати можливість перетягувати зображення користувачем.

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