Animate image on scroll jQuery in hindi

Animate image on scroll jQuery in hindi

by

मॉडर्न वेब-डिज़ाइन को या frontend को देखने का और काम करने का नज़रिया बदलता जा रहा है और इसी तेज़ी से बदलते समय के साथ अगर कोई डेवलपर नहीं बदलता है तो वह क़तार में धीरे-धीरे पीछे जाता जाएगा, यह बात सिर्फ़ पढ़ कर इसे अनदेखा करने वाली नहीं है क्योंकि यही सच है |

इसलिए मॉडर्न जमाने के साथ चलना और अपने-आप को दिन-प्रतिदिन बेहतर बनाना ही सबसे बड़ी सीख मानी जाती है और यह बात एक महान पुरुष ने कही थी, नाम तो मुझे भी नहीं याद लेकिन बात याद थी तो लिख दी, कोई नी आर्टिकल पर फोकस करते हैं |

चलो मोटिवेशन हो गया तो बढ़ते हैं हम अपने आज के आर्टिकल की तरफ़ और सीखते हैं कि कैसे jQuery की सहायता से आप एक simple लेकिन काफ़ी अच्छा scroll से एनीमेशन बना सकते हैं बिना ज़्यादा टाइम लगाए, बस कॉपी पेस्ट ही है लेकिन कोड समझ लेना ध्यान से |

Animate image on scroll jQuery in hindi

इसके लिए सबसे पहले आपको अपनी HTML की फाइल में body tag close होने से पहले jQuery की लाइब्रेरी add करनी है उसके बाद आप jQuery का code लिख सकते हैं |

मैं jQuery का CDN इस्तेमाल कर रहा हूँ आप चाहें तो latest jQuery CDN दिये गये लिंक से भी उठा सकते हैं |

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

jQuery CDN add करने के बाद आप jQuery का कोड लिख सकते हैं और Animate image on scroll jQuery का कोड आप नीचे देख सकते है. एक बार आप इसे copy करो और अपनी फाइल में add करो और आर्टिकल पढ़ते रहो ताकि पूरा process आपके समझ में आये |

<script>
    const Ko = {
    init() {
      function addDataSectionAttribute() {
        $(".viewport").each(function (index) {
          $(this).attr("data-section", "section" + (index + 1));
        });
      }
  
      function isSectionInViewport(section) {
        // Check if the section is not null before checking its visibility
        if (section) {
          var rect = section.getBoundingClientRect();
          // Check if at least 70% of the section is visible
          return (
            rect.bottom >= 0 &&
            rect.right >= 0 &&
            rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.7 &&
            rect.left <= (window.innerWidth || document.documentElement.clientWidth) * 0.7
          );
        }
        return false;
      }
  
      let handleViewport = () => {
        $(".viewport").each(function () {
          let section = document.querySelector('[data-section="' + $(this).attr("data-section") + '"]');
          if (isSectionInViewport(section)) {
            let delay = parseFloat($(this).attr("data-delay") || 0);
            setTimeout(() => {
              $(this).addClass("in-viewport");
            }, delay * 1000); // Convert seconds to milliseconds
          } else {
            $(this).removeClass("in-viewport");
          }
        });
      };
  
      $(document).ready(function () {
        addDataSectionAttribute();
        window.addEventListener("scroll", handleViewport);
        handleViewport();
      });
    },
  };
  
  Ko.init();
 </script>

jQuery का कोड add करने के बाद आपको अपनी इमेज के बाहर एक div tag या फिर किसी भी टैग में viewport की class add करनी है कुछ इस तरह से..

<div class="viewport">
   <img src="" alt="">
</div>

आप जब यह class add करते हैं तो उसके बाद jQuery अपने आप एक extra class add कर देगी जब user आपकी स्क्रीन के view-port में आएगा और उसके बाद हम उस class को target कर के किसी भी प्रकार की CSS कर सकते हैं जैसे की अगर किसी image पर animation लगाना है तो हम आसानी से class के ज़रिए लगा सकते हैं. CSS आप नीचे देख सकते हैं |

.viewport {
  overflow: hidden;
}
.viewport img {
    transform: scale(1.3);
    transition: all 1.25s ease;
}
.viewport.in-viewport img {
    transform: scale(1);
}

इतना सब करने के बाद आपकी simple दिखने वाली image काफ़ी अच्छी on-scroll animate होकर दिखाई देगी जैसे की इसका result आप नीचे देख सकते हैं |

Leave a Comment