Случайный коллаж из изображений с помощью Web Animation API и Progressive JS

Дата публикации: 2016-06-22

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

Шаг за шагом

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

<div class="shuffle reveal">
    <img src="umbrellas.jpg" alt>
    <img src="shopping-at-night.jpg" alt>
    <img src="lanterns.jpg" alt>
    <img src="outdoor-dining.jpg" alt>
    <img src="blade-runner.jpg" alt>
    <img src="square-umbrellas.jpg" alt>
</div>

</div>

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

@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; 
}

@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;

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

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

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++;

})

На каждой итерации фотографиям:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

Задается случайное значение left в процентах, между -5 и 65, т.е. изображения могут немного выступать за экран по левую и правую стороны.

Задается свойство top в единицах измерения vh. Опять же фото может слегка выходить за видимую область коллажа.

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

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

.expose {

border: 1.4rem solid #eee;

}

Web Animation API позволяет создавать эффект случайно разбросанных изображений, для этого используется переменная animate:

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

Прозрачность фотографии постепенно сходит на нет, чуть-чуть меняется угол наклона, а также тень становится более четкой. Во втором keyframe данные свойства не заданы, поэтому масштаб автоматически выставляется в 1.

Каждая анимация длится 2 секунды, задержка вычисляется как инкремент i, умноженный на 1000 миллисекунд.

Заключение и улучшения

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

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

Изображения падают одно на другое в том порядке, в котором они появляются на странице. Было бы неплохо перемешивать фотографии, что бы каждый раз они появлялись в случайном порядке.

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

Про все эти возможности я расскажу в будущих статьях, а также покажу новые демо.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее