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

پخش ویدیو
4.6/5 - (22 امتیاز)

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

ویجت 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; 
    }); 

});

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

42 پاسخ

  1. با سلام و عرض ادب
    من این کار روی متن ساده (برو بالا ) انجام دادم ولی هر کاری میکنم متن(برو بالا ) در بالای صفحه مخفی نمیشه مگر اینکه در حالت اسکرول شفافیت را تنظیم کنم، ولی وقتی کد را وارد میکنم طبق دستورتون کد اجرا نمیشه و کلمه (برو بالا ) مخفی نمیشه
    بنظرتون باید چیکار کنم از طریق lottio نمیخام ولی از طریق متن (برو بالا ) میخام مخفی بشه
    ممنونم از راهنماییتون
    باتشکر

    1. با سلام
      ویجت مهم نیست چی باشه، مهم کلاس های CSS و کد ها هست که باید دقیقا عین آموزش باشد.

  2. دمتون گرم
    عااالی بود
    لذت بردم

    من توی سایت lottie دکمه رو متناسب با تم سایت شخصی سازی کردم

  3. سلام و ممنون از آموزشتون…من میخواماین دکمه رو در موبایل نمایش نده…. میشه راه نمایی به فرمایید؟

  4. سلام ممنونم بابت اموزش خوبتون

    فقط من یه چیزی میخوام . میخوام برعکس عمل کند اول ظاهر باید در حین اسکرول مخفی شود

    ایا امکانش هست

    1. با سلام
      با تغییر کد مربوطه امکان طراحی حالت های مختلف را دارید.

  5. ضمن عرض سلام و ادب بنده
    بنده وقتی فایل json رو بارگذاری می کنم پیغم میده( یک پاسخ غیرمنتظره از سرور دریافت شد. پرونده با موفقیت بارگذاری شده است. کتابخانهٔ رسانه را بررسی یا برگه را نوسازی نمایید.) ایا برای بارگذاری این فایل باید مثل بارگذاری svg که خطا میده و باید از افزونه یا کد استفاده کرد کاری انجام بدم؟؟؟ باسپاس

    1. با سلام
      به دلایل امنیتی ممکن است هاست شما از فایل های Json پشتیبانی نکند. این مورد را می توانید از طریق هاستینگ پیگیری کنید.

  6. سلام.من پوسته the7 روی سایتم دارم.این دکمه خودکار فعال هست.میشه راهنمایی کنید چطور می تونم حذفش کنم؟

    1. با سلام
      باید از طراح قالب سوال کنید. ممکن است از تنظیمات قابل حذف باشد.

  7. سلام و عرض ادب.
    ولی فکر کنم آموزشتون اشتباهه و خیلی ساده تر از اینا میشه توی المنتور دکمه بازگشت به بالا گذاشت. اصلا لازم نیست نمایش دسکتاپ و تبلت و موبایل رو مخفی کنید بعدش افزونه نصب کنید و اسکریپت js خارجی بزارید و…
    روی دکمه از بخش پیشرفته > موشن افکت، گزینه “شفافیت” برای همین موضوعه.
    مسیر حرکت رو روی fade In گذاشته و سطح رو روی 10 میگذارید.
    توی بخش موشن افکت، گزینه “تاثیر مرتبط با” رو هم روی viewport قرار میدید. به همین سادگی.

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

    امیدوارم این آموزش رو تغییر بدید.

    با تشکر

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

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

  8. تمامی مراحل به درستی انجام دادم اما

    فایل json در المنتور نشون میده اما در خود قالب نشون نمیده چرا ؟؟

  9. نیاز هست لطفا من الان میخواهم کاربر به پایین انتقال پیدا کنه لطفا ) ایا روشی دیگری هم هست

      1. من الان در ویرایش کد هستم همه را درست کردم یک شناسه زدم درست شده ولی اسکرول Top را میزنم اسکرول Down کار نمیکند ؟

  10. سلام میخواهم برعکس انجام شود به جایی که بره بالا برود پایین ؟

  11. سلام، خیلی ممنون از آموزش هایی که روی سایت می ذارین
    من با استفاده از افزونه steacky header، منوی سایتم رو مخفی کردم. ظاهرا تداخلی بین کدهای steacky header و این آموزشی که گذاشتید وجود داره. چون وقتی اسکرول می کنم منوی سایت رو به هم میریزه.
    ممنون میشم راهنمایی بفرمایید.

  12. سلام
    من فایل json رو دانلود کردم ولی بعد از آپلود نمایش داده نمیشه
    ولی با لینک خارجی مشکلی نداره

    1. با سلام
      ممکنه محدودیتی از سمت هاست اعمال شده باشد تا فایل json را نشان نمی دهد.

  13. سلام ممنون به خاطر مقاله خوبتون یه سوال داشتم من باید چیکار کنم که این دکمه بازگشت به بالا فقط توی کامپیوتر به کاربر نمایش داده بشه و توی دستگاه های دیگه نشون نده آخه توی آموزش ما کلا از طریق المنتور مخفیشون میکنیم

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *