وبلاگ

ساخت سربرگ جذاب در المنتور (افکت اسکرول خلاقانه)

ساخت سربرگ جذاب درالمنتور (افکت اسکرول خلاقانه)

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

در این آموزش ، من به شما نشان می دهم که چگونه با استفاده از GSAP و ScrollTrigger (ویژگی های افزونه ای که نصب می کنیم.) اثر “پنهان و ظاهر شدن هدر با اسکرول صفحه” را در المنتور ایجاد کنید. به افزونه Elementor PRO نیازی نیست! فقط کافیست که ادامه آموزش را همراه ما باشید یا ویدئوی آموزشی را مشاهده کنید.

در این آموزش به پیش نیازهایی احتیاج داریم که در زیر لیست این پیش نیاز ها رو برای شما قرار دادیم تا بتوانید همه این افزونه های مورد نیاز را نصب کنید : 

[irinfobox]در این آموزش ما به هیج افزونه پولی یا پریمیومی احتیاج نداریم و فقط کافیست که افزونه های زیر که رایگان هستند را نصب کنید و ادامه آموزش را مشاهده کنید و لذت ببرید.[/irinfobox]

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

تنظیمات افزونه

بعد از اینکه افزونه “OoohBoi Steroids for Elementor” را نصب کردید در پیشخوان وردپرس گزینه‌ای به نام “Steroids for Elementor” اضافه می‌شود که باید بر روی این گزینه کلیک کنید : 

مدیریت کتابخانه جاوا اسکریپت
مدیریت کتابخانه جاوا اسکریپت

 سپس به تب و زبانه “Manage JS Libraries”  بیاید و در پایین صفحه گزینه های “GSAP” و “GSAP – SCROLL TRIGGER”  را فعال کنید.

فعال کردن افکت های اسکرول
فعال کردن افکت های اسکرول

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

ویرایش سربرگ در المنتور

 حالا باید سکشن یا همان بخش اصلی سربرگ را انتخاب کنید ( یعنی همان بخشی که می خواهیم به صورت افکت اسکرول رو نمایش داده شود ) و سپس به تنظیمات پیشرفته افزونه المنتور مراجعه کنید برای این منظور ما در تصویر زیر همه این مراحل را مرحله بندی کرده ایم که می توانید از تصویر زیر استفاده کنید.

تنظیمات پیشرفته در المنتور
تنظیمات پیشرفته در المنتور

سپس در بخش شناسه css عبارت “irelementor-header”  را وارد کنید. با این کار ما یک آیدی و یا شناسه برای سکشن خود انتخاب کردیم.

 اضافه کردن کدهای مورد نظر

 حالا در این مرحله نوبت به می رسد که بخواهیم کدهایی را که آماده کرده ایم را درون المنتور به صورت سفارشی وارد کنیم. برای این منظور در پیشخوان وردپرس به منوی المنتور » Custom Code یا کدهای سفارشی مراجعه کنید.

اضافه کردن بلوک کد در المنتور
اضافه کردن بلوک کد در المنتور

سپس در صفحه باز شده بر روی دکمه “افزودن کد سفارشی جدید” کلیک کنید.

کپی کردن کد های مورد نیاز
کپی کردن کد های مورد نیاز

حالا همانند تصویر بالا عمل کنید و بعد از کپی کردن کدهای زیر در بخش کدها بر روی دکمه انتشار کلیک کنید، سپس در صفحه به صورت پاپ آپ باز میشود بدون هیچ کار اضافی بر روی دکمه “Save And Close”  کلیک کنید.

ذخیره و بستن بخش کد در المنتور
ذخیره و بستن بخش کد در المنتور

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

<style>
body:not(.elementor-editor-active) #irelementor-header {
	position: fixed;
  	z-index: 999;
  	width: 100%;
}
</style>
<script>
;( function() {

  // wait until gsap & ScrollTrigger available
  let chck_if_gsap_loaded = setInterval( function() {
    
    if( window.gsap && window.ScrollTrigger ) {
      
      // register scrolTrigger
      gsap.registerPlugin( ScrollTrigger );

      // ... do your thing
      show_hide_header();

      // clear interval
      clearInterval( chck_if_gsap_loaded ); 
      
    }
    
  }, 500 );
  
  function show_hide_header() {
  
    const site_header = document.querySelector( "#irelementor-header" );
    
    const show_hide_header = gsap.from( site_header, {
    
    	yPercent: -100, 
      	duration: 0.25, 
      	ease: "sine.out", 
    
    } ).progress( 1 );
    
    ScrollTrigger.create( {
    
    	start: "top top-=" + 100, 
      	onUpdate: ( self ) => {
        
        	if( self.direction === -1 ) show_hide_header.play();
          	else show_hide_header.reverse();
        
        }
    
    } );
  	
  }
  
} )();
</script>

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

? فیلم آموزشی

https://youtu.be/GV1GXuAvRSQ

نتیجه گیری

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

5/5 - (2 امتیاز)
اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

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

در خدمت شما هستیم!

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