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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
دکمه بازگشت به بالا المنتور
پخش ویدیو

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

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

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

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

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

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

سایت دانلود lottie

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

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

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

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

ویجت Lottie المنتور

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

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

قرار دادن انیمیشن Lottie در المنتور

تنظیمات زیر را به ترتیب از تب پیشرفته ویجت 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; 
    }); 

});

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

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
متوسط

035-essay

زمان آموزش :
5 دقیقه

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات دیجیتال

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=54356

فهرست مطالب

mahdi
mahdi در 00:43

بخواهم با سرعت کم بالا برود چیکار باید بکنم

پاسخ
Avatar
Ahamd در 00:11

سلام
تو بیشتر گوشی ها یه دکمه پیشفرض برای رقتن به بالا هست.
راهی هست که اون دکمه رو وقتی که سایت ما بود میشه غیر فعال کنیم؟

پاسخ
المنتور فارسی
المنتور فارسی در 18:06

با سلام
اگر این دکمه را مرورگر موبایل اضافه می کند، از سمت سایت نمیشه غیر فعال کرد.

پاسخ
Avatar
ali rajabloo در 16:31

سلام . من تو سایت که گفتین زدم arrow هیچی نیاورد . راهبرد دیگه ای نداره؟

پاسخ
المنتور فارسی
المنتور فارسی در 16:35

با سلام
در آموزش های گذشته هم اعلام شد که این سایت با IP ایران مشکل دارد و فایل ها قابل مشاهده نیست. می تونید از نرم افزار های تغییر IP استفاده کنید.

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید