प्रवेश एनीमेशन
पहली छाप छड़ी अपनी सामग्री को सिर्फ प्रकट करने के बजाय, इसे आने दें प्रवेश एनीमेशन एक्सटेंशन किसी भी एलिमेंटर तत्व में गति जोड़ता है, जैसे ही वह दृश्य में स्क्रॉल करता है 70+ प्रभाव से लेने के लिए: फीका, स्लाइड, बाउंस, फ्लिप और ज़ूम आप गति, देरी और सहजता सेट करते हैं, इसलिए एक शीर्षक धीरे-धीरे बहाव कर सकता है जबकि फीचर आइकन की एक पंक्ति एक के बाद एक पॉप में नहीं सीएसएस, कोई कीफ्रेम नहीं, उन्नत टैब में बस कुछ सेटिंग्स।
इसे अच्छी तरह से उपयोग करें और एक प्रवेश एनीमेशन पृष्ठ के नीचे आंख खींचता है और साइट को पहले स्क्रॉल पर जीवित महसूस करता है इसे हर चीज पर उपयोग करें और यह शोर में बदल जाता है नीचे दिए गए वीडियो में मूल बातें शामिल हैं, और आगे नीचे मैं पूर्ण प्रभाव सूची में आता हूं, एक पूरे अनुभाग में एक एनीमेशन कैसे लागू करें, और समय को सही कैसे प्राप्त करें।
प्रवेश एनीमेशन क्या है?
एक प्रवेश एनीमेशन गति है जो एक तत्व बनाता है क्योंकि यह स्क्रीन पर आता है आगंतुक स्क्रॉल करता है, एक शीर्षक या छवि या बटन व्यूपोर्ट को हिट करता है, और यह फीका, स्लाइड, या पूरे समय वहां बैठे रहने के बजाय जगह में उछाल देता है आप उन्हें देखेंगे प्रवेश प्रभाव, स्क्रॉल एनिमेशन, या एक वेबसाइट प्रविष्टि एनीमेशन कहा जाता है हर बार एक ही विचार: एक स्थिर पृष्ठ जो प्रतिक्रिया करना शुरू कर देता है क्योंकि आप इसे नीचे ले जाते हैं।
आप सीएसएस एनिमेशन के साथ यह सब खुद लिख सकते हैं फिर कीफ्रेम बनाए रखने के लिए आपके हैं, और इसलिए हर स्क्रीन आकार पर उत्तरदायी व्यवहार है मास्टर एडॉन्स एनीमेशन टूलकिट उसे तत्व सेटिंग्स में ले जाता है, इसलिए आप ड्रॉपडाउन से एक प्रभाव चुनते हैं और कोड छोड़ देते हैं।
70+ प्रवेश प्रभावों की एक लाइब्रेरी
७० से अधिक प्रीसेट के साथ, लगभग किसी भी अनुभाग को पेश करने का एक उपयुक्त तरीका है इसे शांत चाहते हैं फीका में ऊर्जा चाहते हैं उछाल या रबड़ बैंड कुछ और जानबूझकर के बाद फ्लिप या स्लाइड यह प्रसार आसान है क्योंकि यह आपको वर्गों को अपने स्वयं के चरित्र देने देता है: एक मिशन वक्तव्य के लिए शांत और चिकनी, सुविधाओं पंक्ति के लिए थोड़ा चंचल।
- फीका: शांत आगमन के लिए फ़ेड इन, फ़ेड इन अप, फ़ेड इन डाउन और बाकी।
- स्लाइड: तत्व बाएँ, दाएँ, ऊपर या नीचे से सरकते हैं।
- बाउंस: एक अनुभाग के लिए बाउंस और रबर बैंड जिसे ध्यान देने की आवश्यकता है।
- घुमाव और फ़्लिपः जब आप थोड़ी गहराई चाहते हैं तो पलटें और घुमाएँ।
- ज़ूम और विशेष प्रभावः ज़ूम इन, लाइट स्पीड, और एक नायक या सीटीए के लिए अन्य स्टैंडआउट।
- कार्य के प्रभाव का मिलान करेंः कार्रवाई के लिए कॉल पर तेज़ आवाज़, बॉडी टेक्स्ट पर नरम फीकापन।
- प्रतिबद्ध होने से पहले पूर्वावलोकनः जब आप सूची में एनीमेशन पर होवर करते हैं तो संपादक उसे चलाता है।
अवधि, विलंब और नियंत्रण में आसानी
समय वह जगह है जहां अधिकांश एनिमेशन जीते या हारे जाते हैं, और यह चालू/बंद टॉगल से अधिक है सेट करें अवधि मिलीसेकंड में एक चाल को त्वरित और तेज़ या धीमा और खींचा-बाहर करने के लिए एक जोड़ें विलंब तो एक बार में सभी के बजाय एक के बाद एक वस्तुओं की एक पंक्ति आती है एक उठाओ आसान बनाना वक्र ताकि गति तेज हो जाए और सपाट, रोबोटिक गति से फिसलने के बजाय वास्तविक वस्तु की तरह धीमी हो जाए।
- गति सेट करेंः ५०० मीटर तेज लगता है, १५०० मीटर आराम महसूस करता है वह एक नंबर पूरे मूड को बदल देता है।
- एक अनुक्रम को डगमगाएंः एक पंक्ति में प्रत्येक आइकन पर एक पायदान ऊपर विलंब को टक्कर दें और वे एक-एक करके पॉप करें।
- सहजता चुनेंः ईज़-आउट (त्वरित शुरुआत, कोमल स्टॉप) अधिकांश प्रवेश द्वारों के लिए प्राकृतिक के रूप में पढ़ता है यह वह है जिसे मैं पहले पहुंचता हूं।
सभी तत्वों के लिए डिफ़ॉल्ट प्रवेश एनीमेशन कैसे सेट करें?
लोग इसे बहुत पूछते हैं: क्या आप एलिमेंटर में एक ही बार में सब कुछ के लिए एक प्रवेश एनीमेशन लागू कर सकते हैं सीधे जवाब, एलिमेंटर कोर में कोई एकल वैश्विक स्विच नहीं है जो साइट पर हर तत्व को एनिमेट करता है व्यवहार में क्या काम करता है कंटेनर या अनुभाग स्तर पर चेतन करना, फिर उन सेटिंग्स का पुन: उपयोग करना।
- का चयन करें अनुभाग या कंटेनर इसके अंदर प्रत्येक विजेट के बजाय खोलें उन्नत → मास्टर एडॉन्स एंट्रेंस एनिमेशन और अपना प्रभाव चुनें पूरे ब्लॉक तब एक साथ आता है क्योंकि यह स्क्रॉल करता है।
- उसी गति का पुन: उपयोग करने के लिए, तत्व पर राइट-क्लिक करें, हिट करें कॉपीफिर शैली चिपकाएँ अगले भाग पर एनीमेशन सेटिंग्स शैली के साथ सवारी करती हैं, इसलिए आप इसे एक बार सेट करें और इसे पृष्ठ के नीचे पेस्ट करें।
- हर चीज़ एक साथ चलने के बजाय एक कैस्केड के लिए, प्रभाव को समान रखें और बढ़ाएँ विलंब नीचे जाते समय प्रत्येक अनुभाग पर थोड़ा सा।
यह आपको कोड को छुए बिना आपके सभी तत्वों में एक सुसंगत प्रवेश एनीमेशन प्रदान करता है, जो कि डिफ़ॉल्ट के उतना ही करीब है जितना एलिमेंटर आपको देता है। भरा हुआ प्रवेश एनिमेशन दस्तावेज़ीकरण हर सेटिंग को कवर करता है।
प्रवेश एनिमेशन सबसे अधिक मदद कहाँ करते हैं?
- हीरो अनुभागः शीर्षक पर एक फीका ऊपर, फिर उसके नीचे बटन पर थोड़ी देरी।
- फ़ीचर पंक्तियाँः आइकनों को डगमगाएं ताकि वे एक-एक करके उतरें।
- आँकड़े और काउंटरः जैसे ही संख्याएँ दृश्य में स्क्रॉल होती हैं, ज़ूम इन करें।
- प्रशंसापत्र और लोगोः एक नरम फीका ताकि वे अचानक स्नैप न करें।
- कार्रवाई के लिए कॉल: उस बिंदु पर एक बाउंस या रबर बैंड जहां कोई निर्णय लेता है।
विस्तार व्यापक के साथ आता है मास्टर ऐडऑन विजेट और एक्सटेंशन. द मूल्य निर्धारण पृष्ठ दिखाता है कि यह किस योजना में उतरता है।
प्रवेश एनीमेशन के लिए अक्सर पूछे जाने वाले प्रश्न
क्या बहुत सारे प्रवेश एनिमेशन मेरी वेबसाइट को धीमा कर देंगे?
दर्जनों एनिमेटेड तत्वों के साथ एक पृष्ठ पर यह कुछ वजन जोड़ सकता है, लेकिन प्रभाव शुरू करने के लिए हल्के होते हैं असली फिक्स संयम है: कुंजी वर्गों और सुर्खियों को चेतन करें, हर पैराग्राफ नहीं कुछ अच्छी तरह से रखे गए मुश्किल से रजिस्टर करते हैं यदि लोड समय आपके दिमाग पर है, तो इन एलिमेंट साइटों को गति देने के लिए युक्तियाँ मदद।
मेरा एलिमेंटर प्रवेश एनीमेशन काम क्यों नहीं कर रहा है?
यह आमतौर पर तीन चीजों में से एक है एनीमेशन केवल पहली बार आग लगाता है जब तत्व व्यूपोर्ट में प्रवेश करता है, इसलिए इसे वापस स्क्रॉल करने के बजाय परीक्षण करने के लिए ताजा नीचे स्क्रॉल करें सुनिश्चित करें कि प्रभाव वास्तविक तत्व पर है और इसके चारों ओर एक खाली रैपर नहीं है और प्रकाशित करने के बाद अपने कैशिंग प्लगइन को साफ़ करें, क्योंकि एक कैश पेज एनीमेशन के बिना पुराने संस्करण की सेवा करेगा।
क्या मैं डेस्कटॉप और मोबाइल पर विभिन्न एनिमेशन का उपयोग कर सकता हूं?
नहीं, आप एलिमेंट में डेस्कटॉप, टैबलेट और मोबाइल के लिए स्वतंत्र रूप से एनीमेशन सेट नहीं कर सकते हैं जो भी प्रभाव आप चुनते हैं वह हर ब्रेकपॉइंट पर लागू होता है, इसलिए एक चुनें जो अभी भी एक छोटी स्क्रीन पर सही दिखता है।
ईज़िंग सेटिंग क्या है और मुझे किसका उपयोग करना चाहिए?
सहजता गति की गति को नियंत्रित करती है रैखिक एक निरंतर गति रखता है और रोबोटिक महसूस कर सकता है आसानी से बाहर जल्दी शुरू होता है और धीमी गति से समाप्त होता है, जैसे कुछ कोमल स्टॉप पर रोलिंग, जो प्राकृतिक महसूस करता है ईज-इन विपरीत करता है अधिकांश प्रवेश एनिमेशन के लिए, ईज-आउट के साथ जाएं।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
पोस्ट/पेज डुप्लीकेटर
