Laman web DayTrip menggunakan kesan yang rapi pada tajuk halamannya yang memutarbelitkan gambar latar dengan tekstur beranimasi dan kasar. Kesannya halus tetapi menimbulkan getaran retro yang berdebu.
Kesannya sangat halus. Anda dapat melihat perbezaan di mana kesannya ada di sebelah kanan dan dilumpuhkan di sebelah kiri:
Kita boleh membuat kesan pedesaan yang sama dengan satu gambar dan sedikit CSS.
Langkah 1: Menetapkan Perkara
Pertama, mari sediakan tajuk halaman kami. Kami akan menggunakan corak umum di mana gambar latar mengambil seluruh ruang.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Inilah contoh untuk memulakan kami:
Lihat Pen RpLKdx oleh Geoff Graham (@geoffgraham) di CodePen.
Langkah 2: Memilih Tekstur
Seterusnya, kita memerlukan gambar dengan tekstur kasar padanya. Anda boleh membuatnya sendiri. Pola halus juga mempunyai beberapa pilihan yang bagus, termasuk yang akan kita gunakan untuk demo kita. Perhatikan bahawa gambar tidak perlu besar. Sesuatu di kawasan 400pxdataran akan melakukan muslihat.
Ideanya ialah kita akan melapisi tekstur kasar di bahagian atas .page-header. Kita boleh menggunakan :afterelemen pseudo .page-headersehingga tidak perlu membuat elemen lain.
.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; )Perhatikan bahawa kami meletakkan a heightdan widthpada elemen pseudo serta a topdan leftsehingga ia benar-benar melampaui batas tajuk halaman dan berpusat di dalamnya. Kami ingin melakukan ini supaya lapisan tekstur kasar mempunyai ruang untuk bergerak tanpa mendedahkan lapisan tajuk halaman di bawahnya. Ini bermaksud lapisan disusun lebih seperti ini:
Sekarang kami mempunyai tajuk halaman besar yang bagus dengan gambar kasar di atas:
Lihat Pen evGvKg oleh Geoff Graham (@geoffgraham) di CodePen.
Langkah 3: Menganimasikan Lapisan Grainy
Perkara terakhir yang perlu kita lakukan ialah menghidupkan lapisan berbutir. Inilah kesan yang akan kita jalani dan memberikan tajuk yang menarik dan retro kepada tajuk halaman.
Laman web DayTrip menggunakan yang berikut untuk menentukan bingkai utama animasi:
@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%) ) )Agak sukar untuk memvisualisasikan maksud kod itu, tetapi pada dasarnya menggerakkan lapisan butiran atas dengan corak zig-zag. Berikut adalah gambaran bagaimana rupa pada skala yang lebih kecil:
Sekarang yang harus kita lakukan adalah menggunakan bingkai utama .page-header:afteruntuk melihatnya berlaku. Kami akan mengatur animasi untuk dimainkan selama 8 saat dan berputar tanpa henti:
.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; )Meletakkannya Bersama
Inilah coretan penuh dengan semua kepingan yang ada. Perhatikan bahawa kami menganggap penggunaan Autoprefixer untuk semua awalan vendor.
.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%) ) )Lihat Kesan Grainy Pen Animated oleh Geoff Graham (@geoffgraham) di CodePen.