প্রতিক্রিয়াশীল ওয়েবসাইটের জন্য মিডিয়া-নির্ভর জাভাস্ক্রিপ্ট অ্যানিমেশন ঠিক করা

জাভাস্ক্রিপ্ট দিয়ে মিডিয়া ক্যোয়ারির উপর ভিত্তি করে শর্তসাপেক্ষ অ্যানিমেশন পরিচালনা করা

এই সমাধানটি জাভাস্ক্রিপ্ট ব্যবহার করে পর্দার প্রস্থের উপর নির্ভরশীল শর্তসাপেক্ষ অ্যানিমেশন পরিচালনা করে window.matchMedia ফাংশন

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollFunction(); };

function scrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQueryNav.matches) {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  if (mediaQueryCta.matches) {
    // CTA scroll for mobile screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  }
  prevScrollpos = currentScrollPos;
}

বিভিন্ন স্ক্রীন মাপের জন্য পৃথক ইভেন্ট শ্রোতাদের ব্যবহার করে মডুলার পদ্ধতি

এই সংস্করণটি আরও দক্ষ এবং মডুলার কারণ এটি প্রতিটি মিডিয়া প্রশ্নের জন্য বিভিন্ন স্ক্রোল ইভেন্ট শ্রোতাদের ব্যবহার করে৷

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

mediaQueryNav.addEventListener("change", handleNavScroll);
mediaQueryCta.addEventListener("change", handleCtaScroll);

function handleNavScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", navScrollFunction);
  } else {
    window.removeEventListener("scroll", navScrollFunction);
  }
}

function handleCtaScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", ctaScrollFunction);
  } else {
    window.removeEventListener("scroll", ctaScrollFunction);
  }
}

function navScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

function ctaScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-button").style.left = "0.25in";
  } else {
    document.getElementById("header-button").style.left = "-10in";
  }
  prevScrollpos = currentScrollPos;
}

// Initial call to apply the correct event listeners
handleNavScroll(mediaQueryNav);
handleCtaScroll(mediaQueryCta);

মিডিয়া প্রশ্নের জন্য একটি ইউনিফাইড স্ক্রোল হ্যান্ডলারে শর্তসাপেক্ষ যুক্তি প্রয়োগ করা

এই পদ্ধতিটি উভয় অ্যানিমেশন পরিচালনা করতে মিডিয়া প্রশ্নের উপর নির্ভর করে শর্তসাপেক্ষ চেক সহ একটি একক স্ক্রোল ইভেন্ট লিসেনার ব্যবহার করে।

var prevScrollpos = window.pageYOffset;
var mediaQuery = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollHandler(); };

function scrollHandler() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQuery.matches) {
    // CTA scroll for mobile
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  } else {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  prevScrollpos = currentScrollPos;
}

জাভাস্ক্রিপ্ট অ্যানিমেশন এবং মিডিয়া কোয়েরি সম্পর্কে প্রায়শই জিজ্ঞাসিত প্রশ্ন

1. আমি কিভাবে জাভাস্ক্রিপ্টে মিডিয়া প্রশ্ন ব্যবহার করব?
2. জাভাস্ক্রিপ্ট আপনাকে মিডিয়া কোয়েরি প্রয়োগ করতে দেয় window.matchMedia(). আপনি পর্দার প্রস্থের উপর ভিত্তি করে বিভিন্ন স্ক্রিপ্ট চালানোর জন্য এই উপায় ব্যবহার করতে পারেন।
3. আমি কিভাবে পর্দার আকারের উপর ভিত্তি করে অ্যানিমেশন নিয়ন্ত্রণ করব?
4. ব্যবহার করুন window.matchMedia() অ্যানিমেশন নিয়ন্ত্রণ করার জন্য পর্দার প্রস্থ নির্ধারণ করতে। তারপরে, প্রয়োজনে ইভেন্ট শ্রোতাদের যোগ করুন বা সরিয়ে দিন। এটি গ্যারান্টি দেয় যে, স্ক্রিনের আকারের উপর নির্ভর করে, শুধুমাত্র প্রাসঙ্গিক অ্যানিমেশন চলবে।
5. স্ক্রোল অ্যানিমেশন অপ্টিমাইজ করার সেরা উপায় কি?
6. স্ক্রোল ইভেন্টের ভিতরে সম্পাদিত অপারেশনের সংখ্যা হ্রাস করে, window.onscroll স্ক্রোল অ্যানিমেশন অপ্টিমাইজেশানে আরও কার্যকরভাবে ব্যবহার করা যেতে পারে। যখন একটি স্ক্রোল সনাক্ত করা হয়, তখনই প্রয়োজনীয় অ্যানিমেশন লজিক কার্যকর হয়।
7. আমি কিভাবে জাভাস্ক্রিপ্টে একাধিক অ্যানিমেশন পরিচালনা করব?
8. একাধিক অ্যানিমেশনকে বিভিন্ন পরিস্থিতিতে এবং ইভেন্ট শ্রোতাদের মধ্যে ভাগ করে পরিচালনা করা যেতে পারে। এটি দ্বন্দ্বের সম্ভাবনা কমিয়ে দেয় কারণ প্রতিটি অ্যানিমেশন আলাদাভাবে কাজ করে।
9. কি করে prevScrollpos এবং currentScrollPos একটি স্ক্রল অ্যানিমেশন করতে?
10. এই ভেরিয়েবলগুলি ব্যবহারকারী কোথায় স্ক্রল করছে তা নিরীক্ষণ করে। পূর্ববর্তী স্ক্রোল অবস্থান সংরক্ষণ করা হয় prevScrollpos, এবং বর্তমান স্ক্রোল অবস্থান সংরক্ষণ করা হয় currentScrollPos. তাদের তুলনা করে ব্যবহারকারী উপরে বা নিচে স্ক্রোল করছে কিনা তা বলা সম্ভব।

মিডিয়া কোয়েরি ভিত্তিক অ্যানিমেশনের চূড়ান্ত চিন্তাভাবনা

উপসংহারে, একটি প্রতিক্রিয়াশীল ওয়েবসাইট তৈরির জন্য বিভিন্ন ডিভাইসের জন্য জাভাস্ক্রিপ্ট অ্যানিমেশন পরিচালনার প্রয়োজন। ডেভেলপাররা স্ক্রীনের প্রস্থের উপর ভিত্তি করে নির্দিষ্ট অ্যানিমেশনগুলিকে ট্রিগার করে একটি সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারে যেমন সরঞ্জামগুলির ব্যবহারের মাধ্যমে window.matchMedia().

সঠিকভাবে প্রয়োগ করা হলে, ওয়েবসাইটগুলি বিভিন্ন ডিভাইসে তাদের চাক্ষুষ আচরণ এবং কর্মক্ষমতা উন্নত করতে পারে। এটি করার একটি উপায় হল স্ক্রোল অ্যানিমেশনগুলিকে বেছে বেছে প্রয়োগ করা এবং সেগুলিকে আলাদা করা৷ এই পদ্ধতিটি ডেস্কটপ এবং মোবাইল অ্যানিমেশনগুলির মধ্যে নিরবচ্ছিন্ন পরিবর্তনের গ্যারান্টি দেয় এবং স্ক্রিপ্ট সংঘর্ষ প্রতিরোধে সহায়তা করে।