आज आप सीखेंगे कि एसवीजी आइकन को ऊपर और नीचे उछालने के लिए सीएसएस एनिमेशन का उपयोग कैसे करें। आप यह भी सीखेंगे कि कई सीएसएस एनीमेशन गुणों में से कुछ के साथ एनीमेशन प्रकार, समय और अवधि को कैसे बदला जाए।
यह क्यों उपयोगी है?
एनिमेशन, जब सही तरीके से किया जाता है, कर सकते हैं:
- अपने उपयोगकर्ताओं का मार्गदर्शन करें
- अपने उपयोगकर्ताओं को कार्रवाई करने के लिए प्रोत्साहित करें
- अपने उपयोगकर्ताओं का ध्यान आकर्षित करें (जबकि आपके पास अभी भी है)।
आवश्यकताएं
साथ चलने के लिए आपको एक टेक्स्ट एडिटर की आवश्यकता होगी। यदि आपके पास अपना स्थानीय विकास वातावरण नहीं है, तो मैं कोडपेन की सलाह देता हूं। आप तुरंत कोडिंग शुरू कर सकते हैं।
ठीक है, चलिए शुरू करते हैं!
<घंटा>HTML:कंटेनर और तीर जोड़ना
डेमो उदाहरण को फिर से बनाने के लिए, आपको चार HTML तत्वों की आवश्यकता है:
- तीर आइकन के लिए एक छवि तत्व
- तीर के ऊपर टेक्स्ट लेबल के लिए एक अवधि तत्व
- तीर और टेक्स्ट लेबल के चारों ओर लपेटने के लिए कंटेनर-फ़ुटर तत्व
- सभी तत्वों के चारों ओर लपेटने के लिए एक कंटेनर तत्व
अपने HTML संपादक पर जाएं और अपने <body></body> . के अंदर निम्न मार्कअप जोड़ें तत्व:
<div class="container">
<div class="container-footer">
<span class="text-label">Explore</span>
<svg
class="arrow-circle-down bounce"
viewbox="0 0 1792 1792"
xmlns="https://www.w3.org/2000/svg"
>
<path
d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
fill="#fff"
></path>
</svg>
</div>
</div>ऊपर हमने जो एरो कोड जोड़ा है वह SVG फॉर्मेट में है। यह Font Awesome CSS आइकन लाइब्रेरी पर आधारित है।
आप इस GitHub रेपो से एसवीजी प्रारूप में सैकड़ों फ़ॉन्ट विस्मयकारी आइकन चुन सकते हैं।
अपने संसाधन बचाएं!
बहुत सारी वेबसाइटें अपनी वेबसाइट पर संपूर्ण Font Awesome लाइब्रेरी लोड करती हैं, लेकिन वे केवल कुछ मुट्ठी भर आइकन का उपयोग करती हैं - यह बैंडविड्थ की बर्बादी है। आप एसवीजी प्रारूप में 5-10 आइकन डाउनलोड करके बहुत सारे संसाधनों को बचा सकते हैं जिनकी आपको वास्तव में आवश्यकता है।
इस उदाहरण के लिए, हम SVG फ़ाइल को सीधे HTML मार्कअप में एम्बेड कर रहे हैं। इस दृष्टिकोण को इनलाइन SVG. . कहा जाता है अलग-अलग उद्देश्यों के लिए एसवीजी जोड़ने के कई अन्य तरीके हैं - लेकिन मैं इसे एक अलग ट्यूटोरियल के लिए सहेजूंगा।
मैं इस ट्यूटोरियल में इस एसवीजी आइकन का उपयोग करता हूं।
यदि आप मूल एसवीजी स्रोत की तुलना उस स्रोत से करते हैं जिसे आप ऊपर दिए गए HTML मार्कअप में देखते हैं, तो आप देख सकते हैं कि मैंने कुछ बदलाव किए हैं:
- मैंने चौड़ाई और ऊंचाई के गुण हटा दिए हैं (मूल फ़ाइल बहुत बड़ी है)
- एक वर्ग जोड़ा गया:
arrow-circle-downजिसकी हमें CSS सेक्शन में आवश्यकता होगी।
ठीक है, चलिए थोड़ा स्टाइल जोड़ते हैं, और फिर हम CSS एनिमेशन के साथ मज़ेदार हिस्से पर आते हैं!
<घंटा>सीएसएस के साथ कंटेनर और तीर को स्टाइल करना
अपनी CSS स्टाइलशीट के अंदर, निम्नलिखित नियम-सेट (वर्ग, गुण और मान) जोड़ें:
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
background-color: #26a1ff;
height: 100vh;
}
.container-footer {
display: flex;
flex-direction: column;
align-items: center;
margin: auto auto 1rem auto;
}
.text-label {
text-transform: uppercase;
font-family: helvetica;
font-size: 0.75rem;
letter-spacing: 0.2em;
color: #fff;
}
.arrow-circle-down {
display: block;
width: 40px;
height: 40px;
margin: 16px 0;
}अब अगर आप अपनी ब्राउज़र विंडो को रिफ्रेश करते हैं, तो यह इस तरह दिखना चाहिए:
CSS में क्या हो रहा है:
- सबसे पहले, हम पैरेंट डिव एलिमेंट का
.container. देते हैं कक्षा 100vh की ऊंचाई मान। इससे यह पूरे व्यूपोर्ट पर कब्जा कर लेता है, चाहे डिवाइस कोई भी हो। हमdisplay: flex;. का उपयोग करते हैं इसे एक फ्लेक्स कंटेनर बनाने के लिए संपत्ति, जिसकी हमें तीर और टेक्स्टलेबल के लिए आवश्यकता होगी। हम इसे एक अच्छा हल्का नीला पृष्ठभूमि रंग भी देते हैं। - फिर हम देते हैं
.arrow-circle-downएक निश्चित चौड़ाई और 40px की ऊँचाई का वर्ग करें ताकि यह बहुत अधिक स्थान न ले। यह ध्यान देने योग्य होना चाहिए, लेकिन ध्यान भंग नहीं करना चाहिए। .text-labelअपरकेस प्रॉपर्टी और कुछ लेटर-स्पेसिंग के साथ थोड़ा कॉस्मेटिक स्टाइल मिलता है। बेझिझक इसे अपनी पसंद के अनुसार बदलें।- हम
.container-footerदेते हैं एक मार्जिन ऑटो संपत्ति ऊपर, दाएं और बाएं। यह कंटेनर फ़ुटर और उसके बच्चों (आइकन और टेक्स्ट) को पैरेंट कंटेनर के निचले भाग में ले जाता है, जहाँ हम इसे चाहते हैं। निचला मार्जिन एक1rem;. प्राप्त करता है मूल्य यह सुनिश्चित करने के लिए है कि तीर के बाउंस होने पर सब कुछ व्यूपोर्ट के भीतर रहता है। .container-footerक्लास को कुछ फ्लेक्स गुण भी मिलते हैं,flex-direction: column;औरalign-items: center;. ये गुण टेक्स्ट और आइकन तत्वों को एक दूसरे के ऊपर ढेर कर देते हैं और उन्हें कंटेनर पाद लेख के केंद्र में बिल्कुल संरेखित करते हैं।
स्पष्टीकरण के लिए, margin: auto auto 1rem auto अधिक क्रिया के लिए घोषणा एक अच्छा आशुलिपि है:
margin-top: auto;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;इसके बाद, CSS एनिमेशन के साथ अपने तीर को उछालने का समय आ गया है!
<घंटा>सीएसएस के साथ स्क्रॉल डाउन एरो को एनिमेट करना
सीएसएस, जावास्क्रिप्ट और संयोजन दोनों के साथ चेतन करने के कई तरीके हैं। इस उदाहरण के लिए, हम विशुद्ध रूप से CSS में चेतन करने जा रहे हैं।
हमने पहले ही एक.bounce जोड़ा है एसवीजी तीर वाले छवि तत्व के लिए वर्ग। अभी तक यह कुछ भी नहीं करता है क्योंकि हमने अभी तक CSS में क्लास को परिभाषित या स्टाइल नहीं किया है।
अपनी CSS स्टाइलशीट में निम्नलिखित जोड़ें:
.bounce {
animation: bounce 2s;
}
@keyframes bounce {
0%,
25%,
50%,
75%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-12px);
}
}और अब, आपके पास एक उछलता हुआ तीर है:
सीएसएस कोड में क्या हो रहा है
हमारे तीर के साथ एसवीजी तत्व पर, हमारे पास एक वर्ग है जिसे कहा जाता है.bounce . इस वर्ग में animation . नामक एक संपत्ति है ।
एनिमेशन प्रॉपर्टी के दो मान हैं,bounce और2s ।
bounce value एक ऐसा फ़ंक्शन है जो @keyframe एनिमेशन@keyframes bounce . को ट्रिगर करता है जो मुझे एक पल में मिल जाएगा।
2s value (दो सेकंड) हमारे @keyframe एनिमेशन को चलने में लगने वाले समय की कुल राशि है।
@keyframe एनिमेशन:
- दो सेकंड की कुल अवधि है (
animation property.) - कुल सात अलग-अलग मुख्य-फ़्रेम हैं। 0%, 25%, 40% 50%, 60% 75% और 100%।
- में तीन अलग-अलग Y निर्देशांक स्थितियाँ हैं:Y(0), Y(-20px) और Y(-12px)। ये निर्देशांक तय करते हैं कि तीर तत्व समय पर अलग-अलग बिंदुओं (कीफ़्रेम) पर ऊपर या नीचे जाता है या नहीं।
पहला @keyframe ब्लॉक {..} कहता है कि ठीक इन पांच मुख्य-फ़्रेम पर:0%, 25%, 50%, 75%, और 100%, — तीर प्रारंभ स्थिति में होना चाहिए, जो कि Y(0px) है।
0%,
25%,
50%,
75%,
100% {
transform: translateY(0);
}दूसरा @keyframe ब्लॉक कहता है कि 40% निशान पर, तीर को Y(-20px) की स्थिति देकर ऊपर जाना चाहिए।
40% {
transform: translateY(-20px);
}तीसरा मुख्य-फ़्रेम ब्लॉक कहता है कि 60% के निशान पर, तीर को फिर से ऊपर जाना चाहिए। इस बार हम तीर को पहली बार Y(-12px) की स्थिति देकर केवल आधा ही ऊपर ले जाते हैं।
60% {
transform: translateY(-12px);
}ध्यान दें किबीच में दो कीफ़्रेम जहाँ तीर ऊपर जाता है (40% और 60%) यह 50% कीफ़्रेम पर Y(0) पर वापस चला जाता है। यही कारण है कि तीर दो बार ऊपर और नीचे ले जाता है, अपेक्षाकृत कम समय में अपेक्षाकृत तेज़।
मैंने तीर को केवल -12px से तीसरे स्थान पर ले जाने का फैसला किया क्योंकि यह वास्तविक जीवन में उछलती गेंद की नकल करता है। दूसरी गेंद जमीन से टकराती है तो वह पहली बार की तुलना में कम ऊपर जाएगी। गेंद कितनी उछलती है (और कितनी ऊँची) निश्चित रूप से वजन, गति, सामग्री प्रकार आदि जैसे कई कारकों द्वारा निर्धारित की जाती है, लेकिन इससे हमें और अधिक चंचलता मिलती है, क्योंकि एक ही रास्ता नहीं है इसे करने के लिए।
यदि एनिमेशन के लिए CSS भ्रमित करने वाला है, तो अवधि के साथ खिलवाड़ करने का प्रयास करें और CSSअनुवाद को रूपांतरित करें संपत्ति। थोड़े से अभ्यास से, बिंदुओं को जोड़ना बहुत आसान हो जाएगा।
- 40% कीफ़्रेम को -48px की ट्रांसफ़ॉर्म ट्रांसलेशन प्रॉपर्टी देने का प्रयास करें और देखें कि क्या होता है।
- सीएसएस देने का प्रयास करें
animationसंपत्ति 2 के बजाय 5 सेकंड की अवधि है। फिर इसे 100ms का मान देने का प्रयास करें (आप सेकंड के बजाय मिलीसेकंड का उपयोग कर सकते हैं)।
यदि आप चरम सीमाओं के साथ प्रयोग करते हैं तो अवधारणा को घर चलाना अक्सर आसान होता है। आमतौर पर मेरे पास मेरे "आह" पल होते हैं।
प्रयोग!
CSS एनिमेशन में अनगिनत संभावनाएं हैं। आइए संक्षेप में कुछ बदलावों की जाँच करें जो हम अपने मौजूदा एनिमेशन में कर सकते हैं।
एनीमेशन-देरी गुण
अभी आपका वेबपेज लोड होते ही आपका तीर बाउंस हो जाता है। हो सकता है कि आप इसमें थोड़ा विलंब करना चाहें, ताकि आपके उपयोगकर्ता आपकी साइट में प्रवेश करने के कुछ सेकंड के भीतर विचलित न हों।
आप animation delay . जोड़कर ऐसा कर सकते हैं आपके .bounce . के लिए संपत्ति क्लास, इस तरह:
.bounce {
animation: bounce 2s;
animation-delay: 5s;
}अब आपका दो सेकंड का कीफ़्रेम एनिमेशन आपके पेज के लोड होने के ठीक पाँच सेकंड बाद तक चलना शुरू नहीं करेगा।
एनीमेशन इटरेशन काउंट प्रॉपर्टी
कभी-कभी आप एक एनीमेशन को दो बार दोहराना चाहते हैं। एनिमेशन दोहराने के लिए हम animation-iteration-count . का उपयोग करते हैं संपत्ति, इस तरह:
.bounce {
animation: bounce 2s;
animation-delay: 5s;
animation-iteration-count: 2;
}अब आपका तीर पाँच सेकंड के बाद उछलने लगता है, लेकिन इस बार यह कीफ़्रेम एनिमेशन को एक बार फिर दोहराता है।
अनंत सीएसएस एनिमेशन
कभी-कभी, दुर्लभ मामलों में, आप चाहते हैं कि CSS एनिमेशन असीमित रूप से चले। ऐसा करने के लिए आप एनीमेशन पुनरावृत्ति गणना को infinite; . में बदलते हैं इस तरह:
.bounce {
animation: bounce 2s;
animation-iteration-count: infinite;
}लेकिन अनंत एनिमेशन के साथ सावधानी से चलें। किसी को भी ऐसे एनिमेशन पसंद नहीं हैं जो हमेशा के लिए घूमते हों।
एक अपवाद तब होगा जब आपके पास कुछ प्रकार के रहने की जगह की पृष्ठभूमि हो जिसमें सूक्ष्म टिमटिमाते एनिमेशन वाले छोटे सितारों का एक समूह हो। वातावरण को गतिशील बनाए रखने के लिए आप उस प्रकार के उद्देश्य के लिए किसी एनिमेशन को लूप/दोहराना चाहेंगे।
ऑटोप्रीफिक्सर
इस कोड को सभी आधुनिक ब्राउज़रों में काम करने के लिए, आपको ऑटोप्रिफ़िक्सर का उपयोग करना चाहिए। मैंने उन्हें यहां कोड में नहीं जोड़ा क्योंकि मैं कोड को छोटा और पढ़ने में आसान रखना चाहता था। यदि आप इस कोडपेन पर जाते हैं तो आप सभी कोड प्राप्त कर सकते हैं, जिसमें प्रीफिक्स्ड गुण भी शामिल हैं।
सीएसएस एनिमेशन संसाधन
- एमडीएन वेब डॉक्स:सीएसएस एनिमेशन