अपने वर्डप्रेस कंटेंट में कूल CSS3 एनिमेशन कैसे जोड़ें

कहानी कहने की कला होमो सेपियन्स के बोलने से बहुत पहले शुरू हो सकती है। यह हमारे साथ विकसित होती है और उपलब्ध उपकरणों के अनुकूल होती है। एक पीढ़ी से दूसरी पीढ़ी तक मौखिक रूप से बताई और पारित की जाने वाली कहानियों ने हस्तलिखित किताबों, मास प्रिंटिंग, डिजिटल वर्ड प्रोसेसिंग, और हाल ही में इंटरनेट से शाब्दिक विकास को अपनाया। मानव विकास के दृष्टिकोण से ऐसा लगता है कि हमने आज हमारे पास उपलब्ध सभी तकनीकों की पूरी क्षमता का दोहन नहीं किया है। जबकि वीडियो पहले ही अपने आभासी विश्व प्रभुत्व अभियान शुरू कर चुके हैं, वेब की अधिकांश सामग्री अभी भी टेक्स्ट में है।

आधुनिक वेब कंटेंट इंटरैक्टिव होना चाहिए और अच्छे पुराने सादे टेक्स्ट के साथ विभिन्न मीडिया को शामिल करना चाहिए। कुछ उपकरण हमारी कहानी को कुछ पायदान ऊपर ले जाने में मदद कर सकते हैं। और यदि आप एक वर्डप्रेस उपयोगकर्ता हैं, तो आप अपने कंटेंट में कूल CSS3 एनिमेशन जोड़ने के लिए Animate It! प्लगइन का उपयोग कर सकते हैं।

संभावनाएं क्या हैं?

HTML5 के साथ, CSS3 आधुनिक वेब डिज़ाइन से संबंधित संक्षिप्त नाम है। संक्षेप में, CSS वह वेब घटक है जो उपयोगकर्ताओं को वेब पेज की उपस्थिति को नियंत्रित करने में सक्षम बनाता है जैसे लेआउट, स्थिति, फॉन्ट, रंग, आदि। इसका नवीनतम अवतार, CSS3, उपयोगकर्ताओं को कोड का उपयोग करके इमेजेस और एनिमेशन बनाने के लिए पर्याप्त स्मार्ट है।

सौभाग्य से, आपको अपने वर्डप्रेस साइट पर CSS3 का उपयोग करने के लिए कोडर होने की आवश्यकता नहीं है। Animate It! प्लगइन आपको एडिटर में एक बटन के क्लिक के साथ पोस्ट्स, विजेट्स, और पेजेस पर CSS3 एनिमेशन लागू करने की अनुमति देता है। इसके अलावा, उपयोगकर्ता ट्रिगर्स को नियंत्रित कर सकते हैं। उदाहरण के लिए, वे स्क्रॉल, क्लिक, और होवर पर एनिमेशन लागू कर सकते हैं, और व्यक्तिगत एनिमेशन ब्लॉक्स पर अलग-अलग स्क्रॉल ऑफसेट जोड़ सकते हैं। प्लगइन ढेर सारी विशेषताओं के साथ भी आता है, जैसे:

• 50+ एंट्री, एग्जिट, और अटेंशन सीकर एनिमेशन
• एक अच्छा एनिमेशन क्रम बनाने के लिए एनिमेशन में डिले फीचर और अवधि नियंत्रण प्रदान करता है
• उपयोगकर्ताओं को एनिमेशन को अनंत या किसी निश्चित संख्या में बार लागू करने की अनुमति देता है
• व्यक्तिगत एनिमेशन ब्लॉक में कस्टम CSS क्लासेस जोड़ने का विकल्प
• स्मार्टफोन्स और टैबलेट्स पर एनिमेशन को सक्षम या अक्षम करने के विकल्प

Animate It! प्लगइन के साथ आप क्या कर सकते हैं? आप अपने लेखों में सरल इंटरएक्टिविटी जोड़ सकते हैं, आकर्षक बिक्री पेज बना सकते हैं, अपनी कथाओं की भावनाओं को गहरा कर सकते हैं, या यदि आप चाहें तो एक शक्तिशाली व्यावसायिक प्रस्तुति भी बना सकते हैं। बस याद रखें कि असीमित एनिमेशन के साथ अपने विज़िटर पर बमबारी करना वफादार पाठक प्राप्त करने का सबसे अच्छा तरीका नहीं है।

Animate It! के साथ शुरुआत करना

प्लगइन को इंस्टॉल और एक्टिवेट करने के बाद, आप "वर्डप्रेस एडिटर" में एनिमेशन जोड़ने के लिए बटन ढूंढ सकते हैं। यह बटन केवल विजुअल मोड में दिखाई देगा, लेकिन यदि आपने कमांड सीख लिए हैं, तो प्लेन टेक्स्ट मोड से कोड डालना संभव है (इस पर बाद में)।

