Situs web DayTrip menggunakan efek rapi pada header halamannya yang mendistorsi gambar latar belakang dengan tekstur animasi dan kasar. Efeknya halus namun menciptakan getaran retro yang berdebu.
Efeknya sangat halus. Anda dapat melihat perbedaan di mana efeknya diterapkan di sebelah kanan dan dinonaktifkan di sebelah kiri:
Kita dapat membuat efek pedesaan yang sama dengan satu gambar dan sedikit CSS.
Langkah 1: Menyiapkan Segalanya
Pertama, mari kita siapkan header halaman kita. Kami akan menggunakan pola umum di mana gambar latar belakang menempati seluruh ruang.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Berikut adalah contoh untuk memulai:
Lihat Pen RpLKdx oleh Geoff Graham (@geoffgraham) di CodePen.
Langkah 2: Memilih Tekstur
Selanjutnya, kita membutuhkan gambar dengan tekstur kasar. Anda bisa membuatnya sendiri. Pola Halus juga memiliki sejumlah opsi bagus, termasuk yang ini yang akan kami gunakan untuk demo kami. Perhatikan bahwa gambar tidak perlu berukuran besar. Sesuatu di sekitar 400pxalun - alun akan berhasil.
Idenya adalah kita akan melapisi tekstur kasar di atas file .page-header. Kita bisa menggunakan :afterpseudo-element .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 bahwa kami menempatkan heightdan widthpada pseudo-element serta a topdan leftsehingga benar-benar melebihi batas header halaman dan berada di tengahnya. Kami ingin melakukan ini sehingga lapisan tekstur kasar memiliki ruang untuk bergerak tanpa mengekspos lapisan header halaman di bawahnya. Artinya adalah lapisan-lapisan yang disusun lebih seperti ini:
Sekarang kita memiliki tajuk halaman besar yang bagus dengan gambar berbintik di atasnya:
Lihat Pen evGvKg oleh Geoff Graham (@geoffgraham) di CodePen.
Langkah 3: Menganimasikan Grainy Layer
Hal terakhir yang perlu kita lakukan adalah menganimasikan layer grainy. Ini adalah efek yang kita kejar dan memberikan header halaman yang retro, daya tarik analog.
Situs DayTrip menggunakan yang berikut ini 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 sulit untuk memvisualisasikan apa arti kode itu, tetapi pada dasarnya memindahkan lapisan berbutir atas dalam pola zig-zag. Berikut ilustrasi tampilan pada skala yang lebih kecil:
Sekarang yang harus kita lakukan adalah menerapkan keyframes .page-header:afteruntuk melihatnya berlaku. Kami akan mengatur animasi untuk diputar selama 8 detik dan berputar tanpa batas:
.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; )Menyatukan Semuanya
Berikut cuplikan lengkap dengan semua bagian di tempatnya. Perhatikan bahwa kami mengasumsikan penggunaan Autoprefixer untuk semua prefiks 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 Efek Berbintik Animasi Pena oleh Geoff Graham (@geoffgraham) di CodePen.
