कुंजी तकिए
- स्टॉक एडिटर में एलिमेंटर स्क्रॉल प्रभाव उन्नत > मोशन इफेक्ट्स > स्क्रॉलिंग इफेक्ट्स (वर्टिकल स्क्रॉल, क्षैतिज स्क्रॉल, पारदर्शिता, धुंधला, घुमाएं और स्केल) के तहत छह नियंत्रण हैं, और प्रत्येक एक तत्व को स्थानांतरित करता है।
- स्क्रॉलिंग इफेक्ट्स नियंत्रण एक एलिमेंटर प्रो सुविधा है, और मुफ्त एलिमेंटर 4.3।2 प्लगइन में वे शामिल नहीं हैं।
- इस पृष्ठ पर १६ छवि स्क्रॉल प्रभाव मास्टर एडॉन्स विजेट बिल्डर विजेट हैं जो एक पूर्ण-स्क्रीन चरण को पिन करते हैं और स्क्रॉल स्थिति के खिलाफ छवियों के एक पूरे सेट को एनिमेट करते हैं, जिसमें ३ डी क्यूब, एक पेज-टर्निंग बुक और एक स्टैकिंग कार्ड डेक शामिल है।
- 16 स्क्रॉल विजेट में से प्रत्येक का अपना ज़िप डाउनलोड होता है जिसमें एक JSON फ़ाइल और एक README होता है, और JSON को मास्टर ऐडऑन > विजेट बिल्डर > आयात विजेट के माध्यम से आयात किया जाता है, जो केवल ।json फ़ाइलों को स्वीकार करता है।
- 16 विजेट्स में से प्रत्येक में एक पसंदीदा-कम-गति नियम शामिल है, इसलिए जो विज़िटर अपने ऑपरेटिंग सिस्टम में गति बंद कर देते हैं उन्हें एनीमेशन के बजाय एक स्थिर लेआउट मिलता है।
एलिमेंटर स्क्रॉल प्रभाव, जैसा कि अधिकांश लोग उनसे मिलते हैं, मोशन इफेक्ट्स पैनल में स्क्रॉलिंग इफेक्ट्स नियंत्रण हैं: ऊर्ध्वाधर स्क्रॉल, क्षैतिज स्क्रॉल, पारदर्शिता, धुंधला, घुमाएं और स्केल प्रत्येक एक एकल छवि या शीर्षक को धक्का देता है क्योंकि पृष्ठ चलता है, और यह है कि जहां तक वे एक अनुभाग पिन कर रहे हैं, जबकि एक घन इसके अंदर घूमता है, उनके परे है।
यह पोस्ट १६ छवि स्क्रॉल एनिमेशन दिखाता है जो उस बड़े पैमाने पर काम करते हैं प्रत्येक एक लाइव डेमो के साथ मास्टर एडॉन्स विजेट बिल्डर के लिए तैयार विजेट है जिसे आप कुछ भी स्थापित करने से पहले खोल सकते हैं नीचे आपको प्रत्येक प्रभाव क्या करता है, किस तरह की साइट सूट करती है, सेट कैसे आयात करें, और गति और पहुंच के लिए क्या जांचना है।
विषय-सूची
एलिमेंटर स्क्रॉल प्रभाव अपने आप क्या कर सकते हैं
एलिमेंटर के स्वयं के स्क्रॉलिंग प्रभाव विज़िटर स्क्रॉल के रूप में एक तत्व की एक संपत्ति को बदलते हैं आप एक विजेट या कंटेनर का चयन करते हैं, खुला उन्नत > गति प्रभाव, पर स्विच करें स्क्रॉलिंग प्रभावऔर छह विकल्पों में से चुनें। एलिमेंटर्स मोशन इफेक्ट्स सहायता पृष्ठ उन्हें वर्टिकल स्क्रॉल, क्षैतिज स्क्रॉल, पारदर्शिता, धुंधला, घुमाएं और स्केल के रूप में सूचीबद्ध करता है।
ये नियंत्रण एलिमेंट प्रो से संबंधित हैं हमने मुफ्त एलिमेंट ४.३।२ प्लगइन की जांच की और स्क्रॉलिंग नियंत्रण इसमें नहीं हैं।
एक स्क्रॉलिंग प्रभाव केवल अपने स्वयं के तत्व और व्यूपोर्ट के बारे में जानता है इसके अंदर की सामग्री बदलते समय एक अनुभाग को रखने का कोई तरीका नहीं है, और यह दस छवियों को समन्वयित नहीं कर सकता है ताकि वे क्रम में आ सकें एक नायक छवि पर लंबन इस तरह से स्थापित करना आसान है एक तस्वीर जो पहेली के टुकड़ों में टूट जाती है और फिर से इकट्ठा होती है जैसा कि आप पढ़ते हैं एक कस्टम विजेट की आवश्यकता होती है, जो इस पोस्ट के बाकी हिस्सों को कवर करती है।
यदि आपको केवल सादा लंबन की आवश्यकता है, तो रिलैक्स एक्सटेंशन मास्टर एडॉन्स में इसे संभालता है, और हमारे एनीमेशन अवलोकन प्रवेश और फ्लोटिंग प्रभाव को कवर करता है।
इन विजेट्स को चलाने के लिए आपको क्या चाहिए
आपको एलिमेंटर, मास्टर एडॉन्स और विजेट बिल्डर की आवश्यकता है एलिमेंटर पक्ष पर मुफ्त एलिमेंटर प्लगइन पर्याप्त है, क्योंकि इनमें से कोई भी डिज़ाइन एलिमेंटर प्रो विजेट या इसके मोशन इफेक्ट्स पैनल का उपयोग नहीं करता है।
विजेट आयात और संपादित किए जाते हैं विजेट बिल्डर, जो एक मास्टर एडॉन्स प्रो सुविधा है। योजनाएं चालू हैं मूल्य निर्धारण पृष्ठ। नीचे दिए गए प्रत्येक डिज़ाइन का लाइव डेमो के बगल में अपना स्वयं का डाउनलोड लिंक है, और कोई ईमेल गेट नहीं है।
आप अपनी खुद की छवियां भी चाहेंगे डेमो सार्वजनिक डोमेन और खुले तौर पर लाइसेंस प्राप्त तस्वीरों का उपयोग करते हैं, और प्रत्येक विजेट में छवि फ़ील्ड या पुनरावर्तक होता है, इसलिए उन्हें स्वैप करने में कुछ मिनट लगते हैं।
लाइव डेमो को स्थापित करने की आवश्यकता नहीं है एक खोलें और इसे कुछ विंडो आकारों पर स्क्रॉल करें, जो यह बताने का सबसे तेज़ तरीका है कि गति शैली आपकी सामग्री को फिट करती है या नहीं।
अपना खुद का स्क्रॉल विजेट बनाना चाहते हैं? द मास्टर एडॉन्स विजेट बिल्डर HTML, CSS और JavaScript को अपने स्वयं के सामग्री और शैली नियंत्रण के साथ एक एलिमेंटर विजेट में बदल देता है।
एलिमेंट के लिए 16 छवि स्क्रॉल प्रभाव
१६ छवि स्क्रॉल प्रभाव पांच समूहों में आते हैं: पिन किए गए खुलासा, ३ डी ऑब्जेक्ट, कार्ड डेक, अंतहीन गैलरी, और इंडेक्स या शॉप लेआउट उनमें से अधिकांश एक ही नींव का उपयोग करते हैं विजेट खुद को एक लंबा रनवे देता है, चिपचिपा स्थिति के साथ इसके अंदर एक स्क्रीन स्टेज पिन करता है, और पढ़ता है कि एनीमेशन को चलाने के लिए आपने रनवे के माध्यम से कितनी दूर तक स्क्रॉल किया है वापस ऊपर और सब कुछ रिवर्स में खेलता है।
पिन की गई छवि से पता चलता है
ये चार एक फ्रेम अभी भी पकड़ते हैं और इसके अंदर क्या है बदलते हैं वे लंबे-रूप वाले पृष्ठों के अनुरूप होते हैं जहां प्रत्येक चित्र एक पैराग्राफ के साथ आता है।
1। एपर्चर सूचकांक
प्रत्येक प्रविष्टि एक पतली क्षैतिज बैंड के रूप में शुरू होती है और स्क्रीन के मध्य तक पहुंचने के साथ एक पूर्ण तस्वीर के लिए खुलती है, जिस तरह से एक पत्ती शटर खुलता है शीर्षक छवि पर बैठता है और प्रविष्टियां पृष्ठ के नीचे बाएं और दाएं वैकल्पिक फ्रेम पिन रहती हैं जबकि इसका पाठ अतीत को स्क्रॉल करता है, फिर जाने देता है।
यह एक छवि है जो एक अंधेरे जमीन के साथ स्क्रॉल पर प्रकट होती है, इसलिए यह रात की फोटोग्राफी और काले रंग पर उत्पाद शॉट्स को चापलूसी करता है चार से छह प्रविष्टियां आरामदायक सीमा है।
2. शिंगल फ्रेम
एक फ्रेम दाईं ओर स्थिर रहता है जबकि कॉपी बाईं ओर स्क्रॉल करती है जैसे ही पाठ का प्रत्येक नया ब्लॉक आता है, उसका चित्र उसी फ्रेम के अंदर पिछले एक पर स्लाइड करता है, जैसे छत पर दाद पृष्ठ पृष्ठभूमि हर तस्वीर के साथ रंग बदलती है।
रंग बदलाव पाठक को बताता है कि एक नया अध्याय शुरू हो गया है, इसलिए आप डिवाइडर और उप-शीर्षकों को छोड़ सकते हैं इसका उपयोग केस स्टडीज और फीचर टूर के लिए चार या पांच आइटम के साथ करें जिनमें से प्रत्येक एक पैराग्राफ के लायक है।
3। डोवेटेल अध्याय
प्रत्येक अध्याय इंटरलॉकिंग आरा टुकड़ों में कटौती की गई एक तस्वीर रखता है वे बिखरे हुए और घुमाए जाने लगते हैं स्क्रॉलिंग उन्हें घर तक ले जाती है, और कैप्शन एक बार तस्वीर पूरी होने के बाद दिखाई देता है।
प्रत्येक टुकड़े की स्थिति की गणना स्क्रॉल ऑफसेट से की जाती है, इसलिए एनीमेशन कभी भी पाठक से आगे नहीं चलता है या पीछे नहीं रहता है यह दो से चार बड़ी छवियों के साथ कहानी कहने वाले पृष्ठों के लिए अच्छी तरह से काम करता है मैं चार से आगे नहीं जाऊंगा, क्योंकि चाल पतली हो जाती है।
4. वेफ्ट ग्रिड
अनुभाग पूर्ण खून पर एक तस्वीर पर खुलता है स्क्रॉल करें, और यह तीन-स्तंभ ग्रिड में अपनी जगह में सिकुड़ जाता है जबकि अन्य चित्र इसके चारों ओर उड़ते हैं स्क्रॉल करते रहें और पंक्तियों का हिस्सा एक शीर्षक और एक बटन के लिए जगह बनाने के लिए।
यह एक दुकान या स्टूडियो होम पेज के लिए एक मजबूत नायक है, क्योंकि यह एक बड़े चित्र से पूर्ण संग्रह में एक एकल खंड में कार्रवाई करने के लिए कॉल करने के लिए चलता है स्थिर विकल्पों के लिए, हमारे देखें एलिमेंटर हीरो सेक्शन टेम्पलेट्स.
३ डी स्क्रॉल प्रभाव
ये चार सीएसएस ३ डी ट्रांसफॉर्म और परिप्रेक्ष्य का उपयोग करते हैं, और स्क्रॉल स्थिति उन्हें ड्राइव करती है यदि आप ३ डी चाहते हैं जो टाइमर पर खेलता है या तीर का जवाब देता है, तो हमारे गाइड को एलिमेंटर ३ डी हिंडोला उस तरफ को ढक देता है।
5. पहलू घन
एक घन के छह चेहरों पर छह तस्वीरें बैठती हैं घन स्क्रॉल के प्रति खिंचाव एक चेहरे को बदल देता है जबकि आप जिस तस्वीर का सामना कर रहे हैं वह पूरी पृष्ठभूमि में फैल जाता है दाईं ओर थंबनेल की एक रेल दिखाती है कि आप कहां हैं और आपको किसी भी चेहरे पर कूदने देता है।
छह कठिन सीमा है, क्योंकि एक घन में छह पक्ष होते हैं यह इसे एक छोटे पोर्टफोलियो सेट या छह-उत्पाद रेंज के लिए एक साफ फिट बनाता है।
६ कक्षा ट्यूब
फोटो कार्ड के छल्ले एक ऊर्ध्वाधर अक्ष के चारों ओर खड़े होते हैं, एक ट्यूब बनाने के लिए एक दूसरे के ऊपर एक ढेर होता है आप इसे सिर्फ बाहर से देखते हैं, इसलिए निकट की दीवार स्क्रीन के पार बड़ी गुजरती है और दूर की दीवार अंतराल के माध्यम से छोटे और मंद दिखाती है एक ग्लास ग्लोब डेमो में अक्ष पर बैठता है, और विजेट अन्य केंद्र वस्तुओं की पेशकश करता है, जिसमें एक ओर्ब, एक परमाणु, एक चक्रित ग्रह, एक तार घन, एक छवि या एक आइकन शामिल है।
इसे एक ट्यूब के रूप में पढ़ने के लिए बहुत सारी छवियों की आवश्यकता होती है, इसलिए सोलह या अधिक की दीर्घाओं के बारे में सोचें।
7. आसान रैक
ईज़ल रैक एक स्क्रॉल गैलरी है जो गहराई में खड़ा है प्रत्येक चित्र एक प्लेट है जो आपसे दूर हो जाती है जब तक कि स्क्रॉल इसे स्क्रीन के मध्य के साथ स्तर नहीं लाता है, जहां यह आपके सामने गोल घूमता है कैप्शन प्लेटों के बगल में बैठते हैं और आइटम ज़िगज़ैग बाएं और दाएं।
डेमो एक मिट्टी के बर्तन स्टूडियो के छह चरणों से होकर गुजरता है, और यही इसका प्राकृतिक उपयोग है: प्रक्रिया चरण या सेवाओं की क्रमांकित सूची।
8. क्वायर बुक
एक बंद किताब खुलती है जैसे ही आप स्क्रॉल करते हैं, फिर एक समय में एक पृष्ठ बदल जाता है प्रत्येक शीट दोनों तरफ मुद्रित होती है और रीढ़ पर धुरी होती है, इसलिए आप एक पृष्ठ के पीछे देखते हैं क्योंकि यह ऊपर जाता है ऊपर स्क्रॉल करें और पुस्तक फिर से बंद हो जाती है।
डेमो एक रेस्तरां मेनू है जिसमें बाएं पृष्ठ पर एक तस्वीर और दाईं ओर व्यंजन हैं यह लुकबुक और ब्रोशर भी सूट करता है जावास्क्रिप्ट बंद होने के साथ, पृष्ठ पढ़ने के क्रम में एक सादे कॉलम में वापस आते हैं, इसलिए खोज इंजन या स्क्रीन पाठकों से कुछ भी छिपा नहीं है।
कार्ड डेक
9. रिफ़ल डेक
यह स्क्रॉल पैटर्न पर स्टैकिंग कार्ड है, पोर्ट्रेट कार्ड के साथ किया जाता है प्रत्येक स्क्रॉल चरण एक मामूली कोण पर ढेर के शीर्ष पर अगला कार्ड रखता है पृष्ठभूमि रंग प्रत्येक कार्ड से मेल खाने के लिए बदलता है, और सेट के माध्यम से एक छोटी प्रगति पट्टी गिनती होती है।
पोर्ट्रेट छवियां सबसे अच्छा काम करती हैं: पोस्टर, पुस्तक कवर, पैकेजिंग, ऐप स्क्रीन छह से आठ कार्ड सही के बारे में हैं।
10. डेक तोड़ो
शैटर डेक तस्वीरों का एक पूर्ण-फ्रेम डेक है, प्रत्येक एक कैप्शन और एक बटन के साथ, और उनके माध्यम से स्थानांतरित करने के लिए दो तीर छवियों के बीच चलते हुए चित्र को छोटे टाइल्स के ग्रिड में काट देता है, उन्हें बिखेरता है, और उन्हें अगली तस्वीर के रूप में एक साथ वापस लाता है।
बॉक्स से बाहर आप तीर के साथ इसके माध्यम से ले जाते हैं, एक क्षैतिज खींचें या तीर कुंजी एक बार डेक पर ध्यान केंद्रित किया है पृष्ठ अपने सामान्य ऊर्ध्वाधर स्क्रॉल रखता है पर स्विच करें स्क्रब करने के लिए स्क्रॉल करें नियंत्रण और स्क्रॉल इसके बजाय संक्रमण को चलाता है कम गति सक्षम होने के साथ, टाइलें उड़ना बंद कर देती हैं और डेक क्रॉस-फीका हो जाता है।
अंतहीन स्क्रॉल दीर्घाओं
ये तीन लूप कोई पहली या आखिरी तस्वीर नहीं है, जो पढ़ने से ज्यादा ब्राउज़िंग के अनुरूप है।
11. सैलून हैंग
सैलून हैंग एक दीवार है जिसमें कोई शीर्ष और कोई नीचे नहीं है चित्र एक कॉलम में लटकाते हैं, केंद्र के बाएं और दाएं अलग-अलग मात्रा में धक्का देते हैं और अलग-अलग चौड़ाई में कटौती करते हैं, जिस तरह से सैलून लटका हुआ है वह एक गैलरी दीवार को भीड़ देता है अंतिम चित्र के बाद पहली बार फिर से एक तस्वीर पर क्लिक करें और यह एक कैप्शन और एक बैक बटन के साथ अपने स्वयं के पृष्ठ में बढ़ता है।
फोटोग्राफी पोर्टफोलियो के लिए इसका उपयोग करें जहां ऑर्डर कोई फर्क नहीं पड़ता है और प्रत्येक छवि एक करीब से देखने के लायक है।
12. फिलामेंट धागा
डाक टिकटों के आकार की तस्वीरें एक बंद धागे के साथ पिरोई जाती हैं जो स्क्रीन पर घूमती हैं आप स्क्रॉल करके धागे के साथ यात्रा करते हैं जहां भी यह मंच के बीच से गुजरता है, चित्र एक लूप के नीचे जैसे सूज जाते हैं, और एक कैप्शन नाम सामने खोलने के लिए एक तस्वीर पर क्लिक करें।
यह बड़े अभिलेखागार के लिए सोलह में से सबसे अच्छा है, क्योंकि छोटे थंबनेल का मतलब है कि एक बार में स्क्रीन पर बहुत सारे चित्र फिट होते हैं जावास्क्रिप्ट के बिना विजेट एक सादे ग्रिड में हर तस्वीर दिखाता है।
13. रील पोर्ट्रेट्स
रील पोर्ट्रेट्स एक समय में एक पूर्ण स्क्रीन पोर्ट्रेट दिखाता है, एक लूप पर प्रत्येक एक शब्द सेट को बहुत बड़ा करता है, एक मोड़ ड्रम पर एक वक्र जैसे प्रकार के साथ बग़ल में चल रहा है, एक हस्तलिखित रेखा इसे दूसरे तरीके से पार करती है फोटोग्राफ प्रकार के पीछे एक लंबन बहाव के साथ चलता है, और एक क्रमांकित सूचकांक बाईं ओर कम बैठता है।
यह सोलह का सबसे जोर से डिजाइन है, और यह फैशन और संपादकीय साइटों के अनुरूप है इसे पांच या छह मजबूत चित्र और प्रत्येक को एक शब्द दें।
सूचकांक और दुकान लेआउट
14. धौंकनी सूचकांक
धौंकनी सूचकांक एक समय में एक प्रविष्टि के काम का एक शरीर दिखाता है प्रत्येक में एक बड़ा शीर्षक होता है, एक ही चित्र और एक कैप्शन की दो ओवरलैपिंग प्लेटें होती हैं, और पूरे पृष्ठ में प्रत्येक प्रविष्टि के लिए एक नया रंग होता है शीर्षक एक चर फ़ॉन्ट में सेट होता है, और विजेट अपनी चौड़ाई अक्ष पर स्क्रॉल दबाव लिखता है, इसलिए शब्द फैलता है और व्यवस्थित होता है जैसे आप चलते हैं।
यह चार से आठ प्रविष्टियों के साथ सबसे अच्छा पढ़ता है इसे एक प्रदर्शनी या विशेष रुप से प्रदर्शित परियोजनाओं के एक सेट के लिए आज़माएं।
15. ज्वार सूचकांक
ज्वार सूचकांक में दो कॉलम होते हैं जो एक दूसरे के खिलाफ चलते हैं शीर्षक बाईं ओर चलते हैं और जो लोग उन्हें दाएं नीचे बनाते हैं जैसे ही आप स्क्रॉल करते हैं, प्रत्येक पंक्ति एक लहर पर बग़ल में स्लाइड करती है, बाएं कॉलम एक तरफ और दाएं अपने दर्पण, जबकि वर्तमान पंक्ति के लिए एक तस्वीर उनके बीच बैठती है।
यह एक प्रकार के नेतृत्व में है, एक सहायक भूमिका में छवि के साथ यह क्रेडिट सूचियों और लंबी परियोजना अनुक्रमित सूट करता है।
16. स्वैच शॉप
स्वैच शॉप उत्पाद तस्वीरों का एक गलियारा है जिसे आप स्क्रॉल करके नीचे चलते हैं जब कोई उत्पाद सामने होता है, तो पूरा कमरा अपना रंग लेता है, और इसके बगल में एक कार्ड नाम, एक संक्षिप्त विवरण, मूल्य, आकार विकल्प और एक बटन दिखाता है दाईं ओर रंग बिंदुओं का एक स्तंभ आपकी जगह को चिह्नित करता है।
यह छोटे कैटलॉग के लिए बनाया गया है: फूलवाला, चीनी मिट्टी की चीज़ें, मोमबत्तियाँ, प्रिंट सात उत्पाद डेमो भरते हैं।
सभी १६ स्क्रॉल प्रभाव एक नज़र में
आपके पास मौजूद सामग्री के लिए स्क्रॉल प्रभाव से मेल खाने के लिए इस तालिका का उपयोग करें आइटम की गणना वह है जो लेआउट आराम से संभालता है।
| विजेट | स्क्रॉल प्रभाव | लिए सर्वश्रेष्ठ | आइटम |
|---|---|---|---|
| एपर्चर इंडेक्स | दृश्य में प्रवेश करते ही छवि एक बैंड से खुलती है | डार्क फोटो निबंध | 4 से 6 |
| शिंगल फ्रेम | चित्र एक निश्चित फ्रेम में ओवरलैप होते हैं, पृष्ठ का रंग बदलता है | केस स्टडीज, फीचर टूर | 4 से 5 |
| डोवेटेल अध्याय | आरा टुकड़े इकट्ठा | कहानी के पन्ने | 2 से 4 |
| वेफ्ट ग्रिड | फुल-ब्लीड फोटो तीन-कॉलम ग्रिड बन जाती है | मुख पृष्ठ नायकों | 12 |
| पहलू घन | ३ डी घन प्रति स्क्रॉल कदम एक चेहरा बदल जाता है | लघु पोर्टफोलियो | 6 |
| ऑर्बिट ट्यूब | ताश के छल्ले एक अक्ष के चारों ओर घूमते हैं | बड़ी दीर्घाएँ | 16 या अधिक |
| ईज़ल रैक | पाठक का सामना करने के लिए प्लेटें झूलती हैं | प्रक्रिया कदम | 4 से 8 |
| क्वायर बुक | किताब खुलती है और पन्ने पलटते हैं | मेनू, लुकबुक | 3 से 6 स्प्रेड |
| राइफल डेक | स्क्रॉल पर कार्ड ढेर | पोस्टर, कवर, ऐप स्क्रीन | 6 से 8 |
| शैटर डेक | छवि टाइल्स में टूट जाती है और फिर से बन जाती है | पूर्ण-चौड़ाई स्लाइडर | 3 से 6 |
| सैलून हैंग | लूपिंग दीवार, चित्र एक पृष्ठ में खुलते हैं | फोटोग्राफी पोर्टफोलियो | 10 या अधिक |
| फिलामेंट थ्रेड | थंबनेल एक धागे के साथ यात्रा करते हैं | अभिलेखागार | 20 या अधिक |
| रील पोर्ट्रेट्स | घुमावदार प्रकार के साथ पूर्ण-स्क्रीन चित्र | फैशन, संपादकीय | 5 से 6 |
| धौंकनी सूचकांक | एक समय में एक प्रविष्टि, शीर्षक स्क्रॉल पर प्रतिक्रिया करता है | प्रदर्शनियाँ, संग्रह | 4 से 8 |
| ज्वार सूचकांक | एक लहर पर दो स्तंभ स्लाइड | क्रेडिट, लंबी अनुक्रमणिका | 15 या अधिक |
| स्वैच शॉप | उत्पाद गलियारा, कमरा रंग बदलता है | छोटे कैटलॉग | 5 से 8 |
१६ स्क्रॉल प्रभाव विजेट डाउनलोड करें
प्रत्येक विजेट एक अलग ज़िप है, इसलिए आप केवल उन लोगों को डाउनलोड करते हैं जिन्हें आप उपयोग करने की योजना बनाते हैं प्रत्येक ज़िप में दो फाइलें होती हैं: विजेट का जेएसओएन और एक रीडमी जो इसके नियंत्रण को सूचीबद्ध करता है।
| विजेट | डेमो | ज़िप |
|---|---|---|
| एपर्चर इंडेक्स | लाइव डेमो | डाउनलोड |
| धौंकनी सूचकांक | लाइव डेमो | डाउनलोड |
| डोवेटेल अध्याय | लाइव डेमो | डाउनलोड |
| ईज़ल रैक | लाइव डेमो | डाउनलोड |
| पहलू घन | लाइव डेमो | डाउनलोड |
| फिलामेंट थ्रेड | लाइव डेमो | डाउनलोड |
| ऑर्बिट ट्यूब | लाइव डेमो | डाउनलोड |
| क्वायर बुक | लाइव डेमो | डाउनलोड |
| रील पोर्ट्रेट्स | लाइव डेमो | डाउनलोड |
| राइफल डेक | लाइव डेमो | डाउनलोड |
| सैलून हैंग | लाइव डेमो | डाउनलोड |
| शैटर डेक | लाइव डेमो | डाउनलोड |
| शिंगल फ्रेम | लाइव डेमो | डाउनलोड |
| स्वैच शॉप | लाइव डेमो | डाउनलोड |
| ज्वार सूचकांक | लाइव डेमो | डाउनलोड |
| वेफ्ट ग्रिड | लाइव डेमो | डाउनलोड |
किसी फ़ाइल को आयात करने से पहले उसे अनज़िप करें विजेट बिल्डर आयातक ।json फ़ाइलें पढ़ता है और ज़िप को स्वयं स्वीकार नहीं करेगा।
एलिमेंट में स्क्रॉल विजेट कैसे आयात करें
आप मास्टर एडॉन्स विजेट बिल्डर के माध्यम से प्रत्येक विजेट आयात करते हैं, फिर इसे किसी अन्य एलिमेंटर विजेट की तरह एक पृष्ठ पर खींचें पूरी चीज प्रति डिजाइन लगभग दो मिनट लेती है।
- विजेट डाउनलोड करें जिसे आप चाहते हैं और इसे अनज़िप करें अंदर एक फ़ाइल है जिसे नाम दिया गया है जैसे
widget-facet-cube.json, साथ ही एक रीडमी। - अपने वर्डप्रेस डैशबोर्ड में, पर जाएं मास्टर ऐडऑन > विजेट बिल्डर और क्लिक करें विजेट आयात करें.
- अपलोड क्षेत्र पर एक ।json फ़ाइल खींचें, या क्लिक करें फ़ाइलें ब्राउज़ करें और इसे उठाओ आयातक एक समय में एक फ़ाइल लेता है, इसलिए प्रत्येक डिजाइन के लिए इसे दोहराएं जो आप चाहते हैं।
- एलिमेंटर में कोई भी पृष्ठ खोलें और डिज़ाइन के नाम के लिए विजेट पैनल खोजें, उदाहरण के लिए “फेसिट क्यूबंबेम् इसे पूर्ण-चौड़ाई वाले कंटेनर में खींचें।
- सामग्री टैब में डेमो छवियों और टेक्स्ट को बदलें, फिर स्टाइल टैब में रंग और टाइपोग्राफी सेट करें।
ये फ़ाइलें एलिमेंटर की अपनी फ़ाइलों से नहीं गुजरती हैं टेम्प्लेट > आयात करें स्क्रीन। वह आयातक पृष्ठ और अनुभाग टेम्पलेट्स के लिए है, जिसे हम कवर करते हैं एलिमेंट टेम्पलेट कैसे आयात करेंपिन किए गए विजेट को भी कमरे की आवश्यकता होती है उन्हें बिना पैडिंग के पूरी चौड़ाई में सेट कंटेनर में रखें, या मंच एक संकीर्ण कॉलम के अंदर बैठेगा और तंग दिखेगा।
यह भी पढ़ेः एलिमेंटर में जीएसएपी एनीमेशन कैसे जोड़ें, यदि आप स्क्रैच से अपना स्वयं का स्क्रॉल-ट्रिगर एनीमेशन लिखना चाहते हैं।
छवि स्क्रॉल विजेट बनाम छवि स्क्रॉल प्रभाव
एक छवि स्क्रॉल विजेट और एक छवि स्क्रॉल प्रभाव दो अलग-अलग चीजें हैं, और नाम भ्रम पैदा करते हैं अधिकांश एलिमेंटर एडॉन्स में, “इमेज स्क्रॉल” का मतलब एक निश्चित फ्रेम के अंदर एक लंबा स्क्रीनशॉट है जो स्लाइड करता है जब आप उस पर होवर करते हैं थीम की दुकानें एक छोटे से बॉक्स में एक लंबे पृष्ठ का पूर्वावलोकन करने के लिए इसका उपयोग करती हैं।
एक छवि स्क्रॉल प्रभाव पृष्ठ स्क्रॉल से बंधा एनीमेशन है: छवियां जो विज़िटर के पृष्ठ के नीचे जाने पर प्रकट, ढेर, मोड़ या यात्रा करती हैं इस पोस्ट में सब कुछ दूसरी तरह का है यदि होवर पूर्वावलोकन वह है जो आप आए थे, तो आपको एक ऐडऑन की आवश्यकता है छवि स्क्रॉल विजेट के साथ, क्योंकि इनमें से कोई भी १६ ऐसा नहीं करता है।
एलिमेंटर में स्क्रॉलटेलिंग
स्क्रॉलटेलिंग एक पृष्ठ है जहां स्क्रॉलिंग एक कहानी को आगे बढ़ाती है: एक दृश्य पिन रहता है जबकि इसके बगल में पाठ आगे बढ़ता है, और प्रत्येक चरण में दृश्य बदलता है एलिमेंटर एक चिपचिपा कॉलम के साथ एक मूल संस्करण कर सकता है कठिन हिस्सा दृश्य को ठीक से प्रतिक्रिया दे रहा है जहां पाठक है।
इनमें से तीन विजेट इसके लिए बनाए गए हैं शिंगल फ्रेम प्रत्येक पैराग्राफ को एक तस्वीर के साथ जोड़ता है जो अंतिम को प्रतिस्थापित करता है, डोवेटेल चैप्टर आपके द्वारा पढ़े जाने पर प्रति अध्याय एक तस्वीर को इकट्ठा करता है, और क्वायर बुक हर खंड के लिए एक लंबी कहानी के लिए, उनमें से दो को एक पृष्ठ पर ढेर करें बीच में साधारण पाठ अनुभाग, इसलिए पाठक को गति से आराम मिलता है।
क्या स्क्रॉल प्रभाव आपकी साइट को धीमा कर देते हैं?
स्क्रॉल प्रभाव एक साइट को धीमा कर देते हैं जब वे लापरवाही से बनाए जाते हैं, और सामान्य अपराधी बड़े आकार की छवियां और एनिमेशन होते हैं जो हर फ्रेम पर लेआउट बदलते हैं ये विजेट दूसरी समस्या से बचते हैं वे सीएसएस परिवर्तनों और अस्पष्टता के साथ चेतन करते हैं, जो ब्राउज़र ग्राफिक्स कार्ड को सौंप सकता है, और वे एक इंटरसेक्शनऑब्जर्वर का उपयोग करते हैं यह जानने के लिए कि विजेट स्क्रीन पर कब है।
छवि वजन आप पर निर्भर है, क्योंकि बारह तस्वीरें दिखाने वाला विजेट बारह तस्वीरें लोड करेगा उन्हें वेबपी के रूप में निर्यात करें, उन्हें सबसे बड़े आयाम पर आकार दें, और प्रत्येक को लगभग १५० केबी के नीचे रखें।
एक्सेसिबिलिटी पर, सभी 16 विजेट एक ले जाते हैं prefers-reduced-motion नियम एक आगंतुक जिसने कम गति के लिए अपने डिवाइस से पूछा है, उसे अभी भी लेआउट मिलता है: वेफ्ट ग्रिड अपने समाप्त ग्रिड को उस पर पाठ के साथ दिखाता है, और शैटर डेक क्रॉस-फेड्स शैटर डेक भी एक वास्तविक टैब स्टॉप है, इसलिए तीर कुंजी एक बार फोकस होने के बाद काम करती है और अन्यथा पृष्ठ को अपहरण नहीं करती है।
फोन के लिए, कई डिजाइनों में अपने स्वयं के संकीर्ण स्क्रीन लेआउट शामिल हैं पहलू घन मंच के पैर में एक पंक्ति में अपने थंबनेल रेल को स्थानांतरित करता है, और रील पोर्ट्रेट्स अपने सूचकांक को संख्याओं की एक पंक्ति में बदल देता है फिर भी, विजेट का परीक्षण करें जिसे आप वास्तविक फोन पर चुनते हैं इससे पहले कि आप प्रकाशित करें माउस व्हील के नीचे की तुलना में लंबे पिन किए गए अनुभाग अंगूठे के नीचे लंबे समय तक महसूस करते हैं यदि आपकी साइट गैर-मानक ब्रेकप्वाइंट का उपयोग करती है, तो हमारे गाइड एलिमेंटर ब्रेकप्वाइंट उन्हें कैसे समायोजित करें, बताते हैं।
मैं प्रति पृष्ठ एक पिन किए गए स्क्रॉल प्रभाव का उपयोग करूंगा, अधिकतम दो प्रत्येक पिन किए गए चरण स्क्रॉल दूरी जोड़ते हैं, और एक आगंतुक जिसे उनमें से तीन के माध्यम से एक पंक्ति में स्क्रॉल करना पड़ता है, उसे महसूस होगा।
अक्सर पूछे जाने वाले प्रश्न
क्या एलिमेंटर स्क्रॉलिंग प्रभाव मुक्त हैं?
नहीं उन्नत के तहत स्क्रॉलिंग प्रभाव नियंत्रण> मोशन प्रभाव एलिमेंटर प्रो का हिस्सा हैं, और मुफ्त एलिमेंटर प्लगइन उन्हें शामिल नहीं करता है इस पृष्ठ पर १६ विजेट एलिमेंटर प्रो पर निर्भर नहीं हैं वे मास्टर एडॉन्स प्रो से विजेट बिल्डर के साथ मुफ्त एलिमेंटर पर चलते हैं।
मैं एलिमेंट में स्क्रॉल प्रभाव कैसे जोड़ूं?
एलिमेंटर प्रो के साथ, एक तत्व का चयन करें, उन्नत> मोशन इफेक्ट्स खोलें, स्क्रॉलिंग इफेक्ट्स को चालू करें और वर्टिकल स्क्रॉल, क्षैतिज स्क्रॉल, पारदर्शिता, धुंधला, घुमाएं या स्केल चुनें उन प्रभावों के लिए जो एक अनुभाग को पिन करते हैं या कई छवियों को एक साथ एनिमेट करते हैं, मास्टर एडॉन्स > विजेट बिल्डर > विजेट आयात के माध्यम से तैयार स्क्रॉल विजेट आयात करें।
मेरे एलिमेंटर स्क्रॉल प्रभाव काम क्यों नहीं कर रहे हैं?
सामान्य कारण एक कैशिंग या अनुकूलन प्लगइन है जो जावास्क्रिप्ट को पहली बातचीत तक विलंबित करता है, एक मूल कंटेनर जिसमें ओवरफ्लो छिपा हुआ सेट होता है (जो चिपचिपा स्थिति को तोड़ता है), और विजेट एक बॉक्सिंग कॉलम में बैठा होता है जो बहुत संकीर्ण कैश को साफ़ करता है, कंटेनर को पूरी चौड़ाई में सेट करता है, और अपने माता-पिता से छिपे ओवरफ्लो को हटा दें।
क्या मुझे इन १६ स्क्रॉल विजेट के लिए एलिमेंटर प्रो की आवश्यकता है?
नहीं, उनमें से कोई भी एलिमेंटर प्रो विजेट या मोशन इफेक्ट्स पैनल का उपयोग नहीं करता है, इसलिए मुफ्त एलिमेंटर पर्याप्त है आपको जो चाहिए वह मास्टर एडॉन्स प्रो है, क्योंकि विजेट आयात किए जाते हैं और इसके विजेट बिल्डर में संपादित होते हैं।
स्क्रॉल-ट्रिगर और स्क्रॉल-लिंक्ड एनीमेशन के बीच क्या अंतर है?
एक स्क्रॉल-ट्रिगर एनीमेशन एक बार शुरू होता है जब कोई तत्व स्क्रीन में प्रवेश करता है और फिर अपनी घड़ी पर खेलता है, जैसे कि एक फीका-इन एक स्क्रॉल-लिंक्ड एनीमेशन लगातार स्क्रॉल स्थिति का अनुसरण करता है, इसलिए जब आप रुकते हैं तो यह रुक जाता है और जब आप स्क्रॉल करते हैं तो उलट जाता है यहां १६ प्रभावों में से अधिकांश स्क्रॉल-लिंक्ड हैं।
क्या मैं एक पृष्ठ पर एक से अधिक स्क्रॉल प्रभाव का उपयोग कर सकता हूं?
हां, और प्रत्येक विजेट अपने एनीमेशन को अपने स्वयं के अनुभाग में रखता है अपने आप को प्रति पृष्ठ एक या दो पिन किए गए प्रभावों तक सीमित रखें, उनके बीच सामान्य सामग्री के साथ प्रत्येक पिन किए गए चरण स्क्रॉल दूरी जोड़ते हैं, और एक पंक्ति में बहुत से पृष्ठ को धीमा महसूस करते हैं जब यह तेजी से लोड होता है।
क्या ये स्क्रॉल प्रभाव जीएसएपी या स्क्रॉलट्रिगर के साथ काम करते हैं?
उन्हें या तो ज़रूरत नहीं है प्रत्येक विजेट अपने स्वयं के सीएसएस और जावास्क्रिप्ट को शिप करता है और कोई एनीमेशन लाइब्रेरी लोड नहीं करता है यदि आपकी साइट पहले से ही अन्य वर्गों के लिए जीएसएपी चलाती है, तो दोनों एक ही पृष्ठ पर बैठ सकते हैं, क्योंकि विजेट केवल अपने स्वयं के मार्कअप को छूते हैं।
अंतिम विचार
एलिमेंटर के अंतर्निहित स्क्रॉल प्रभाव आपको एक तत्व को स्थानांतरित करने के छह तरीके देते हैं, और वे एलिमेंटर प्रो में रहते हैं यहां १६ विजेट उस से परे जमीन को कवर करते हैं: चार पिन किए गए खुलासा, चार ३ डी टुकड़े, दो कार्ड डेक, तीन अंतहीन गैलरी और तीन सूचकांक या दुकान लेआउट, प्रत्येक एक लाइव डेमो और एक कम-गति फ़ॉलबैक के साथ।
एक को चुनने के लिए, अपनी छवियों को गिनें और तय करें कि उनका आदेश मायने रखता है या नहीं, फिर ऊपर दी गई तालिका से चुनें आप इनमें से किसी भी डिज़ाइन को बदल सकते हैं, या एक नया निर्माण कर सकते हैं विजेट बिल्डर.
संबंधित पढ़ने
