स्टार वार्स क्रॉल टेक्स्ट - सीएसएस-ट्रिक्स

स्टार वार्स का उद्घाटन प्रतिष्ठित है। टेक्स्ट स्क्रॉलिंग का प्रभाव स्क्रीन से ऊपर और दूर दोनों तरफ 1977 में एक फिल्म के लिए एक पागल शांत विशेष प्रभाव था और एक शांत टाइपोग्राफिक शैली थी जो उस समय बिल्कुल नया था।

हम HTML और CSS के साथ समान प्रभाव प्राप्त कर सकते हैं! यह पोस्ट पूर्ण स्टार वार्स ओपनिंग सीक्वेंस को फिर से बनाने या फिल्म में इस्तेमाल की गई सटीक शैलियों से मेल खाने के बजाय उस स्लाइडिंग टेक्स्ट इफेक्ट को प्राप्त करने के बारे में अधिक है, तो चलिए एक जगह पर पहुंचते हैं जहां यह अंतिम परिणाम है:

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

मूल HTML

सबसे पहले, सामग्री के लिए HTML सेट अप करें:

Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

इससे हमें वे सभी टुकड़े मिलते हैं जिनकी हमें आवश्यकता है:

• एक कंटेनर ने कहा star-warsकि हम सामग्री को स्थिति के लिए उपयोग करेंगे। यह आवश्यक भी है क्योंकि हम perspectiveCSS संपत्ति का उपयोग कर रहे होंगे , जहां एक मूल तत्व होने पर गहराई या बाल तत्व की transformसंपत्ति को जोड़ने के लिए एक सहायक तरीका है ।
• एक कंटेनर जिसे crawlवास्तविक पाठ कहा जाएगा और वह तत्व होगा जिसे हम CSS एनीमेशन को लागू करते हैं।
• यो विषय वस्तु!

आपने देखा होगा कि फिल्म का शीर्षक एक अतिरिक्त कंटेनर में लिपटा होता है title। यह आवश्यक नहीं है, लेकिन आपको अतिरिक्त स्टाइलिंग विकल्प प्रदान करने चाहिए जो आपको उनकी आवश्यकता होनी चाहिए।

बेसिक सीएसएस

चाल एक त्रि-आयामी अंतरिक्ष की कल्पना करने के लिए है जहां पाठ ऊपर Y-axisऔर बाहर ऊर्ध्वाधर क्रॉल करता है Z-axis। इससे यह आभास मिलता है कि पाठ स्क्रीन पर स्लाइड कर रहा है और एक ही समय में दर्शक से दूर है।

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

body ( /* Force the body to fill the entire screen */ width: 100%; height: 100%; /* Hide elements that flow outside the viewable space */ overflow: hidden; /* Black background for the screen */ background: #000; )

अब हम अपने star-warsकंटेनर को स्टाइल करने के लिए आगे बढ़ सकते हैं , जो हमारे डेमो के लिए मूल तत्व है:

.star-wars ( /* Flexbox to center the entire element on the screen */ display: flex; justify-content: center; /* This is a magic number based on the context in which this snippet is used and effects the perspective */ height: 800px; /* This sets allows us to transform the text on a 3D plane, and is somewhat a magic number */ perspective: 400px; /* The rest is totally up to personal styling preferences */ color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; text-align: justify; )

अगला, हम crawlतत्व में शैलियों को लागू कर सकते हैं । फिर से, यह तत्व महत्वपूर्ण है क्योंकि इसमें ऐसे गुण हैं जो पाठ को रूपांतरित करेंगे और एनिमेटेड होंगे।

.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Making sure the text is fully off the screen at the start and end of the animation */ top: -100px; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; )

अब तक, हमारे पास पाठ का एक अच्छा दिखने वाला गुच्छा है, लेकिन यह न तो तिरछा है और न ही एनिमेटेड है। आइए बनाते हैं।

एनीमेशन!

