در وبسایت راکت به صورت مکرر در رابطه با ریزتعاملات و نقش آن‌ها در رابط و تجربه کاربری صحبت کرده‌ایم. ریزتعاملات باعث می‌شوند که کاربر به صورت بسیار شگفت‌انگیزی در CTAهای وبسایت و دیگر موارد مربوط شرکت داشته باشد؛ امروز در این پست می‌خواهیم به صورت سریع به شما یاد دهیم که چگونه میشود با استفاده از کتابخانه جاوااسکریپتی micron.js ریزتعاملات را به وبسایت‌تان اضافه نمایید. با استفاده از این کتابخانه می‌توانید انیمیشن‌های نامحسوس و البته زیبایی را بدون نوشتن کدهای مختلف و تنها با استفاده از خاصیت data-attributes به صفحات وب اضافه نمایید. بیاید نگاهی به این کتابخانه بیاندازیم.
نکته: قبل از اینکه شروع به ایجاد ریزتعاملات کنید، سعی نمایید که فلسفه و دلیل استفاده از ریزتعاملات در وبسایت را یاد بگیرید. برای اینکار می‌توانید مطلب «استفاده از متدهای ریزتعاملات در وبسایت» را مطالعه نمایید.
- اولین کاری که باید انجام دهید، این است که کتابخانه جاوااسکریپتی micron.js را دانلود نموده و یا اینکه با استفاده از CDN آن را به کدهای خود اضافه کنید. برای اینکار می‌توانید وبسایت micron.js را مشاهده کنید، در این وبسایت، جدای از لینک‌های دانلود، می‌توانید مواردی که مربوط به پیشنمایش می‌شوند را مشاهده نمایید. اگر می‌خواهید از طریق CDN این کتابخانه را دریافت کنید، می‌توانید از فایل‌های جاوااسکریپت و CSS آن استفاده نمایید. برای اینکار به صورت زیر عمل کنید:
<link href="https://unpkg.com/webkul-micron@1.1.4/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.4/dist/script/micron.min.js" type="text/javascript"></script>
اگر از اپلیکیشن CodePen استفاده می‌کنید، برای اضافه نمودن این منابع می‌توانید از طریق تنظیمات، بخش‌های مربوط به CSS و Javascript عمل نمایید.
- مرحله بعدی اضافه نمودن ریزتعاملات به وبسایت است، حال که منابع را در اختیار داریم پس انجام چنین کاری تنها از طریق کدنویسی انجام میشود. بیایید کار را با یک المان لینک شروع کنیم.
<a href="#" class="demo-button">Default</a>
کلیک کردن روی چنین لینکی هیچ کاری را انجام نمی‌دهد، اما اگر بخواهیم به آن ریزتعاملات اضافه کنیم، نیاز است که یک data-attribute به اسم data-micron را به آن اضافه کنیم، این کار باعث میشود که لینک ما تا حدی جان بگیرد. برای انجام چنین حالتی به صورت زیر عمل کنید:
<a href="#" class="demo-button" data-micron="shake">Default</a>
در اینجا می‌توانیم شاهد مقداری به اسم shake باشیم، این مقدار تنها یکی از مقادیر مربوط به خاصیت ماست، با این حال حالت‌های متفاوت بسیار دیگری نیز وجود دارد که می‌توانیم از آن‌ها استفاده نماییم:
- shake
- fade
- jelly
- bounce
- tada
- groove
- swing
- squeeze
- flicker
- jerk
- blink
- pop
حال می‌توانید روی لینک کلیک کنید و شاهد بازخورد بصری باشید که ما در قالب ریزتعاملات با آن‌ها برخورد می‌کنیم.
- خاصیت data-attribute به ما این اجازه را می‌دهد که فارغ از حالت نمایشی، بتوانیم دوره آن را نیز تعیین کنیم. برای اینکار می‌توانیم از خاصیت data-micron-duration استفاده کنیم:
data-micron-duration="1"
مقداری که به این خاصیت داده میشود براساس ثانیه است، بنابراین در این حالت انیمیشن مربوط به قسمت بالا، در مدت زمان ۱ ثانیه به اجرا در می‌آید.
- حال که با خاصیت‌های مختلف آشنا شدیم، نیاز است که کمی حالت اجرایی را تغییر دهیم، برای مثال می‌توانیم آن‌ها را به صورت روان‌تر و راحت‌تری اجرا کنیم. برای انجام این کار از خاصیت data-micron-timing بهره می‌بریم:
data-micron-timing="linear"
مقادیری که این خاصیت میتواند دریافت کند، مواردی مانند زیر است:
- linear
- ease-in
- ease-out
- ease-in-out
- ممکن است که بخواهید با کلیک روی یک لینک، قسمت دیگری از محتوای وبسایت تغییر کنند یا اینکه ریزتعاملات در یک المان دیگر اجرا شود. برای این ما با استفاده از دو خاصیت این کار را انجام می‌دهیم:
data-micron-bind="true" data-micron-id="target"
در این حالت ما می‌گوییم که عملیات binding برابر با true است و بعد از آن در قسمت target باید id مربوط به آن المانی که قصد اجرای ریزتعاملات روی آن را داریم، نوشته شود.
در پیشنمایش زیر می‌توانید مثال‌های کلی از این موارد را مشاهده کنید. المان آخر که Bound نام دارد به المان زیری متصل است، به همین دلیل المان زیرین متاثر از ریزتعاملات است.
در پایان
کتابخانه Micron.js میتواند کارهای بسیار دیگری را نیز انجام دهد، این موارد تنها بخشی از قابلیت‌های فوق العاده این کتابخانه است. حتما به وبسایت آن مراجعه کنید و مستندات آن را مطالعه نمایید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید