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

Stats: 1314 0
Author: RUDEBOX
Category: Технології
Comments: Комментариев нет

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

Недавно я наткнулся на несколько веб-сайтов с использованием чернильных эффектов в качестве перехода. Хорошим примером является сайт 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 для переходящего слоя.

&lt;main class="cd-main-content"&gt;
&lt;div class="center"&gt;
&lt;h1&gt;Эффект перехода&lt;/h1&gt;
&lt;a href="#0" class="cd-btn cd-modal-trigger"&gt;Начать эффект&lt;/a&gt;
&lt;/div&gt;
&lt;/main&gt;</p>
&lt;div class="cd-modal"&gt;
&lt;div class="modal-content"&gt;
&lt;h1&gt;Заголовок модального окна&lt;/h1&gt;

&lt;p&gt;
Описаине
&lt;/p&gt;
&lt;/div&gt;

&lt;a href="#0" class="modal-close"&gt;Закрыть&lt;/a&gt;
&lt;/div&gt;

&lt;div class="cd-transition-layer"&gt;
&lt;div class="bg-layer"&gt;&lt;/div&gt;
&lt;/div&gt;

<h1>Эффект перехода</h1>

<a href="#0" class="cd-btn cd-modal-trigger">Начать эффект</a>

</div>

</main></p>

<h1>Заголовок модального окна</h1>

<p>

Описаине

</p>

</div>

<a href="#0" class="modal-close">Закрыть</a>

</div>

</div>

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

Шаг 2. CSS

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

.cd-modal {
position: fixed;
top: 0;
left: 0;
z-index: 3;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
}
.cd-modal.visible {
opacity: 1;
visibility: visible;
}

.cd-modal {

position: fixed;

top: 0;

left: 0;

z-index: 3;

height: 100%;

width: 100%;

opacity: 0;

visibility: hidden;

}

.cd-modal.visible {

opacity: 1;

visibility: visible;

}

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

.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}

.cd-transition-layer {

position: fixed;

top: 0;

left: 0;

z-index: 2;

height: 100%;

width: 100%;

opacity: 0;

visibility: hidden;

overflow: hidden;

}

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

.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-2%);
height: 100%;
width: 2500%;
background: url(../img/ink.png) no-repeat 0 0;
background-size: 100% 100%;
}

.cd-transition-layer .bg-layer {

position: absolute;

left: 50%;

top: 50%;

transform: translateY(-50%) translateX(-2%);

height: 100%;

width: 2500%;

background: url(../img/ink.png) no-repeat 0 0;

background-size: 100% 100%;

}

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

position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);

position: absolute;

left: 50%;

top: 50%;

transform: translateY(-50%) translateX(-50%);

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

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

@keyframes cd-sequence {
0% {
transform: translateY(-50%) translateX(-2%);
}
100% {
transform: translateY(-50%) translateX(-98%);
}
}

@keyframes cd-sequence {

0% {

transform: translateY(-50%) translateX(-2%);

}

100% {

transform: translateY(-50%) translateX(-98%);

}

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

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

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

.cd-transition-layer.visible {
opacity: 1;
visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
animation: cd-sprite 0.8s steps(24);
animation-fill-mode: forwards;
}

.cd-transition-layer.visible {

opacity: 1;

visibility: visible;

}

.cd-transition-layer.opening .bg-layer {

animation: cd-sprite 0.8s steps(24);

animation-fill-mode: forwards;

}

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

Шаг 3. JS

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

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

var frameProportion = 1.78,
frames = 25,
resize = false;

setLayerDimensions();
$(window).on('resize', function(){
if( !resize ) {
resize = true;
(!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300) : window.requestAnimationFrame(setLayerDimensions);
}
});

function setLayerDimensions() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
layerHeight, layerWidth;

if( windowWidth/windowHeight &gt; frameProportion ) {
layerWidth = windowWidth;
layerHeight = layerWidth/frameProportion;
} else {
layerHeight = windowHeight;
layerWidth = layerHeight*frameProportion;
}

transitionBackground.css({
'width': layerWidth*frames+'px',
'height': layerHeight+'px',
});

resize = false;
}