دسته بندی مقالات
اخبار داغ ارز‌های دیجیتال
اضافه کردن انیمشن در طراحی سایت
چهارشنبه 29 بهمن 1399
|
8309
افزودن انیمیشن های ظریف در طراحی وب سایت شما راهی عالی برای جذب بازدیدکنندگان محتوای شما است. دقیقاً مانند پاورپوینت یا Keynote، از انیمیشن ها می توان برای جلب توجه بازدیدکنندگان به موارد مهم استفاده کرد.
متأسفانه، برای بیشتر دارندگان وب سایت، اضافه کردن انیمیشن ها به آسانی انتخاب آنها نیست. در این مقاله، شما را از طریق ساده ترین راه ها برای افزودن انیمیشن های محبوب به وب سایت شما راهنمایی خواهیم کرد.
از آنجا که وب سایت ها بر روی سیستم عامل های مختلفی ساخته شده اند که کد را به طرز متفاوتی نمایش می دهند، ما با استفاده از Animate.css جهانی ترین رویکرد را معرفی خواهیم کرد.
انیمیشن های CSS محتوای شما را قادر می سازد تا بصری از یک پیکربندی به سبک دیگر منتقل شود. برای مبتدیانی که فاقد تجربه نوشتن کد هستند، این می تواند بسیار ترسناک باشد.
در اینجا یک مثال ساده وجود دارد که در آن متن با استفاده از HTML و CSS در سراسر صفحه حرکت می کند:
وقتی CSS را می خوانید، می توانید ببینید:
کل مدت انیمیشن 8 ثانیه است (خط 2).
انیمیشن مورد استفاده "slidein" است (خط 3).
انیمیشن در یک حلقه بی نهایت است (خط 4).
"Slidein" از سمت چپ صفحه شروع می شود (سطر 9).
عنوان 300 پیکسل از سمت چپ صفحه است (سطر 12).
در انتهای انیمیشن، متن به سمت چپ صفحه برگشته است (سطر 15).
اگر می خواهید برخی از CSS ها را بنویسید، می توانید مثال بالا را با استفاده از CodePen اصلاح کنید.
هنگام کاوش در انیمیشن های CSS، ده ها ویژگی را کشف خواهید کرد که به شما امکان می دهد انتقال خود را سفارشی کنید تا در طراحی شما یکپارچه عمل کنند.
از طرف دیگر، اگر می خواهید با استفاده از انیمیشن های از پیش ساخته شده در وقت صرفه جویی کنید،از Animate.css استفاده کنید.
در اینجا مثالی از کد نوشته شده توسط Daniel Eden برای انیمیشن "SlideInLeft" موجود در صفحه وجود دارد:
با استفاده از این کتابخانه می توانید از صرف ساعت ها نوشتن و تنظیم دقیق انیمیشن های ساده خودداری کنید.
بهترین قسمت؟
کتابخانه منبع باز و رایگان است!
Animate.css را در صفحه یا الگوهای وب خود پیوند دهید. به عنوان مثال:
مثلا:
حالا می توانید هر یک از ویژگی های موجود در صفحه سبک را تغییر دهید تا با تنظیمات منحصر به فرد خود مطابقت داشته باشد.
اگر می خواهید یک عنصر خاص متفاوت از انیمیشن پیش فرض باشد، می توانید برای تغییر خصوصیاتی مانند مدت زمان، تأخیر یا تعداد دفعات پخش انیمیشن، اصلاح کننده هایی را اضافه کنید:
با دنبال کردن مراحل بالا، می توانید به هر عنصری در هر وب سایتی که به کد منبع دسترسی دارید، انیمیشن اضافه کنید. برای کسب اطلاعات بیشتر در مورد انیمیشن های سفارشی CSS و کارهایی که می توان با Javascript انجام داد، توصیه می کنیم نگاهی به w3schools و GitHub بیندازید.
با این حال، اگر حوصله طراحی وب سایت ندارید، گزینه های ساده تری مانند Artarax وجود دارد که شما اصلاً نیازی به کار با کد ندارید.
اگر نمی خواهید روزها به یادگیری کد و بازی با آن بپردازید، توصیه می کنیم یک طراح وب سایت را امتحان کنید که یک رابط کاربر پسند ارائه می دهد و به شما امکان می دهد بدون نوشتن یک خط کد، ظاهر سایت خود را شخصی سازی کنید.
متأسفانه، برای بیشتر دارندگان وب سایت، اضافه کردن انیمیشن ها به آسانی انتخاب آنها نیست. در این مقاله، شما را از طریق ساده ترین راه ها برای افزودن انیمیشن های محبوب به وب سایت شما راهنمایی خواهیم کرد.
از آنجا که وب سایت ها بر روی سیستم عامل های مختلفی ساخته شده اند که کد را به طرز متفاوتی نمایش می دهند، ما با استفاده از Animate.css جهانی ترین رویکرد را معرفی خواهیم کرد.
انیمیشن های CSS چیست؟
همانطور که ممکن است بدانید، CSS مخفف Cascading Style Sheets است. CSS توسط مرورگرهای وب برای تعیین نحوه نمایش عناصر HTML در صفحه شما استفاده می شود.انیمیشن های CSS محتوای شما را قادر می سازد تا بصری از یک پیکربندی به سبک دیگر منتقل شود. برای مبتدیانی که فاقد تجربه نوشتن کد هستند، این می تواند بسیار ترسناک باشد.
در اینجا یک مثال ساده وجود دارد که در آن متن با استفاده از HTML و CSS در سراسر صفحه حرکت می کند:
} h3
;animation-duration: 8s
;animation-name: slidein
;animation-iteration-count: infinite
{
} @keyframes slidein
} 0%
;margin-left: 0%
{
} 50%
;margin-left: 300px
{
} 100%
;margin-left: 0%
;animation-duration: 8s
;animation-name: slidein
;animation-iteration-count: infinite
{
} @keyframes slidein
} 0%
;margin-left: 0%
{
} 50%
;margin-left: 300px
{
} 100%
;margin-left: 0%
{
{
وقتی CSS را می خوانید، می توانید ببینید:
کل مدت انیمیشن 8 ثانیه است (خط 2).
انیمیشن مورد استفاده "slidein" است (خط 3).
انیمیشن در یک حلقه بی نهایت است (خط 4).
"Slidein" از سمت چپ صفحه شروع می شود (سطر 9).
عنوان 300 پیکسل از سمت چپ صفحه است (سطر 12).
در انتهای انیمیشن، متن به سمت چپ صفحه برگشته است (سطر 15).
اگر می خواهید برخی از CSS ها را بنویسید، می توانید مثال بالا را با استفاده از CodePen اصلاح کنید.
هنگام کاوش در انیمیشن های CSS، ده ها ویژگی را کشف خواهید کرد که به شما امکان می دهد انتقال خود را سفارشی کنید تا در طراحی شما یکپارچه عمل کنند.
از طرف دیگر، اگر می خواهید با استفاده از انیمیشن های از پیش ساخته شده در وقت صرفه جویی کنید،از Animate.css استفاده کنید.
Animate.css چیست؟
Animate.css یک کتابخانه از انیمیشن های CSS است که توسط Daniel Eden ایجاد شده است. از سال 2019، این کتابخانه شامل 77 انیمیشن از پیش ساخته شده است که به شما امکان می دهد به سرعت محتوای وب سایت خود را متحرک کنید.در اینجا مثالی از کد نوشته شده توسط Daniel Eden برای انیمیشن "SlideInLeft" موجود در صفحه وجود دارد:
} @-webkit-keyframes slideInLeft
} from
;-webkit-transform: translate3d(-100%, 0, 0)
;transform: translate3d(-100%, 0, 0)
;visibility: visible
{
} to
;-webkit-transform: translate3d(0, 0, 0)
;transform: translate3d(0, 0, 0)
{
{
} @keyframes slideInLeft
} from
;-webkit-transform: translate3d(-100%, 0, 0)
;transform: translate3d(-100%, 0, 0)
;visibility: visible
{
} to
;-webkit-transform: translate3d(0, 0, 0)
;transform: translate3d(0, 0, 0)
{
{
} from
;-webkit-transform: translate3d(-100%, 0, 0)
;transform: translate3d(-100%, 0, 0)
;visibility: visible
{
} to
;-webkit-transform: translate3d(0, 0, 0)
;transform: translate3d(0, 0, 0)
{
{
} @keyframes slideInLeft
} from
;-webkit-transform: translate3d(-100%, 0, 0)
;transform: translate3d(-100%, 0, 0)
;visibility: visible
{
} to
;-webkit-transform: translate3d(0, 0, 0)
;transform: translate3d(0, 0, 0)
{
{
با استفاده از این کتابخانه می توانید از صرف ساعت ها نوشتن و تنظیم دقیق انیمیشن های ساده خودداری کنید.
بهترین قسمت؟
کتابخانه منبع باز و رایگان است!
نحوه استفاده از Animate.css در توسعه وب
Animate.css را در قسمت فایل منیجر خود نصب یا بارگذاری کنید. این بستگی به سیستم عامل شما دارد. متناوباً، می توانید از نسخه شبکه تحویل محتوا (CDN) برای جلوگیری از بارگذاری پرونده در وب سرور خود استفاده کنید.Animate.css را در صفحه یا الگوهای وب خود پیوند دهید. به عنوان مثال:
<!-- Manually uploaded CSS file. -->
<head>
<link rel="stylesheet" href="animate.min.css">
<head/>
<!-- CDN version of Animate.css -->
<head>
<!-- CDN version of Animate.css -->
<head>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<head/>
نام کلاس مناسب را به عنصر خود اضافه کنید. قبل از نام انیمیشن باید "animated" را وارد کنید. همچنین می توانید کلاس "infinite" را اضافه کنید تا انیمیشن شما به صورت نامحدود حلقه شود.مثلا:
<h1 class="animated infinite bounce delay-2s">Hello!</h1>
حالا می توانید هر یک از ویژگی های موجود در صفحه سبک را تغییر دهید تا با تنظیمات منحصر به فرد خود مطابقت داشته باشد.
اگر می خواهید یک عنصر خاص متفاوت از انیمیشن پیش فرض باشد، می توانید برای تغییر خصوصیاتی مانند مدت زمان، تأخیر یا تعداد دفعات پخش انیمیشن، اصلاح کننده هایی را اضافه کنید:
} .elementNAME
;animation-duration: 3s
;animation-delay: 2s
;animation-iteration-count: infinite
{
و همین!;animation-duration: 3s
;animation-delay: 2s
;animation-iteration-count: infinite
{
با دنبال کردن مراحل بالا، می توانید به هر عنصری در هر وب سایتی که به کد منبع دسترسی دارید، انیمیشن اضافه کنید. برای کسب اطلاعات بیشتر در مورد انیمیشن های سفارشی CSS و کارهایی که می توان با Javascript انجام داد، توصیه می کنیم نگاهی به w3schools و GitHub بیندازید.
با این حال، اگر حوصله طراحی وب سایت ندارید، گزینه های ساده تری مانند Artarax وجود دارد که شما اصلاً نیازی به کار با کد ندارید.
نتیجه گیری
صرف نظر از تجربه شما با CSS، پیروی از دستورالعمل های این مقاله به شما امکان اضافه کردن انیمیشن های خیره کننده به هر وب سایت را می دهد. با این حال، انیمیشن ها تنها یکی از بسیاری از ویژگی های CSS هستند که توسط وب سایت ها به منظور نمایش محتوای خیره کننده استفاده می شود. تقریباً هر عنصر موجود در وب سایت شما به CSS نیاز دارد تا ظاهر مناسبی داشته باشد: متن، پس زمینه، تصاویر، فیلم ها ...اگر نمی خواهید روزها به یادگیری کد و بازی با آن بپردازید، توصیه می کنیم یک طراح وب سایت را امتحان کنید که یک رابط کاربر پسند ارائه می دهد و به شما امکان می دهد بدون نوشتن یک خط کد، ظاهر سایت خود را شخصی سازی کنید.
بازگشت به لیست مقالات
- نظرات کاربران
- ارسال نظر
اولین نظر را شما ثبت نمایید
