На веб-сайте DayTrip в заголовке страницы используется изящный эффект, который искажает фоновое изображение анимированной зернистой текстурой. Эффект тонкий, но создает пыльную ретро-атмосферу.
Эффект очень тонкий. Вы можете увидеть разницу, где эффект присутствует справа и отключен слева:
Мы можем создать тот же деревенский эффект с помощью одного изображения и немного CSS.
Шаг 1. Настройка
Во-первых, давайте настроим заголовок нашей страницы. Мы собираемся использовать общий шаблон, в котором фоновое изображение занимает все пространство.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Вот пример для начала:
Смотрите Pen RpLKdx Джеффа Грэма (@geoffgraham) на CodePen.
Шаг 2: выбор текстуры
Далее нам понадобится изображение с зернистой текстурой. Вы можете создать это сами. В Subtle Patterns также есть несколько хороших опций, в том числе тот, который мы будем использовать для нашей демонстрации. Учтите, что изображение не обязательно должно быть огромным. Что-нибудь в районе 400pxплощади подойдет.
Идея состоит в том, что мы наложим зернистую текстуру поверх .page-header. Мы можем использовать :afterпсевдоэлемент, .page-headerпоэтому нет необходимости создавать другой элемент.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* 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; )Обратите внимание, что мы поместили a heightи widthна псевдоэлемент, а также на topand, leftтак что он фактически выходит за границу заголовка страницы и центрируется по нему. Мы хотим сделать это так, чтобы у слоя с зернистой текстурой было пространство для перемещения, не открывая нижний слой заголовка страницы. Это означает, что слои расположены примерно так:
Теперь у нас есть красивый большой заголовок страницы с зернистым изображением сверху:
См. Pen evGvKg Джеффа Грэма (@geoffgraham) на CodePen.
Шаг 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:afterчтобы увидеть, как это подействует. Мы установим воспроизведение анимации на 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.webp"); /* 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.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); 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%) ) )См. «Эффект зернистости с анимацией пера» от Джеффа Грэма (@geoffgraham) на CodePen.