यह वही है जो आप वास्तव में परवाह करते हैं, है ना? सबसे पहले, हम @keyframesएनीमेशन के लिए परिभाषित करने जा रहे हैं । एनीमेशन हमारे लिए एनिमेशन करने की तुलना में थोड़ा अधिक कर रहा है, क्योंकि हम transformयहां अपने गुणों को जोड़ने जा रहे हैं, विशेष रूप से आंदोलन के लिए Z-axis। हम उस एनीमेशन को शुरू करेंगे, 0%जहां टेक्स्ट दर्शक के सबसे करीब है और स्क्रीन के नीचे स्थित है, देखने से बाहर है, फिर एनीमेशन को 100%उस स्थान पर समाप्त करें जहां यह दर्शक से बहुत दूर है और स्क्रीन के ऊपर और ऊपर बह रहा है।

/* We're calling this animation "crawl" */ @keyframes crawl ( 0% ( /* The element starts below the screen */ top: 0; /* Rotate the text 20 degrees but keep it close to the viewer */ transform: rotateX(20deg) translateZ(0); ) 100% ( /* This is a magic number, but using a big one to make sure the text is fully off the screen at the end */ top: -6000px; /* Slightly increasing the rotation at the end and moving the text far away from the viewer */ transform: rotateX(25deg) translateZ(-2500px); ) )

अब, उस .crawlतत्व पर एनीमेशन लागू करें :

.crawl ( /* Position the element so we can adjust the top property in the animation */ position: relative; /* Defines the skew origin at the very center when we apply transforms on the animation */ transform-origin: 50% 100%; /* Adds the crawl animation, which plays for one minute */ animation: crawl 60s linear; )

फन टाइम्स विथ फाइन-ट्यूनिंग

मुख्य प्रभाव होने के बाद आप चीजों के साथ थोड़ा और मज़ेदार हो सकते हैं। उदाहरण के लिए, हम स्क्रीन के शीर्ष पर दूरी में रेंगने वाले पाठ के प्रभाव को कम करने के लिए थोड़ा फीका जोड़ सकते हैं:

.fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; )

उस तत्व को HTML के शीर्ष पर जोड़ें और पाठ एक ढाल के पीछे से प्रवाहित होगा जो पारदर्शी से उसी पृष्ठभूमि पर जाता है :

पूर्ण उदाहरण

यहाँ इस पोस्ट से पूरा कोड एक साथ खींचा गया है।

Episode IV
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.
During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

body ( width: 100%; height: 100%; background: #000; overflow: hidden; ) .fade ( position: relative; width: 100%; min-height: 60vh; top: -25px; background-image: linear-gradient(0deg, transparent, black 75%); z-index: 1; ) .star-wars ( display: flex; justify-content: center; position: relative; height: 800px; color: #feda4a; font-family: 'Pathway Gothic One', sans-serif; font-size: 500%; font-weight: 600; letter-spacing: 6px; line-height: 150%; perspective: 400px; text-align: justify; ) .crawl ( position: relative; top: 9999px; transform-origin: 50% 100%; animation: crawl 60s linear; ) .crawl > .title ( font-size: 90%; text-align: center; ) .crawl > .title h1 ( margin: 0 0 100px; text-transform: uppercase; ) @keyframes crawl ( 0% ( top: 0; transform: rotateX(20deg) translateZ(0); ) 100% ( top: -6000px; transform: rotateX(25deg) translateZ(-2500px); ) )

अन्य उदाहरण

कुछ अन्य लोगों ने इस पोस्ट में कवर किए गए लोगों की तुलना में अन्य तकनीकों का उपयोग करते हुए स्टार वार्स खोलने के अधिक वफादार प्रतिपादन किए हैं।

टिम पित्रुसकी के पास topआंदोलन का उपयोग opacityकरने और लुप्त होती प्रभाव पैदा करने के लिए एक खूबसूरती से ऑर्केस्ट्रेटेड संस्करण है:

कोड पीपेन पर 1977 से टिम पिएत्रुसकी (@TimPietrusky) द्वारा क्रॉल खोलने वाले स्टार वार्स देखें।

Yukulélé marginस्क्रीन के साथ आगे बढ़ने के लिए उपयोग करता है:

कोडपैन पर युकुल (@yukulele) द्वारा क्रॉल खोलने वाले पेन प्योर सीएसएस स्टार वार्स देखें।

Karottes transformइस पोस्ट को बहुत पसंद करता है, लेकिन TranslateYटेक्स्ट को आगे बढ़ने के लिए अधिक निर्भर करता है Y-axis।

CodePen पर Karottes (@Karottes) द्वारा पेन स्टार वार्स क्रॉल देखें।