Реализация страниц с помощью API веб-анимации

 <div class="shuffle expose"> <img src="bridgefog.jpg" alt> <img src="daisyface.jpg" alt> <img src="drowninghand.jpg" alt> <img src="firefigure.jpg" alt> <img src="shellhand.jpg" alt> <img src="waterfeet.jpg" alt> </div> 

Я оставил значения alt изображений пустыми, чтобы код был чистым; в рабочей версии они будут заполнены описаниями. Фотографии предоставлены .tafo. , используется в соответствии с лицензией Creative Commons Attribution-NoDerivs 2.0 .

Мы можем добавить немного CSS для добавления изображений с анимацией, если условие без JavaScript все еще выполняется:

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

Доставка отдельного изображения может быть отложена с помощью:

 .expose img:nth-child(1) { animation-delay: 1s; } .expose img:nth-child(2) { animation-delay: 2s; } .expose img:nth-child(3) { animation-delay: 3s; } … 

Естественно, эти объявления могут быть автоматизированы с помощью Sass или другого препроцессора.

Изображения будут иметь границу, если родительский элемент имеет class webanim , который будет применяться с JavaScript:

 div.webanim img { border: 1.4vw solid #eee; } 

JavaScript

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

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

Затем я соберу контейнер изображений и все изображения внутри них, вместе с установкой переменной incrementor:

 var imgContainer = document.querySelector(".expose"), imgSeq = document.querySelectorAll(".shuffle img"), i = 1; 

Затем я удалю класс expose (оставив изображения с непрозрачностью 0 и не анимированные), поскольку CSS-анимация работает, только если контейнер имеет класс expose:

 imgContainer.classList.remove("expose"); imgContainer.classList.add("webanim"); 

Класс webanim размещает изображения с рамкой.

Основная часть скрипта выполняется в цикле forEach внутри функции. Я вызову функцию, как только буду уверен, что все данные изображения загружены (в отличие от узлов изображения, просто появляющихся в DOM), используя отличный сценарий imagesLoaded от David DeSandro :

 function racknstack() { Array.prototype.forEach.call(imgSeq, 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"; 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++; }) } 

Как и прежде, мы должны вызвать функцию, чтобы начать все с:

 imagesLoaded(imgSeq, racknstack); 

Результат: