স্ট্যাগার অ্যানিমেশন তৈরি করা

স্ট্যাগার অ্যানিমেশন একটি আকর্ষণীয় এফেক্ট প্রদান করে যেখানে একাধিক অর্ডার করা এলিমেন্ট সব একসাথে অ্যানিমেট করার পরিবর্তে প্রতিটির মধ্যে সামান্য বিলম্ব সহ ক্রমানুসারে অ্যানিমেট করে। এই টেকনিকটি প্রায়শই তালিকা, গ্যালারি বা নেভিগেশন মেনুতে ব্যবহার করা হয় যাতে ব্যবহারকারীর দৃষ্টি আকর্ষণ করা যায় এবং ইন্টার‍্যাকশনে একটি পালিশ করা, ছন্দময় অনুভূতি যোগ করা যায়।

sibling-index()-এর মাধ্যমে স্ট্যাগার অ্যানিমেশন

animation-delay প্রপার্টিতে sibling-index() প্রপার্টি ব্যবহার করুন যাতে প্রতিটি এলিমেন্টের অ্যানিমেশন তার প্যারেন্ট এলিমেন্টে তার অবস্থানের অনুপাতে একটি সংখ্যা দ্বারা অফসেট হয়। sibling-index() ফাংশন একটি পূর্ণসংখ্যা রিটার্ন করে, তাই এটিকে সময়ে পরিবর্তন করতে হলে সময়ের ইউনিট দিয়ে গুণ করতে হবে।

#stagger-list > .item {
  --stagger-time: 0.1s;
  /* Define the animation first */
  animation: fade-in 0.4s;
  /* Set the `animation-delay` to a time multiplied by the `sibling-index()` */
  animation-delay: calc(sibling-index() * var(--stagger-time))
}

বাধ্যতামূলক: যেসব ব্যবহারকারী কম মোশন পছন্দ করেন তাদের জন্য অ্যানিমেশন বন্ধ করে ব্যবহারকারীর পছন্দকে সম্মান করুন।

@media (prefers-reduced-motion: reduce){
  /* Disable animation for users who prefer reduced motion. */
  #stagger-list > .item {
    animation: none;
  }
}

ফলব্যাক স্ট্র্যাটেজি

sibling-index()-এর জন্য সহায়তা পরীক্ষা করতে @supports (animation-delay: calc(sibling-index() * 0.1s)){}-এর সাথে CSS অথবা !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')-এর সাথে জাভাস্ক্রিপ্ট ব্যবহার করুন।

পুরনো ব্রাউজারে স্ট্যাগার অ্যানিমেশন সাপোর্ট করতে, প্রতিটি সিবলিং এলিমেন্টে --sibling-index কাস্টম প্রপার্টি যোগ করতে জাভাস্ক্রিপ্ট ব্যবহার করুন। বাধ্যতামূলক: অপ্রয়োজনীয় জাভাস্ক্রিপ্ট চালানো এড়াতে এটি CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') টেস্টে র‍্যাপ করুন।

if(!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')){
  const staggerList = document.getElementById('stagger-list');
  [...staggerList.children].forEach((el, index)=>el.style.setProperty('--sibling-index', index + 1));
}

--sibling-index কাস্টম প্রপার্টি ব্যবহার করে এমন একটি animation-delay ডিক্লারেশন যোগ করুন। এটি অবশ্যই animation-delay ঘোষণার আগে হতে হবে যা sibling-index() ফাংশন ব্যবহার করে। এটি @supports-এ র‍্যাপ করার প্রয়োজন নেই - পুরনো ব্রাউজার দ্বিতীয় ঘোষণা পার্স করবে না এবং প্রথম ঘোষণা ব্যবহার করবে।

#stagger-list > .item {
  animation-delay: calc(var(--sibling-index) * var(--stagger-time));
  animation-delay: calc(sibling-index() * var(--stagger-time));
}