बटन दबाने के बाद, आपको एक विकल्प विंडो मिलेगी। वहां तीन टैब हैं जो आपको एनिमेशन को कस्टमाइज़ करने की अनुमति देते हैं। पहला टैब "एंट्री" (Entry) है। यह वह जगह है जहां स्क्रीन पर कुछ शर्तों पर एनिमेशन जोड़ा जाएगा जो एंटर करेगा। चार ड्रॉप-डाउन विकल्प एनिमेशन प्रभावों को एडजस्ट करने में आपकी मदद करेंगे।

• एनिमेशन वह जगह है जहां आप चुनते हैं कि आप किस तरह का एनिमेशन चाहते हैं।
• डिले (Delay) एनिमेशन शुरू होने से पहले के समय को एडजस्ट करने में आपकी मदद करेगा।
• ड्यूरेशन (Duration) इस बारे में है कि एनिमेशन शुरू से अंत तक कितने समय तक खेला जाएगा। संख्या जितनी अधिक होगी, एनिमेशन उतना ही धीमा होगा।
• टाइमिंग (Timing) एक समय में खेले जाने वाले एनिमेशन का अनुपात है। उदाहरण के लिए, "easeIn" प्रभाव एनिमेशन को शुरुआत में धीमा और अंत की ओर तेज खेलेगा।

आप "Animate It!" बटन का उपयोग करके इसे चलाकर प्रभाव संयोजनों को देख सकते हैं। यदि परिणाम आपकी पसंद का है, तो इसे अपने कंटेंट में उपयोग करने के लिए "इन्सर्ट" (Insert) बटन दबाएं।

"एग्जिट" (Exit) टैब एंट्री के कमोबेश समान है, लेकिन स्क्रीन छोड़ने वाले एनिमेशन को जोड़ने के लिए। दोनों को मिलाकर, आप एक ऑब्जेक्ट जोड़ सकते हैं जो स्क्रीन पर दिखाई देगा और फिर गायब हो जाएगा।

"ऑप्शन्स" (Options) टैब वह जगह है जहां आप एनिमेशन की सामान्य सेटिंग्स को नियंत्रित करते हैं। यहां आप एनिमेशन को लूप पर या केवल एक बार चलाने के लिए सेट कर सकते हैं, एलिमेंट की अंतिम स्थिति को बनाए रख सकते हैं, कस्टम CSS कोड जोड़ सकते हैं, और वह ट्रिगर सेट कर सकते हैं जो एनिमेशन शुरू करेगा। विशेष रूप से ट्रिगर के बारे में - "एनिमेट ऑन" (Animate On) सेटिंग - आप स्क्रॉल चुन सकते हैं, उदाहरण के लिए, और एनिमेशन केवल तभी शुरू होगा जब क्षेत्र पहले से ही स्क्रीन पर दिखाई दे रहा हो।

अपना कंटेंट जोड़ना

"इन्सर्ट" बटन दबाने के बाद, आप अपने कंटेंट क्षेत्र में शॉर्टकोड्स की कुछ लाइनें देखेंगे। ये शॉर्टकोड्स वही हैं जो एनिमेशन को नियंत्रित करेंगे। और चूंकि वे केवल मानों के साथ कोड हैं, आप मैन्युअल रूप से कोड जोड़ सकते हैं यदि आप कोड के साथ अच्छे हैं और चाहते हैं। हालांकि, अन्य लोगों को केवल Animate It! बटन के साथ रहना चाहिए।

आप टेक्स्ट की एक लाइन भी देखेंगे जो कहती है, "कृपया इस क्षेत्र में अपना कंटेंट जोड़ें।" यहां वह जगह है जहां आप उन आइटम्स को जोड़ सकते हैं जिन्हें आप एनिमेट करना चाहते हैं। यह टेक्स्ट, इमेजेस, आइकन, लोगो, ऑडियो, वीडियो, या अन्य शॉर्टकोड्स भी हो सकते हैं। मैंने टाइप्ड Js प्लगइन का उपयोग करके उत्पन्न एक टाइप्ड-इफेक्ट शॉर्टकोड जोड़ने की कोशिश की, और परिणाम बहुत अच्छा है।

अगर Animate It! प्लगइन का उपयोग करने के बारे में मैं एक बात कह सकता हूं, तो वह होगी "एक्सपेरिमेंट!" इसके साथ खेलें और जो परिणाम आप चाहते हैं उसे पाने के लिए विभिन्न संयोजनों को आजमाएं। यह मजेदार है। और यहां वह परिणाम है जो मैंने एक मिनट से भी कम समय में निकाला। मैंने Animate It! प्लगइन को Typed Js प्लगइन के साथ जोड़ा।

क्या आपको लगता है कि आपके वेब कंटेंट में इंटरैक्टिव एलिमेंट्स जोड़ने का समय आ गया है? क्या आप प्लगइन आजमाने की योजना बना रहे हैं? क्या आप एनिमेशन के लिए अलग प्लगइन्स का उपयोग करते हैं? कृपया नीचे कमेंट्स का उपयोग करके शेयर करें।