החלפת צבע רקע בגלילה

pantone color card viva magenta
pantone color card
pantone color card sun orange
pantone color card rose
pantone color purple
pantone color card grape
pantone color card gray

נרגשת להציג את:

המדריך להחלפת צבע בגלילה

(זה אולי נראה פשוט אבל עבדתי על זה לא מעט!)

ההדרכה הזו מחולקת לשני חלקים:

  1. בניית העמוד
  2. החלקים החשובים בקוד

     

בניית העמוד:

העמוד בנוי מקונטיינר אחד שמכיל בתוכו את כל שאר הקונטיינרים.

כל קונטיינר פנימי בסופו של דבר יהיה אחראי על שינוי צבע הרקע.

מספר הקונטיינרים הפנימיים - לפי הצורך שלכם.

בהדגמה הנוכחית יש 7 קונטיינרים פנימיים. 

הגדרות קונטיינר חיצוני:

  • גובה: 100VH
  • קלאס: container
  • צבע רקע: הצבע הראשון שאתם בוחרים

הגדרות קונטיינר פנימי:

  • גובה: 100VH
  • קלאס: panel
  • צבע רקע: ללא
  • מבנה פנימי לפי הצורך

קוד: 

אלמנטור > ניהול קודים > קוד חדש 

מיקום: בסוף ה BODY

שם - לבחירתכם

השורה היחידה בקוד שצריך לשנות היא שורת הצבעים. (שורה מס 15)

 const bgColors =    פה כתובים שבעת הצבעים שאני השתמשתי בהם, ניתן להוסיף/להוריד/לשנות לפי הצורך.

את הקוד הנ"ל להעתיק ולהדביר בקודים של אלמנטור ולשנות את הצבעים לפי הצורך

וזהו 🙂 בהצלחה! מוזמנים לספר לי איך היה ולשתף בתוצאות

				
					<script>
;( function() {
	
	let chck_if_gsap_loaded = setInterval(function(){
			const eleBuilder = document.querySelector('body').classList.contains('elementor-editor-active');
       if(window.gsap && window.ScrollTrigger && !eleBuilder){
            gsap.registerPlugin(ScrollTrigger);
            my_stuff();
            clearInterval(chck_if_gsap_loaded);
        }
    }, 500);
  
  function my_stuff() {
	
      const bgColors =     ['#bc2749','#de4854','#F38235','#e1598e','#65658e','#8a6b76','#939599'];
      const sections = gsap.utils.toArray('.panel');

  sections.forEach(function(section, index){
	ScrollTrigger.create({
		trigger:section,
		start:'top 200px',
		end:'bottom 100px',
		animation:gsap.to('.container', {backgroundColor:bgColors[index], immediateRender:false}),
		toggleActions:'restart none none reverse'
		
	});
});


  
}} )();
</script>

<script data-minify="1" src="https://oohmyweb.com/wp-content/cache/min/1/ajax/libs/gsap/3.9.0/gsap.min.js?ver=1714378963" defer></script>
<script data-minify="1" src="https://oohmyweb.com/wp-content/cache/min/1/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js?ver=1714378963" defer></script>


				
			

תודה!

אני יעבור על כל החומר ששלחת לי ואחזור אלייך בתוך 48 שעות לכל היותר.