افکت جذاب برای نمایش لوپ محصولات در المنتور
HTML-код
- Опубликовано: 5 фев 2025
- به کمک این آموزش میتونی یاد بگیری که چجوری میتونی به المانهات انیمیشن ورود بدی و حتی میایم و انیمیشن ورود المنتور رو هم تغییر میدیم و شخصی سازیش میکنیم و با nth-of-type توی CSS آشنا میشی.
این آموزش یکی از آموزش های کانال VIP هست که بهت پیشنهاد میکنم حتما داخلش شرکت کنی. ❤️
برای اطلاع از شرایط ثبت نام در کانال VIP همین الان توی اینستاگرام بهم پیام بده.
آدرس پیج اینستاگرام:
/ sina_samiipour
-----------------------------------------------------------------------------
!خوشحال میشم چنل منو سابسکرایب کنی و اگه ویدیوهارو دوست داشتی برای بقیه هم بفرستی
دمتون گرم
/*کد قرار گرفته شده در لوپ محصول*/
selector{
animation-duration: .7s;
animation-timing-function: ease;
animation-fill-mode: both;
}
/*کد قرار گرفته شده در لوپ گرید*/
.animated-loop-grid .e-loop-item{
transform-style: preserve-3d;
perspective: 1000px;
}
.animated-loop-grid .e-loop-item:nth-of-type(4n+1) > div{
animation-delay: 0;
}
.animated-loop-grid .e-loop-item:nth-of-type(4n+2) > div{
animation-delay: .2s;
}
.animated-loop-grid .e-loop-item:nth-of-type(4n+3) > div{
animation-delay: .4s;
}
.animated-loop-grid .e-loop-item:nth-of-type(4n+4) > div{
animation-delay: .6s;
}
@keyframes lightSpeedIn{
from{
opacity:0;
transform: translateX(-20px);
filter: blur(2px) grayscale(1);
}to{
opacity:1;
transform: none;
filter: none;
}
}
زحمت کشیدی سینا
آقا دمت گرم، خیلی خوب بود، یوتیوبت رو ادامه بده.
عالی بود
عالی، ممنون ازت و خسته نباشید. راهی هست که اون All حذف بشه و انتخاب کنیم که فیلتر به صورت دیفالت روی چه آیتمی باشه؟
سلام موفق باشید
یک سوال فروش رفته و هم موجود مجموع علامت خط رنگ قرمز با چی کدنویسی جاوا اسکریپت ؟ لطفاً کد برام بفرستید ممنون میشم من طراحی سایت هستم