मैं इस प्रकट प्रभाव को बनाने के लिए वेलोरेंट की चरित्र चयन स्क्रीन से प्रेरित हुआ। चरित्र चित्रों पर क्लिक करें या बातचीत करने के लिए अपनी तीर कुंजियों का उपयोग करें!

जाल

इस प्रभाव को प्राप्त करने के लिए, हम छवि एनिमेशन के लिए AnimeJS और बैकग्राउंड ग्रेडिएंट ट्रांज़िशन के लिए Granim.js का उपयोग करने जा रहे हैं

हम कुल तीन छवियों का उपयोग कर रहे हैं: मुख्य चरित्र पीएनजी कटआउट और दो रंगीन ओवरले संस्करण। इनमें से एक रंगीन कटआउट मुख्य छवि से पीछे रहेगा, और दूसरा थोड़ा आगे की ओर शूट होगा, जिससे हमें यह स्प्रिंगदार प्रभाव मिलेगा। पृष्ठभूमि केवल एक कैनवास तत्व है जिसे ग्रैनिम.जेएस लक्षित करेगा।

शुरू करना

सबसे पहले, हम एक इवेंट श्रोता बनाने जा रहे हैं जो दायां तीर कुंजी दबाने पर हमारे एजेंट की छवि को स्थानांतरित कर देगा:

document.addEventListener("keydown", function (event) {
  if (event.key === "ArrowRight") {
    animationRight();
  }
});

हमारे एनीमेशनराइट() फ़ंक्शन के अंदर, हम अपने एजेंट के तीन-छवि स्टैक कंटेनर को लक्षित करने और इसे दाएं से बाएं:
से स्थानांतरित करने के लिए AnimeJS का उपयोग करने जा रहे हैं।

anime({
        targets: ".agent-container",
        translateX: [
          "250px", // Initial state
          "0px" // Final state
        ],
        easing: "easeOutCubic",
        duration: 250
      });

उसके बाद, हम उस रंग को लक्षित करते हैं जिससे हम पीछे रहना चाहते हैं और उसे चेतन करते हैं। ध्यान रखें कि स्टैक्ड और केंद्रित होने के लिए सभी छवियों में स्थिति: पूर्ण और ट्रांसफॉर्म: ट्रांसलेशनएक्स (-50%) होती है, इसलिए उनका अंतिम ट्रांसलेशनएक्स मान -50% होना चाहिए, 0 नहीं। चूंकि हम से आगे बढ़ रहे हैं। &&&]दाएं से बाएं, इसका मतलब है कि छवि को -50% से बड़े मान पर शुरू करना होगा।

आप सहजता के साथ खिलवाड़ कर सकते हैं, लेकिन मुझे लगता है कि इस पहले ट्रेसर को इधर-उधर उछलने से बचाना सबसे अच्छा है; अन्यथा, एनीमेशन थोड़ा गड़बड़ दिखता है। हम 'रीकॉइल' को बेचने के लिए दूसरे ट्रेसर का उपयोग करेंगे। दोनों उदाहरणों में, हम AnimeJS की अविश्वसनीय स्प्रिंग() ईज़िंग का उपयोग कर रहे हैं, जिससे 'भारी' परिणाम प्राप्त करना आसान हो जाता है।

एनिमे({ लक्ष्य: ".एजेंट-एफबी-बी", अनुवादएक्स: [ "-32%", // प्रारंभिक अवस्था "-50%" // अंतिम स्थिति ], सहजता: "वसंत(1, 100, 40, 0)", अवधि: 100 });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

इसे समाप्त करने के लिए, हम दूसरी छवि के साथ भी यही करते हैं, लेकिन हम इसे उसी स्थिति में आने से पहले मुख्य छवि की तुलना में 'तेज़' बनाते हैं, जिससे इसे 'पुनरावृत्ति' का एहसास होता है:

एनिमे({ लक्ष्य: ".एजेंट-एफबी-एस", अनुवादएक्स: [ "-46%", // प्रारंभिक अवस्था "-50%" // अंतिम स्थिति ], सहजता: "वसंत(1, 100, 10, 20)", अवधि: 150 });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

स्नातक!

Granim.js का उपयोग करके, आप एक साफ़ ग्रेडिएंट बैकग्राउंड सेट कर सकते हैं, और यह ग्रेडिएंट ट्रांज़िशन या किसी भी एनिमेशन को संभाल लेगा जिसे आप अपनी पृष्ठभूमि के लिए उपयोग करना चाहते हैं

var granimInstance = नया ग्रैनिम({ तत्व: '#कैनवास-इंटरैक्टिव', दिशा: 'विकर्ण', राज्य: { "डिफ़ॉल्ट स्थिति": { ग्रेडियेंट: [ ['#B3FFAB', '#12FFF7'], ] }, ... } });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

मूल रूप से आपको केवल अलग-अलग 'राज्यों' को परिभाषित करने की आवश्यकता है और जब आप रंग बदलना चाहते हैं (उदाहरण के लिए एक नया एजेंट चुनते समय) तो आपको बस granimInstance.changeState('new-state'); और बस!