Loading

Эффект чернильного перехода для сайта на CSS3

Эффект чернильного перехода для сайта на CSS3Недавно я наткнулся на несколько веб-сайтов с использованием чернильных эффектов в качестве перехода. Хорошим примером является сайт Sevenhills . Сначала я думал , что они использовали технику , приведенный в действие HTML холста (для обеспечения возможности прозрачности), а затем я проверил исходный код и выяснил , что они не используют видео, но применено изображение со спрайтами PNG. Используя PNG спрайты и steps () функцию синхронизации в CSS.

 

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

Процесс создания этих эффектов прост, давайте разберемся пошагово: Во-первых, вам нужно видео с эффектом наполнения и прозрачной областью. Затем вам нужно экспортировать видео в виде последовательности PNG. Мы использовали After Effects (убедитесь, что экспортировали в альфа-канал).

Эффект перехода на старинцы

Так как наше видео состоит из 25 кадров, значит соответственно у нас будет экспортирование в 25 PNG изображений. Просто чтобы дать вам больше информации о настройках композиции, мы создали 640x360px видео длительностью в 1 секунду и частотой кадров, равной 25.

Эффект перехода на старинцы

Наконец самая утомительная часть: вам нужно создать PNG спрайт, создавая новый образ, который включает в себя все кадры в той же строке. Мы сделали это вручную с помощью Photoshop, и объединены все кадры в одно изображение размером 16000 × 360 пикселей.

Эффект перехода на старинцы

Для того , чтобы включить последовательность в видео, нам просто нужно перевести PNG спрайт, и использовать функцию steps (), чтобы определить количество кадров. Теперь перейдем к самому коду.

Шаг 1. HTML

HTML структура состоит из 3-х основных элементов: main.cd-main-content для страницы основного содержания, параметр div.cd-mod для модального окна и div.cd-transition-layer для переходящего слоя.

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

Шаг 2. CSS

Параметр .cd-modal имеет, на начальном этапе, видимость: скрытый, высота: 100% и ширина:.100% и находится в фиксированном положении . Когда пользователь нажимает a.cd-modal-trigger , видимость модального окна изменяется видимым и непрозрачность до 1 (используя .Visible класс).

div.cd-transition-layer - элемент используется для создания эффекта перехода чернил: он имеет видимость: скрытый, высота: 100% и ширина: 100% и находится в фиксированном положении.

Его дочерний элемент div.bg-layer имеет ink.png спрайт в качестве фонового изображения, и имеет размер: 100%, высота: 100% и ширина: 2500% (при ink.png спрайт состоит из 25 кадров); его значения устанавливаются таким образом, чтобы на начальном этапе, первый кадр ink.png спрайта сосредоточен внутри  div.cd-transition-layer:

Примечание:  внутри дочернего элемента вы должны использовать:

В нашем случае мы хотим сосредоточить первый кадр ink.png спрайта, и так как div.cd-transition-layer шириной 25, мы используем translateX (- (50/25)%).

Для создания анимации чернил, мы меняем значение div.bg-layer и определяем cd-sequence для ключевых кадров:

Таким образом, в конце анимации последний кадр ink.png спрайта центрирован внутри div.cd-transition-layer элемента.

Примечание: поскольку у нас 25 кадров, чтобы показать последний кадр вам нужно перевести .bg-layer -100% * (25 — 1) = -96%; но потом, к центру вам нужно добавить дополнительно -2%.

Когда пользователь нажимает на a.cd-modal-trigger, то .Visible класс добавляется к .cd-transition-layer, чтобы показать его, в то время как .opening  класс используется для запуска анимации чернил:

Обратите внимание , что мы использовали steps () функции: это потому , что мы не хотим, чтобы значение непрерывно изменялось, а изменить через фиксированные шаги, чтобы показать один кадр за один раз;

Шаг 3. JS

Мы использовали JQuery для добавления / удаления классов , когда пользователь нажимает a.cd-modal-trigger или .modal-close, чтобы открыть / закрыть модальное окно.

Кроме того, мы меняем .bg-layer размеры, чтобы не изменить пропорции кадров PNG. В файле style.css, мы устанавливаем .bg высоту и ширину таким образом , что каждый кадр имеет высоту и ширину , равную окну просмотра. Viewport и кадры могут иметь различное соотношение сторон, хотя и это может исказить один кадр. Функция setLayerDimensions () была использована, чтобы предотвратить это:

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

Вот и все. Готово!

Отправить ответ

Оставьте первый комментарий!

Войти с помощью: 
  Subscribe  
Notify of
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля