ساخت افکت اسکرول لوکوموتیو در المنتور!
در این بخش از سری آموزش های کد المنتور می خواهیم تا یک افکت بسیار بسیار خلاقانه و جذاب با نام افکت لوکوموتیو به محتوای صفحه خود در المنتور بدهیم. این افکت یک جلوه بسیار زیبا و جذاب است که با استفاده از کدهای آماده می خواهیم تا این افکت اسکرول در المنتور را با همدیگر طراحی کنیم. پس حتما در ادامه مقاله همراه ما باشید.
دقت داشته باشید که این جلوه در حالت پیش فرض در المنتور وجود ندارد و ما برای همین از کدهای آماده می‌خواهیم استفاده بکنیم. یک نکته بسیار مهمی است که اصلاً لازم نیست که شما حتی یک کلمه کدنویسی انجام بدید چون همه کدها به صورت آماده در مقاله گنجانده شده و فقط کافیه مانند مقاله و ویدئو کدهای آماده را با موس کپی کنید و در جای مورد نظر قرار دهید.
آموزش ساخت افکت اسکرول لوکوموتیو در المنتور!
در این آموزش شما نیاز نیست که افزونه های پریمیوم نصب کنید چون همه افزونه های به صورت رایگان موجود هستند. اما برای شروع ما به افزونه هایی نیاز داریم که در زیر این افزونه ها را براتون قرار دادم که می تونید هم از پیشخوان وردپرس نصب کنید و هم می توانید از لینکهای زیر دانلود کنید و نصب کنید.
افزونه های مورد نیاز
کلا برای این کار ما به ۲ افزونه نیاز داریم که در زیر این دو افزونه را برای شما قرار دادم :
بعد از اینکه افزونه های بالا را نصب کردید، ادامه مقاله را دنبال کنید تا بتوانید این جلوه جذاب را به المنتور اضافه کنیم. (می توانید از دوره آموزش المنتور هم دیدن کنید.)
ویرایش صفحه مورد نظر با المنتور
در این بخش باید صفحه ای را که می خواید این افکت در آن صفحه اجرا شود را با ویرایشگر المنتور باز کنید. من به صورت پیشفرض یک صفحه از قبل با افزونه المنتور طراحی کردم و می خواهم که کلیه این افکت ها بر روی این صفحه اجرا شود.
تنظیمات افزونه
اینجا باید تنظیماتی را برای افزونه انجام دهیم که وقتی شما افزونه های مورد نیاز را نصب می کنید، در پیشخوان وردپرس گزینه ای با نام Steroids for Elementor به آخرین منوی وردپرس اضافه می شود. برای رفتن به تنظیمات ابتدا به مسیر “پیشخوان وردپرس > Steroids for Elementor” بروید.
در صفحه باز شده تب “Manage JS Libraries” را انتخاب کنید تا گزینه های افزونه باز شود.
سپس گزینه هایی که در تصویر بالا نمایش داده شده است را فعال کنید و سپس در آخر بر روی دکمه “Save Changes” کلیک کنید.
سپس به به بالای همین زبانه بیاید و همانند تصویر زیر این بخش را تنظیم کنید.
کار تنظیمات افزونه به پایان رسید و در ادامه می خواهیم تا کدهایی که آماده کردیم را در المنتور قرار دهیم و افکت خودمون رو طراحی کنیم.
اضافه کردن کدهای آماده
در این مرحله باید کدهایی را که برای شما آماده کردم را در افزار المنتور وارد کنید برای این کار به مسیر “المنتور > Custom Code” بروید.
سپس بر روی دکمه “افزودن کد سفارشی جدید” کلیک کنید.
همانند تصویر بالا گزین ها را تغییر دهید و کدهای زیر را درون بخش کد اضافه کنید. همه کدهای تست شدن و اصلا مشکلی ندارند و فقط کافیست که کدهای زیر را عینا کپی کنید و در جای مورد نظر قرار دهید.
<script>
;( function() {
let loco_scroll = {};
// wait until all required libraries are available
let chck_if_gsap_loaded = setInterval( function() {
if( window.sfe_loco_scroll && Object.keys( window.sfe_loco_scroll ).length !== 0 && window.gsap && window.ScrollTrigger ) {
// store to the local variable
loco_scroll = window.sfe_loco_scroll;
// register scrolTrigger
gsap.registerPlugin( ScrollTrigger );
// ... do your thing
my_stuff();
// clear interval
clearInterval( chck_if_gsap_loaded );
}
}, 500 );
function my_stuff() {
/* DON'T CHANGE THIS */
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
loco_scroll.on('scroll', ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the '.sfe-locomotive-scroll-wrapper' element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy('.sfe-locomotive-scroll-wrapper', {
scrollTop(value) {
return arguments.length ? loco_scroll.scrollTo(value, 0, 0) : loco_scroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
},
// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector('.sfe-locomotive-scroll-wrapper').style.transform ? 'transform' : 'fixed'
});
/* DON'T CHANGE THIS END */
// handle the hero section
let hero_id = document.querySelector( '#hero' );
let bg_overlay = hero_id.querySelector( '.elementor-background-overlay' );
gsap.to( bg_overlay, {
scale: 1.5,
scrollTrigger: {
scroller: '.sfe-locomotive-scroll-wrapper',
trigger: bg_overlay,
start: 'top top',
scrub: true
}
}
);
// fadeup
let all_fadeups = gsap.utils.toArray( '.fadeup' );
all_fadeups.forEach( ( container ) => {
let main_TL = gsap.timeline( {
scrollTrigger: {
scroller: '.sfe-locomotive-scroll-wrapper',
toggleActions: 'restart none none reverse',
trigger: container,
scrub: false,
start: '-=100 bottom',
end: '-=100 bottom',
//markers: true
}
} );
main_TL.from( container,
{
// yPercent: 30,
y: 100,
opacity: 0,
duration: 1,
ease: Power4.in
}
);
} );
// banner
let the_purgatory = document.getElementById( 'the-purgatory' );
let blow_up = gsap.to( the_purgatory, {
duration: 0.5,
scaleX: 4,
scaleY: 4,
opacity: 0,
ease: 'expo.inOut',
paused: true,
} );
gsap.to( the_purgatory, {
scrollTrigger: {
scroller: '.sfe-locomotive-scroll-wrapper',
trigger: the_purgatory,
scrub: false,
start: () => 'top top',
end: () => the_purgatory.offsetHeight/2 + ' top',
onEnter: () => blow_up.restart().pause(),
onLeave: () => blow_up.play(),
onEnterBack: () => blow_up.reverse(),
onLeaveBack: () => blow_up.restart().pause(),
pin: true,
// markers: true
}
} );
// handle clip-path images reveal
let cp_reveal_images = gsap.utils.toArray( '.cp-image-reveal > .elementor-widget-container' );
cp_reveal_images.forEach( ( container ) => {
let image = container.querySelector( 'img' );
let images_tl = gsap.timeline( {
scrollTrigger: {
scroller: '.sfe-locomotive-scroll-wrapper',
trigger: container,
toggleActions: 'restart none none reset'
}
} );
images_tl.from( container, 1, {
xPercent: -5,
ease: Power2.out
} );
images_tl.fromTo( image, 1,
{
clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)',
},
{
clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
delay: -1.0,
ease: Power2.out
} );
} );
// zoomer
let zoomer = gsap.utils.toArray( '.zoomer' );
zoomer.forEach( ( obj ) => {
gsap.to( obj, {
scale: 2,
opacity: 0,
scrollTrigger: {
scroller: '.sfe-locomotive-scroll-wrapper',
trigger: obj,
toggleActions: 'restart none none reverse',
scrub: 1,
start: 'top center',
//markers: true,
}
} );
} );
// horizontal scroller
let horizes_container = document.querySelector( '#horiscroll' );
let horize = horizes_container.querySelector( '.elementor-top-column' );
let horizes = gsap.utils.toArray( '#horiscroll .elementor-top-column' );
gsap.set( horizes_container, { width: '300vw', } );
gsap.set( horize, { width: '100vw', } );
gsap.to( horizes, {
xPercent: -100 * ( horizes.length - 1 ),
ease: 'none',
scrollTrigger: {
scroller: '.sfe-locomotive-scroll-wrapper',
trigger: horizes_container,
pin: true,
anticipatePin: 1,
scrub: true,
snap: 1 / ( horizes.length - 1 ),
end: () => "+=" + horizes_container.offsetWidth
}
} );
/* DON'T CHANGE THIS */
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener( 'refresh', () => loco_scroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();
/* DON'T CHANGE THIS END */
}
} )();
</script>سپس در آخر بر روی دکمه “انتشار” کلیک کنید تا کدهای ما اجرا شوند. (بعد از فشار دادن دکمه انتشار صفحه ای به صورت پاپ آپ ظاهر می شود که در این صفحه فقط باید بر روی دکمه “Save And Close” کلیک کنید.)
? حتما از دوره آموزش ساخت فروشگاه اینترنتی با المنتور دیدن کنید تا به صورت رایگان متخصص المنتور بشید!
توضیح کدها و کلاس های استفاده شده
کد های از کلاس ها و شناسه هایی استفاده شده است که در زیر همه این کلاس ها را برای شما شرح می دهد تا افکت های خود را بر روی المان های مورد نظر اعمال کنید.
- شناسه “hero” : این شناسه باید برای افکت هدر به کار رفته شود. (سکشن هدر را انتخاب کنید و در بخش شناسه CSS کلمه “hero” را وارد کنید.)
- کلاس “zoomer” : برای عبارات افکت زوم شده باید از این کلاس استفاده کنید. (یعنی ویجت تیتر هایی که میخواهید این افکت بر روی آنها اجرا شود را انتخاب کنید و در بخش پیشرفته گزینه کلاس های CSS را برابر با “zoomer” قرار دهید.)
- کلاس “cp-image-reveal” : برای افکت های تصاویر باید از کلاس “cp-image-revea” در بخش کلاس های CSS استفاده کنید.
- شناسه “the-purgatory” : برای بخش جلوه انفجار در بخش نارنجی رنگ باید از این شناسه استفاده کنید. این شناسه را باید برای تیتر مورد نظر استفاده کنید.
- شناسه “horiscroll” : این شناسه برای افکت تصاویر چرخشی هست که باید برای سکشن به کار برده شود.
[irinfobox]دقت داشته باشید که باید کلاس و شناسه را در جای خود وارد کنید یعنی این دو با هم فرق دارند و باید همه این کلمات در جای خود قرار بگیرند تا افکت ها به درستی اجرا شوند.[/irinfobox]
حالا کار تمام هست و اگه سایت و یا صفحه مورد نظر را چک کنید می بینید که افکت ها به درستی نمایش داده می شوند. مگر اینکه کلاس ها و کدها را اشتباه وارد کرده باشید. البته اصلا نگران نباشید چون در زیر می توانید ویدئوی آموزشی را مشاهده کنید تا دیگر مشکلی نداشته باشید.
? فیلم آموزشی
مطالب زیر را حتما مطالعه کنید
ساخت پس زمینه متن گرادیانت و تصویر در المنتور
دیدگاهتان را بنویسید