স্ক্রোল চালিত অ্যানিমেশন নোটবুক | সিএসএস-ট্রিকস

সিএসএস সহ অ্যাডামের এমন পাগল বিজ্ঞানী। তিনি একসাথে একটি সিরিজ রাখছেন “নোটবুক” এটি তার পক্ষে ডেমো কোড করা সহজ করে তোলে। তিনি একটি জন্য পেয়েছেন গ্রেডিয়েন্ট পাঠ্যএকটি জন্য একটি তুলনা স্লাইডারআরেকটি জন্য চুক্তিএবং তালিকা চলে।

তার সর্বশেষতম একটি হ’ল ক স্ক্রোল-চালিত অ্যানিমেশনগুলির নোটবুক। আপনি আদমের কাছ থেকে যেমন আশা করেছিলেন তেমন তারা হেক হিসাবে চিত্তাকর্ষক। তবে এটি প্রথম কয়েকটি উদাহরণের সরলতা যা আমি সবচেয়ে বেশি পছন্দ করি। এখানে আমি একটি কোডপেনে দুটি প্রভাব পুনরুদ্ধার করছি, যা আপনি সমর্থনের জন্য ক্রোমের সর্বশেষ সংস্করণে দেখতে চান।

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

@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
}

স্ক্রোলিং ট্রিগার করতে আমাদের যা করতে হবে তা হ’ল অ্যানিমেশনটি কল করুন এবং এটি টাইমলাইনে বরাদ্দ করুন:

li {
  animation: var(--animation) linear both;
  animation-timeline: view();
}

কীভাবে অ্যানিমেশনটিতে কোনও সময়কাল সেট করা নেই তা লক্ষ্য করুন। আমরা ডকুমেন্টের টাইমলাইনের পরিবর্তে একটি স্ক্রোল-ভিত্তিক টাইমলাইন নিয়ে কাজ করার দরকার নেই। আমরা ব্যবহার করছি view() পরিবর্তে ফাংশন scroll() ফাংশন, যা জাভসস্ক্রিপ্টের ছেদ পর্যবেক্ষকের মতো ধরণের কাজ করে যেখানে স্ক্রোলিং যেখানে উপাদানটি দেখার মধ্যে আসে এবং স্ক্রোলযোগ্য অঞ্চলকে ছেদ করে তার উপর ভিত্তি করে।

আপনার চোয়াল এবং ooo এবং আহ এবং সমস্ত আদমের ডেমো জুড়ে ফেলে দেওয়া সহজ, বিশেষত তারা আরও উন্নত হওয়ার সাথে সাথে। তবে কেবল মনে রাখবেন যে আমরা এখনও প্লেইন ওল ‘সিএসএস অ্যানিমেশনগুলির সাথে কাজ করছি। পার্থক্য হ’ল তারা যে সময়রেখা চালু রয়েছে।

সরাসরি লিঙ্ক →