परिचय

? हैलो डेवलपर्स!

मेरी जीएसएपी यात्रा के दिन 7 में आपका स्वागत है, जहां मैं वेब पर एनिमेशन की अनंत संभावनाओं का पता लगाता हूं। आज, मैंने गतिशील पाठ और घूमने वाले तीरों की विशेषता वाला एक इंटरैक्टिव स्क्रॉल-आधारित मार्की एनीमेशन बनाने की चुनौती ली।

जीएसएपी के शक्तिशाली एनीमेशन टूल के साथ, हम पेज को उपयोगकर्ता की स्क्रॉल दिशा-ऊपर या नीचे-पर निर्बाध गति और रोटेशन के साथ प्रतिक्रिया देंगे। चलो अंदर गोता लगाएँ!

हम क्या बना रहे हैं?️

हमारे एनिमेशन में शामिल होंगे:

• पाठ और छवियों का एक स्क्रॉलिंग मार्की।
• प्रतिक्रियाशील एनिमेशन जो स्क्रॉल दिशा के आधार पर समायोजित होते हैं।
• स्वभाव जोड़ने के लिए तीर घुमाते हुए!

आप यहां लाइव डेमो देख सकते हैं।

HTML संरचना

यहां वह सरल HTML मार्कअप है जिसका मैंने उपयोग किया:

    
    
    
    


    











  
  
  JavaScript Animation with GSAP


Here’s the GSAP-powered JavaScript code that makes the magic happen:



window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});








  
  
  यह कैसे काम करता है ⚙️




इवेंट श्रोता: window.addEventListener("wheel") स्क्रॉल दिशा का पता लगाता है।


जीएसएपी एनिमेशन:



gsap.to() मार्की को एक विशिष्ट दिशा में ले जाता है।

तीरों का घूमना एक गतिशील, इंटरैक्टिव अनुभव जोड़ता है।




अनंत स्क्रॉलिंग: रिपीट का उपयोग करना: -1 सुनिश्चित करता है कि मार्की अंतहीन रूप से लूप करता रहता है।







  
  
  चुनौतियाँ और सीख


? चुनौती: मार्की मूवमेंट के साथ स्क्रॉल दिशा को सिंक्रोनाइज करना मुश्किल था।


? समाधान: जीएसएपी के मजबूत एपीआई ने दोहराव, आसानी और अवधि जैसे गुणों के साथ एनिमेशन को ठीक करना आसान बना दिया।  





  
  
  अंतिम विचार


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

? इसे स्वयं आज़माएं और अपनी रचनाएं साझा करें! 





  
  
  संसाधन




जीएसएपी दस्तावेज़ीकरण


लाइव डेमो


GitHub पर स्रोत कोड