1// For fancy Home scroller 2// use a script tag or an external JS file 3// document.addEventListener("DOMContentLoaded", (event) => { 4// gsap.registerPlugin(ScrollTrigger); 5// // gsap code here! 6// }); 7 8$(function () { 9 // Home fancy image scroll effect 10 // Lenis Smooth Scroll: https://github.com/darkroomengineering/lenis/blob/main/README.md#installation 11 // Tutorial: https://codepen.io/gridmorphic/pen/WbQPRwv 12 var lenis = false; 13 var previousHeight = $(".wrap").height(); 14 15 // Not resizing lenis will not allow a user to scroll down the whole way on a page 16 const resizeObserver = new ResizeObserver((entries) => { 17 for (let entry of entries) { 18 if (lenis && previousHeight != entry.contentRect.height) { 19 // Resize lenis 20 lenis.resize(); 21 previousHeight = entry.contentRect.height; 22 } 23 } 24 }); 25 resizeObserver.observe(document.querySelector(".wrap")); 26 27 if ($(".home.page-template-default").length) { 28 // Initialize Lenis smooth scroll 29 lenis = new Lenis({ 30 duration: 1.2, 31 easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), 32 smooth: true, 33 gestureDirection: "vertical", 34 smoothTouch: true, 35 touchMultiplier: 2, 36 }); 37 38 function raf(time) { 39 lenis.raf(time);
40 ScrollTrigger.update(); 41 requestAnimationFrame(raf); 42 } 43 44 function isDarkColor(hexColor) { 45 hexColor = hexColor.replace(/^#/, ""); 46 47 const r = parseInt(hexColor.substring(0, 2), 16); 48 const g = parseInt(hexColor.substring(2, 4), 16); 49 const b = parseInt(hexColor.substring(4, 6), 16); 50 51 const brightness = (r * 299 + g * 587 + b * 114) / 1000; 52 53 return brightness < 128; // true if dark, false if light color 54 } 55 56 requestAnimationFrame(raf); 57 58 // Set z-index for images 59 document 60 .querySelectorAll( 61 "#home-content-image-slider .image__right .image-wrapper", 62 ) 63 .forEach((element) => { 64 const order = element.getAttribute("data-index"); 65 if (order !== null) { 66 element.style.zIndex = order; 67 } 68 }); 69 70 const imgs = gsap.utils.toArray( 71 "#home-content-image-slider .image-wrapper img", 72 ); 73 const contents = gsap.utils.toArray( 74 "#home-content-image-slider .content__info", 75 ); 76 const bgColors = contents.map((element, index, array) => { 77 return element.dataset.color; 78 }); 79 var hasLeft = false; // true if the user is outside/below the scroller 80 81 // GSAP Animation with Media Query 82 ScrollTrigger.matchMedia({ 83 "(min-width: 769px)": function () { 84 var downDirection = true; 85 const mainTimeline = gsap.timeline({ 86 scrollTrigger: { 87 trigger: "#home-content-image-slider .image-content", 88 start: "top top", 89 end: "bottom bottom", 90 pin: ".image__right", 91 // markers: true, 92 scrub: true, 93 onUpdate: (self) => { 94 downDirection = self.direction == 1 ? true : false; 95 // console.log('onUpdate - downDirection:', downDirection); 96 97 if (hasLeft) { 98 $(".wrap").css( 99 "background-color", 100 "transparent", 101 ); 102 $( 103 "#home-content-image-slider .content__info", 104 ).removeClass("dark-background"); 105 // console.log('hasLeft update'); 106 } 107 }, 108 onLeave: () => { 109 hasLeft = true; 110 $(".wrap").css("background-color", "transparent"); 111 $( 112 "#home-content-image-slider .content__info", 113 ).removeClass("dark-background"); 114 // console.log('onLeave'); 115 }, 116 onEnterBack: () => { 117 hasLeft = false; 118 $(".wrap").css( 119 "background-color", 120 bgColors[bgColors.length - 2], 121 ); 122 if (isDarkColor(bgColors[bgColors.length - 2])) { 123 $( 124 "#home-content-image-slider .content__info", 125 ).addClass("dark-background"); 126 } else { 127 $( 128 "#home-content-image-slider .content__info", 129 ).removeClass("dark-background"); 130 } 131 // console.log('onEnterBack'); 132 }, 133 onEnter: () => { 134 hasLeft = false; 135 $(".wrap").css("background-color", bgColors[0]); 136 if (isDarkColor(bgColors[0])) { 137 $( 138 "#home-content-image-slider .content__info", 139 ).addClass("dark-background"); 140 } else { 141 $( 142 "#home-content-image-slider .content__info", 143 ).removeClass("dark-background"); 144 } 145 // console.log('onEnter'); 146 }, 147 onLeaveBack: () => { 148 hasLeft = true; // user is above slider, but outside of it 149 $(".wrap").css("background-color", "transparent"); 150 $( 151 "#home-content-image-slider .content__info", 152 ).removeClass("dark-background"); 153 // console.log('onLeaveBack'); 154 }, 155 }, 156 }); 157 158 gsap.set(imgs, { 159 clipPath: "inset(0)", 160 objectPosition: "0px 0%", 161 }); 162
163 imgs.forEach((_, index) => { 164 const currentImage = imgs[index]; 165 const nextImage = imgs[index + 1] ? imgs[index + 1] : null; 166 const nextText = contents[index + 1] 167 ? contents[index + 1] 168 : null; 169 170 const sectionTimeline = gsap.timeline(); 171 172 if (nextImage) { 173 if (index != 0) { 174 sectionTimeline.set( 175 ".wrap", 176 { 177 backgroundColor: bgColors[index], 178 onUpdate: () => { 179 var i = index; 180 if (!downDirection) { 181 // scrolling up 182 i = index - 1; 183 } 184 185 if (isDarkColor(bgColors[i])) { 186 $( 187 "#home-content-image-slider .content__info", 188 ).addClass("dark-background"); 189 } else { 190 $( 191 "#home-content-image-slider .content__info", 192 ).removeClass("dark-background"); 193 } 194 }, 195 }, 196 0, 197 ); 198 } else { 199 sectionTimeline.set( 200 ".wrap", 201 { 202 backgroundColor: "transparent", 203 onUpdate: () => { 204 $( 205 "#home-content-image-slider .content__info", 206 ).removeClass("dark-background"); 207 }, 208 }, 209 0, 210 ); 211 } 212 213 sectionTimeline 214 .to( 215 currentImage, 216 { 217 clipPath: "inset(0px 0px 100%)", 218 objectPosition: "0px 60%", 219 duration: 1.5, 220 ease: "none", 221 }, 222 0, 223 ) 224 .to( 225 nextImage, 226 { 227 objectPosition: "0px 40%", 228 duration: 1.5, 229 ease: "none", 230 }, 231 0, 232 ) 233 .to(nextText, { 234 opacity: 1, 235 duration: 1.5, 236 }); 237 } 238 mainTimeline.add(sectionTimeline); 239 }); 240 }, 241 }); 242 } 243});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.