آموزش trig.js: چگونه می توان در پیمایش (AOS آسان شد)

آیا می خواهید با انیمیشن های پیمایش صاف زندگی خود را به وب سایت خود بیاورید؟ به این خوش آمدید آموزش trig.js، جایی که ما نحوه استفاده از این کتابخانه سبک برای ایجاد خیره کننده را کشف خواهیم کرد Animate on Scroll (AOS) اثرات ایده آل برای هر سطح مهارت ، trig.js هنگام ورود عناصر به Viewport ، ایجاد انیمیشن ها را آسان می کند. بیایید درست پرش کنیم! 🎉

trig.js چیست؟

trig.js یک کتابخانه JavaScript است که به منظور ایجاد انیمیشن های CSS Scroll بدون زحمت طراحی شده است. با trig.js ، می توانید:

• انیمیشن های ماشه هنگامی که عناصر به سمت مشاهده می شوند. 🎯
• استفاده کردن انیمیشن های از پیش تعریف شده، مانند trig-fade، یا ساخت انیمیشن های سفارشیبشر ✨
• اضافه کردن اثرات پیمایش پویا استفاده از متغیرهای CSS برای امکانات خلاقانه بی پایان. 💡

📌 آن را در GitHub بررسی کنید: مخزن trig.js

📚 مشاهده مستندات: Docs Trig.js

🛠 شروع با Trig.js

1. Trig.js را به پروژه خود اضافه کنید

با استفاده از این پیوندهای CDN ، هر دو پرونده JavaScript و CSS را در پروژه خود قرار دهید:

 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
"https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">

2. فعال کردن Trig.js

می توانید Trig.js را توسط:

1. اضافه کردن data-trig ویژگی ، یا
2. استفاده از enable-trig کلاس به عناصر HTML خود.

مثال:

 class="enable-trig trig-fade">
  Hello, I fade on scroll! 🎉

پس از فعال شدن ، trig.js به طور خودکار اضافه می کند trig کلاس به عناصر هنگام ورود به Viewport ، باعث ایجاد انیمیشن های خود می شود.

animes انیمیشن های از پیش تعریف شده با trig.js

در trig-animations.css پرونده های از پیش تعریف شده مانند trig-fadeبشر به سادگی کلاس را به عنصر HTML خود اضافه کنید تا از این انیمیشن ها استفاده کنید.

مثال:

 class="enable-trig trig-fade">
  Watch me fade in! ✨

📚 دریابید که چه انیمیشن هایی را می توانید در اسناد اضافه کنید: مستندات trig-animations.css

an انیمیشن های سفارشی با trig.js

کنترل بیشتری می خواهید؟ Trig.js را با انیمیشن های CSS سفارشی خود ترکیب کنید. در اینجا یک مثال آورده شده است:

HTML:

 class="fadeIn" data-trig>

CSS:

.fadeIn { 
  opacity: 0; 
}

.fadeIn.trig { 
  animation: fadeIn 1s normal forwards ease-in-out; 
}

@keyframes fadeIn { 
  0% { opacity: 0; } 
  100% { opacity: 1; } 
}

در این مثال ، fadeIn انیمیشن از زمانی شروع می شود trig کلاس اضافه می شود.

⚡ اثرات پیمایش پویا با متغیرهای CSS

Trig.JS با محاسبه دید یک عنصر در نمای و تولید متغیرهای CSS برای جلوه های صاف و پیمایش ، از انیمیشن های پویا پشتیبانی می کند.

مثال:

 class="element" data-trig data-trig-var="true">

CSS:

.element {
  transform: translateX(var(--trig));
}

متغیرهای موجود:

• --trig: درصد
• --trig-reverse: درصد معکوس
• --trig-px: پیکسل
• --trig-px-reverse: پیکسل های معکوس
• --trig-deg: درجه
• --trig-deg-reverse: درجه های معکوس

این متغیرها در را به دنیایی از انیمیشن های پویا و محور محور متناسب با دید شما باز می کنند. برای فعال کردن این متغیرهای CSS ، ویژگی های داده data-trig-var="true"با data-trig-pixels="true" یا data-trig-degrees="true" برای هر متغیر CSS مربوطه و متغیر CSS معکوس باید به عنصر اضافه شود.

🎉 نتیجه گیری: Animate Your Animate on Scroll Adventure آغاز می شود!

با Trig.js ، ایجاد انیمیشن های مبتنی بر پیمایش هرگز ساده تر نبوده است. آیا شما یک توسعه دهنده هستید که به دنبال یک است به آموزش یا با هدف تسلط تحریک در پیمایش اثرات ، این آموزش trig.js شما را در مسیر درست قرار می دهد.

💬 سوال؟ ایده های عالی انیمیشن؟ نظر زیر را رها کنید! بیایید وب را با هم تحریک کنیم! 🚀