Уебсайтът на 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%) ) )Вижте Pen Animated Grainy Effect от Geoff Graham (@geoffgraham) на CodePen.