افزودن دکمه بازگشت به بالا به صورت متحرک (Lottie) با المنتور

نسخه جدید المنتور پرو به همراه یک ویجت جذاب برای نمایش انیمیشن های متحرک معرفی شد.

ویجت Lottie که می توانید انیمیشن های با فرمت JSON را در المنتور نمایش دهید.

حالا در این آموزش قصد داریم تا با استفاده از ویجت Lottie، یک دکمه بازگشت به بالا به صورت انیمیشنی طراحی کنیم که در صورت اسکرول به پایین ظاهر شده و با کلیک بر روی آیکون، به سمت بالا اسکرول شود. همچنین این ویجت در بالای صفحه و زمانی که اسکرولی انجام نشده، مخفی باشد.

افزودن دکمه بازگشت به بالا به صورت متحرک (Lottie)

انتخاب نماد انیمیشنی Lottie

ابتدا وارد سایت https://lottiefiles.com شده و از قسمت جستجو، عبارت arrow را سرچ کنید.

برای مثال ما نمونه اول را انتخاب کردیم. می توانید از هر نمونه دلخواه دیگری استفاده کنید. روی نماد کلیک کرده و روی Download JSON کلیک کنید.

قرار دادن دکمه بازگشت به بالا

برای قرار دادن دکمه بازگشت به بالا و نمایش در تمامی صفحات، باید به سربرگ طراحی شده با المنتوربریم.

به بخش قالب های ذخیره شده رفته و ویرایش با المنتور سربرگ را بزنید. در اینجا باید ویجت Lottie را داخل صفحه قرار دهیم. (این ویجت در نسخه 2.10 المنتور پرو اضافه شده است.)

حالا فایل JSON انیمیشن را که قبل تر دانلود کردید داخل ویجت آپلود کنید. گزینه پیوند را روی آدرس سفارشی قرار داده و مقدار # را وارد کنید. حتما همین مقدار قرار بگیره و نه لینک دیگری.

در قسمت پیکربندی، انیمیشن را به صورت حلقه قرار دهید. با این کار انیمیشن به صورت دائم در حال اجرا است.

تنظیمات زیر را به ترتیب از تب پیشرفته ویجت Lottie قرار دهید.

تعیین شناسه CSS

ابتدا مقدار ایندکس Z را روی 50 قرار داده و یک شناسه CSS با عنوان backtotop برای این ویجت قرار دهید:

جایگاه دکمه

برای اینکه جایگاه دکمه بازگشت به بالا را در پایین سمت چپ قرار دهیم، به تب پیشرفته ویجت Lottie رفته و گزینه موقعیت را بزنید.

تظنیمات را طبق تصویر قرار دهید.

مخفی کردن دکمه

در انتها به واکنشگرا رفته و برای هر 3 حالت، ویجت را مخفی کنید.

بعد از اعمال تغییرات، ظاهر ویجت به شکل زیر خواهد بود:

تمامی کار های مربوط به نمایش ویجت در صفحه را انجام دادیم. حالا باید عملکرد افزونه بازگشت به بالا را اجرا کنم.

مخفی کردن دکمه با اسکرول

اضافه کردن کد JS به قالب

افزونه Simple Custom CSS and JS را از مخزن وردپرس نصب کنید.

بعد از نصب و فعال سازی افزونه Simple Custom CSS and JS، از پیشخوان وردپرس، گزینه Add Custom JS را بزنید:

در مرحله بعد، تمامی محتویات را حذف کرده و کد زیر را قرار دهید:

  jQuery(document).ready(function( $ ){ 
    jQuery(window).scroll(function(){ 
        if ($(window).scrollTop() >= 400) { 
            $('#backtotop').fadeIn(); 
        } else { 
            $('#backtotop').fadeOut(); 
        }
    }); 
        $('#backtotop').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 

});

کد قرار داده شده را منتشر کنید و به یکی از صفحات سایت برید. با اسکرول به سمت پایین، دکمه بازگشت به بالا مخفی شده و با اسکرول به سمت بالا، دکمه مخفی می شود.