Веб-сайт DayTrip використовує акуратний ефект у заголовку сторінки, який спотворює фонове зображення анімованою зернистою текстурою. Ефект тонкий, але створює запилену ретро-атмосферу.
Ефект дуже тонкий. Ви бачите різницю в тому, де ефект діє праворуч, а ліворуч відключений:
Ми можемо створити той самий сільський ефект з одним зображенням і трохи CSS.
Крок 1: Налаштування речей
Спочатку налаштуємо заголовок нашої сторінки. Ми будемо використовувати загальний шаблон, коли фонове зображення займає весь простір.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Ось приклад для початку роботи:
Дивіться Pen RpLKdx від Geoff Graham (@geoffgraham) на CodePen.
Крок 2: Вибір текстури
Далі нам потрібно зображення із зернистою текстурою до нього. Ви можете створити це самостійно. Витончені візерунки також мають ряд приємних варіантів, включаючи цей, який ми використаємо для демонстрації. Зверніть увагу, що зображення не повинно бути величезним. Щось у районі 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; )Зверніть увагу, що ми розмістили а heightі widthна псевдоелементі, а також а, topі leftтаким чином, щоб він фактично перевищував межу заголовка сторінки та був центрований до нього. Ми хочемо зробити це, щоб зернистий текстурний шар мав місце для переміщення, не відкриваючи шару заголовка сторінки під ним. Це означає, що шари розташовані приблизно так:
Тепер у нас є гарний заголовок великої сторінки з зернистим зображенням зверху:
Дивіться Pen evGvKg від Geoff Graham (@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.