ساخت انیمیشن بر اساس تایم‌لاین دید

سلام دوستان! امروز می‌خواهیم درباره یک موضوع جالب در دنیای انیمیشن‌های CSS صحبت کنیم. شاید برایتان جالب باشد که بدانید شما می‌توانید از تایم‌لاین دید برای ایجاد انیمیشن‌های جذاب برای المان‌های مختلف استفاده کنید. این مفهوم نسبتا جدید است و امکانات زیادی را برای طراحی‌های خلاقانه و تعاملی به وجود می‌آورد.

با استفاده از این قابلیت، به سادگی می‌توانید انیمیشن‌هایی بسازید که بر اساس مکان و مشاهده کاربر در صفحه فعال یا غیرفعال شوند. فرض کنید می‌خواهید المانی، وقتی کاربر تا حدی از صفحه به پایین اسکرول می‌کند، شروع به حرکت کند؛ این دقیقا همان جایی است که از تایم‌لاین دید استفاده می‌شود.

برای رسیدن به این هدف، باید درک مناسبی از نحوه کارکرد حالت‌های مختلف CSS مثل 'scroll-timeline' داشته باشید. این ویژگی به شما اجازه می دهد تا یک انیمیشن را براساس پوزیشن یا موقعیت پیمایش کاربر در صفحه کنترل کنید.

همچنین، می‌توانید این تکنیک را با ویژگی‌های @keyframes ترکیب کنید تا انیمیشن‌های پیچیده‌تری بسازید. این ترکیب به شما امکان می‌دهد تا برای مثال، تغییرات رنگ یا اندازه‌ها را همزمان با تغییر مکان عناصر در صفحه کنترل کنید.

در ادامه یک نمونه کد ساده از این حالت می‌بینیم که چطور می‌توان با جاوااسکریپت و HTML و CSS به سادگی انیمیشن‌های اسکرولی را پیاده‌سازی کرد و با تایم‌لاین دید ترکیب کرد.

<!-- HTML Code -->
<div class="animate-me">Hello, World!</div>

<!-- CSS -->
@keyframes scrollAnimation {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100px);
    }
}

.animate-me {
    animation: scrollAnimation 1s ease-out forwards;
    animation-timeline: scroll-timeline auto;
    scroll-timeline-name: timeline;
    scroll-timeline-axis: y;
}

/* JavaScript to link the animation with a scrolled timeline */
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.animationPlayState = 'running';
        } else {
            entry.target.style.animationPlayState = 'paused';
        }
    });
});

document.querySelectorAll('.animate-me').forEach(el => observer.observe(el));

توضیح خط به خط کد

<div class="animate-me">Hello, World!</div> - این المانی است که قرار است انیمیشن شود. ما یک کلاس به نام 'animate-me' به آن داده‌ایم تا بتوانیم آن را هدف قرار دهیم.

@keyframes scrollAnimation - اینجا از انیمیشن Keyframe برای تعیین اینکه چطور المان در طول انیمیشن تغییر کند استفاده شده است.

.animate-me - این قانون CSS مربوط به المان‌هایی با کلاس 'animate-me' است تا انیمیشن را اجرا کند.

در قسمت JavaScript، از IntersectionObserver استفاده می‌شود تا بازدید از المان و طبیعتا شروع یا توقف پخش انیمیشن را در نظر بگیرد.