در این ویدیو آموزش ساخت انیمیشن با المنتور به صورت رایگان گفته شده است با این روش شما می تتوانید با استفاده از کد های سفارشی CSS طرح هایی حرفه ای و زیبا پیاده سازی کنید در ادامه قصد دارم در مورد قسمت هایی از المنتور که در همین آموزش هم مشاهده کردید بیشتر صحبت کنم قبل از آن کد های به کار رفته در آموزش را برای استفاده راحت تر شما در قسمت پایین قرار داده شده است.
کد های Css برای ساخت هاور انیمیشن
selector:hover .img1{
transform-origin: center left;
}
selector:hover .img2 {
transform-origin: center right;
}
selector:hover .img3 {
transform-origin: center top;
}
selector .elementor-widget-image{
transition: ease 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(1.2);
}انیمیشن شناور یا هاور انیمیشن
قطعا بارها در وبسایت های مختلف این مورد را مشاهده کرده اید که اگر نشانه گر موس را روی قسمت خاصی از صفحه سایت هاور کنید افکت یا حرکت خاصی در آن قسمت روخ می دهد.
این نوع از انیمیشن ها بسیار ساده و در عین حال جذاب هستیند چرا که باعث ارتباط و القای حس خوب به کاربر می شوند. حسی که باعث ثبت شما و وب سایت شما در قیمت از ذهن کاربرتان می شود.
ولی متاسفانه این نوع انیمیشن تنها در حالت دسکتاپ به خوبی اجرا می شوند و در حالت های تبلت و موبایل نقشی به پر رنگی حالت دسکتاپ ندارند.
علت استقاده انیمیشن ها در سایت
وبسایت های امروزی بر خلاف قدیم پیشرفت قابل توجهی چه در ظاهر و چه از نظر زیر ساختی داشته اند. بسیاری از فاکتور های طراحی سایت در سال های اخیر به کلی تغییر کرده است. موضوعی که همواره در طول زمان غیر قابل انکار است، اهمیت بسیار بالای پیاده سازی ظاهر وب سایت ها می باشد. اگر شما یک وب ابر وبسایت داشته باشید که خدماتی خارق العاده را اراده کنید ولی ظاهر مناسبی نداشته باشد عموم مردم با وب سایت شما ارتباط بر قرار نمی کنند. اگر بخوام در یک جمله اهمیت ظاهر وب سایت را بازگو کنم باید بگویم:
ظاهر، شکل و نما بیرونی، مبنای اصلی قضاوت دیگران در مورد هر چیزی است
با قاطعیت می توانن گفت متاسفانه یا خوشبختانه در 90 درصد مواقع قضاوت بر اساس ظاهر انجام می شود. پس با استفاده از انیمیشن ها و مواردی مثل افکت ها شما می توانید یک وب سایت جذاب داشته باشید. این بدیهی است که اولین چیزی که کاربر را برای شما به یک مشتری تبدیل می کند همین ظاهر مرتب و جذاب وب سایت می باشد. پس باید به موضوعاتی مقل انیمیشن ها توجه ویژه ای داشت.
در ساخت انیمیشن با المنتور دقت کنید
یکی از عواملی که همواره باید به آن توجه کنید سرعت لود وب سایت می باشد. اگر سرعت لود اولیه وب سایت شما مناسب نباشد درست مثل این است که دو مشت محکم را به وب سایت و کسب و کار خود زده باشد:
- امتیاز منفی ربات گوگل به علت سرعت لود پایین
- ایجاد تجربه کاربری نا مناسب برای کاربران و مشتریان خود
انیمیشن ها می توانند به صورت مستقیم با این موضوع در ارتباط باشند. باید همواره دقت کنید که در صفحات وب سایت خود از انیمیشن ها و مواردی که باعث سنگینی وب سایت می شوند مثل عکس های حجیم کمتر استفاده شود.
شما هموارده باید یک تعادل نسبی برای استفاده از این موراد در وب سایت خود داشته باشید.
یک توصیه
اگر در وب سایت خود شاهد کندی و لود بالای صفحات هستید منطقی ترین راهکار این است که به صورت ریشه ای مشکل را حل کنید: اما اگر به هر دلیلی سنگین شدن بعضی از صفحات سایت، حال به هر دلیلی اجتناب ناپذیر است، جدای از بحث فنی و ساختار و اصول سئو می توانید برای تجربه کاربری بهتر از انیمیشن ها و لودینگ های مناسبی استفاده کنید درست مثل انیمیشن زیر:
سخن آخر
این آموزشی که مشاهده کردید از دسته آموزش های کوتاه و تک قسمتی تهیه شده توسط تیم پنوم می باشد. اگر می خوهید تمام این موارد و نکات را به شکل اصولی یاد بگیرید. و برای کسب و کار خود یک وب سایت حرفه ای طراحی کنید می توانید از پکیج آموزش طراحی سایت با وردپرس استفاده کنید.