کاربرد انیمیشن برای جذابیت سایت

نوشته شده توسط آیسان مرادیان

آدرس کوتاه: https://sitedar.com/?p=8108

4.5/5 - (18 امتیاز)

شما می توانید با ویژگی انیمیشن وب سایت خود را پویا و جذاب کنید و طراحی منحصر به فردی در وب سایت ایجاد کنید.

برای اکثر عناصر HTML با قابلیت animation در Css، بدون استفاده از جاوا اسکریپت و jquery انیمیشن ایجاد کنید.

ویژگی animation اجازه می دهد که یک عنصر HTML در یک بازه زمانی از یک Style به Style دیگری تغییر کند.

برای استفاده از ویژگی animation ابتدا باید یک Keyframe برای این ویژگی تعریف کنید.

مدت زمان اجرای انیمیشن را به بازه های مختلف تقسیم میکنیم و برای هرکدام Style را مشخص میکنیم

در این مثال زمانی که انیمیشن شروع می شود و زمانی که 100 درصد کامل می شود top صفر اختصاص داده ایم.
برای زمانی که انیمیشن تا 50 درصد تکمیل می شود، Top را 70px را اختصاص می دهیم.

در کد html هم فقط یک div ایجاد میکنیم.
کد های HTML:

<div class=”cat-posts”>
</div>

کدهای Css:

.cat-posts{
padding: 150px 0;
clear: both;
position: relative;
overflow: hidden;
}

@keyframes MoveUpTop{
0%, 100% {
top: 0;
}
50% {
top: 70px;
}
}

سپس ویژگی animations باید هم نام keyframes که تعریف کرده ایم یعنی ” MoveUpTop” نام گذاری شود تا ارتباط بین این دو ویژگی برقرار شود.
مقدار infinite باعث می شود تا به صورت دائمی اجرا شود.
مقدار linear هم باعث می شود از ابتدا تا انتها با یک سرعت مشخص باشد.
کد css:

.cat-posts:before{
content: “”;
position: absolute;
left: 41px;
top: 18px;
background:url(./../../../wp-content/uploads/2021/04/circle-small.png);
background-repeat: no-repeat;
height: 270px;
width: 270px;
animation: MoveUpTop 2.5s linear infinite;
z-index: -1;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
}
اطلاعات تماس
شعبه 1 و آموزشگاه: تهران، سعادت آباد، چهار راه سرو، کوچه آریا، پلاک 4، طبقه 4، واحد 7
شعبه 2: تهران، سعادت آباد، ضلع جنوب غربی چهار راه سرو، پلاک 62، طبقه 5، واحد 12
تلفن ها: 02122083926 - 02122085386 - 02122082258 (9 الی 17 - پنج شنبه تا 13)
ایمیل: info@sitedar.com
اینستاگرام: darkoobwebdesign
افتخارات و مجوزها
  • جزو شرکت های خلاق معاونت علمی
  • عضو سازمان نظام صنفی رایانه ای
  • رتبه ۴ شورای عالی انفورماتیک
  • دارای مجوز آموزشگاه از فنی و حرفه ای
  • دارای مجوز نشر دیجیتال
  • دارای پروانه کانون آگهی و تبلیغاتی
  • پروانه کسب و کارهای مجازی
  • عضو انجمن کسب و کارهای اینترنتی
  • دارای نماد اعتماد الکترونیکی
پشتیبانی 24 ساعته 7 روز