DayTrip web sitesi, arka plan görüntüsünü animasyonlu, grenli bir doku ile bozan sayfa başlığında düzgün bir efekt kullanır. Etkisi hafiftir ancak tozlu, retro bir hava yaratır.
Etki çok ince. Sağda efektin olduğu ve solda devre dışı bırakıldığı yerdeki farkı görebilirsiniz:
Tek bir görsel ve biraz CSS ile aynı rustik efekti yaratabiliriz.
Adım 1: İşleri Kurmak
Önce, sayfa başlığımızı oluşturalım. Bir arka plan görüntüsünün tüm alanı kapladığı ortak bir model kullanacağız.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )İşte başlamamızı sağlayacak bir örnek:
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen RpLKdx'e bakın.
Adım 2: Bir Doku Seçme
Sonra, pürüzlü bir dokuya sahip bir resme ihtiyacımız var. Bunu kendiniz yaratabilirsiniz. Subtle Patterns ayrıca, demomuz için kullanacağımız da dahil olmak üzere bir dizi güzel seçeneğe sahiptir. Görüntünün çok büyük olmasına gerek olmadığını unutmayın. 400pxMeydanın mahallesindeki bir şey hile yapacak.
Buradaki fikir, grenli dokuyu .page-header. :afterSözde elemanı üzerinde kullanabiliriz, .page-headerböylece başka bir eleman yaratmaya gerek kalmaz.
.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; )Sözde öğenin yanı sıra a ve üzerine bir heightve yerleştirdiğimize dikkat edin, böylece sayfa başlığının sınırını gerçekten aşar ve ortalanır. Bunu yapmak istiyoruz ki, grenli doku katmanının, altındaki sayfa başlığı katmanını göstermeden hareket edebilecek yeri olsun. Bu, katmanların daha çok şöyle düzenlendiği anlamına gelir:widthtopleft
Şimdi üstte grenli bir resim olan güzel bir büyük sayfa başlığımız var:
Pen evGvKg by Geoff Graham (@geoffgraham) CodePen'de görün.
3. Adım: Grenli Katmanı Canlandırma
Yapmamız gereken son şey, grenli katmanı canlandırmak. Bu, peşinden gittiğimiz ve sayfa başlığına retro, analog çekiciliği veren efekttir.
DayTrip sitesi, animasyon ana karelerini tanımlamak için aşağıdakileri kullanır:
@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%) ) )Bu kodun ne anlama geldiğini görselleştirmek biraz zor, ama temelde üst grenli katmanı zikzak şeklinde hareket ettiriyor. Aşağıda, bunun daha küçük ölçekte nasıl göründüğüne dair bir örnek yer almaktadır:
Şimdi tek yapmamız gereken, .page-header:afteretkili olduğunu görmek için anahtar kareleri uygulamak . Animasyonu 8 saniye oynayacak ve sonsuz döngüye girecek şekilde ayarlayacağız:
.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; )Hepsini bir araya koy
İşte tüm parçalar yerinde olan tam pasaj. Tüm satıcı önekleri için Autoprefixer kullandığımızı varsaydığımızı unutmayın.
.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%) ) )Geoff Graham (@geoffgraham) tarafından CodePen'de Kalem Animasyonlu Grenli Etkisine bakın.