Анимированная зернистая текстура онлайн урок.


Сайт DayTrip использует аккуратный эффект на своем заголовке страницы, который искажает фоновое изображение с анимированной, зернистой текстурой. Эффект тонкий, но создает пыльную, ретро-вибрацию.

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

Отсутствие эффекта (слева) против эффекта зернистости (справа)

Мы можем создать тот же деревенский эффект с помощью одно изображение и немного CSS.

# Шаг 1: настройка вещей

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

.page-header {
height: 100vh;
background-image: url("/path/to/image.jpg");
}

Вот пример, чтобы мы начали:

# Шаг 2: Выбор текстуры

Затем нам нужно изображение с зернистой текстурой. Вы можете создать это самостоятельно. Тонкие паттерны также содержит несколько хороших опций, включая этот , который мы будем использовать для нашей демонстрации. Обратите внимание, что изображение не должно быть огромным. Что-то в районе400pxквадрата сделает трюк.

Идея состоит в том, что мы наложим зернистую текстуру поверх.page-header. Мы можем использовать : после псевдоэлемента в.page-header, поэтому нет необходимости создавать другой элемент.

.page-header {
height: 100vh;
background-image: url("/path/to/image.jpg");
}

.page-header:after {
/* content is required when using :after */
content: "";
/* The grainy image */
background-image: url("/path/to/grainy/image.jpg");
/* Specify a height and width above and beyond the page header for movement */
height: 300%;
width: 300%;
/* We're using opacity in place of a transparent image */
opacity: 0.3;
/* We'll need this when the animation kicks in to hold the position of the texture */
position: fixed;
}

Обратите внимание, что мы поместилиheightиwidthна псевдоэлемент, а такжеtopиleft, чтобы он фактически превышал границу заголовка страницы и был центрирован на нем. Мы хотим сделать это так, чтобы зернистый слой текстуры мог перемещаться, не подвергая слой заголовка страницы снизу. Это означает, что слои расположены так:

Верхний уровень теперь превышает границы заголовка страницы

Теперь у нас есть хороший большой заголовок страницы с зернистым изображением сверху:

# Шаг 3: Анимация зернистого слоя

Последнее, что нам нужно сделать, это анимировать зернистый слой. Это тот эффект, который мы идем, и дает заголовку страницы ретро-аналоговую привлекательность.

На DayTrip-сайте для определения ключевых кадров анимации используется следующее:

@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}

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

Теперь нам нужно всего лишь применить ключевые кадры к.page-header: после, чтобы увидеть, как это вступит в силу. Мы настроим анимацию на 8 секунд и запустим бесконечно:

.page-header:after {
/* content is required when using :after */
content: "";
/* The animation */
animation: grain 8s steps(10) infinite;
/* The grainy image */
background-image: url("/path/to/grainy/image.jpg");
/* Specify a height and width above and beyond the page header for movement */
height: 300%;
width: 300%;
/* We're using opacity in place of a transparent image */
opacity: 0.3;
/* We'll need this when the animation kicks in to hold the position of the texture */
position: fixed;
}

# Вводя все вместе

Вот полный фрагмент со всеми деталями. Обратите внимание, что мы предполагаем использование Autoprefixer для всех префиксов поставщиков.

.page-header {
height: 100vh;
background-image: url("/path/to/image.jpg");
}

.page-header:after {
animation: grain 8s steps(10) infinite;
background-image: url("/path/to/grainy/image.jpg");
content: "";
height: 300%;
left: -50%;
opacity: 0.3;
position: fixed;
top: -100%;
width: 300%;
}

@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}