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

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

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

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

برای اکثر عناصر 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;
}

طراحی سایت دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد

دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)

آموزشگاه فنی و حرفه ای طراحی سایت و سئو دارکوب افتتاح شد

دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد