एनिमेटेड ग्रेनी बनावट - सीएसएस-ट्रिक्स

DayTrip वेबसाइट अपने पेज हेडर पर एक साफ प्रभाव का उपयोग करती है जो पृष्ठभूमि की छवि को एक एनिमेटेड, दानेदार बनावट के साथ विकृत करती है। प्रभाव सूक्ष्म है लेकिन एक धूल, रेट्रो खिंचाव बनाता है।

प्रभाव बहुत सूक्ष्म है। आप उस अंतर को देख सकते हैं जहां प्रभाव दाईं ओर है और बाईं ओर अक्षम है:

हम एकल छवि और सीएसएस का एक ही देहाती प्रभाव बना सकते हैं।

चरण 1: चीजों को स्थापित करना

सबसे पहले, हमारे पेज हेडर को सेट करें। हम एक सामान्य पैटर्न का उपयोग करने जा रहे हैं जहां एक पृष्ठभूमि छवि पूरे स्थान को लेती है।

.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )

हमें आरंभ करने के लिए एक उदाहरण यहां दिया गया है:

CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन RpLKdx देखें।

चरण 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इतना है कि यह वास्तव में पृष्ठ पर शीर्ष लेख की सीमा से अधिक है और इसे करने के लिए केंद्रित है। हम ऐसा करना चाहते हैं ताकि दानेदार बनावट की परत के नीचे पृष्ठ शीर्षक परत को उजागर किए बिना घूमने के लिए जगह हो। इसका मतलब है कि परतें इस तरह व्यवस्थित की जाती हैं:

अब हमारे पास शीर्ष पर एक दानेदार छवि के साथ एक अच्छा बड़ा पृष्ठ हैडर है:

CodePen पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा पेन एग्जवकेग देखें।

चरण 3: ग्रेनी लेयर को एनिमेट करना

आखिरी चीज जो हमें करने की ज़रूरत है वह दानेदार परत को चेतन करना है। यह वह प्रभाव है जिसके बाद हम जा रहे हैं और पृष्ठ शीर्ष लेख जो रेट्रो, एनालॉग अपील देता है।

डेट्रिप साइट एनीमेशन कीफ्रेम को परिभाषित करने के लिए निम्नलिखित का उपयोग करती है:

@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; )

यह सब एक साथ डालें

यहां सभी टुकड़ों के साथ पूर्ण स्निपेट है। ध्यान दें कि हम सभी विक्रेता उपसर्ग के लिए ऑटोप्रिफ़र का उपयोग मान रहे हैं।

.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) द्वारा पेन एनिमेटेड ग्रेनी इफेक्ट देखें।