https://www.villageathuntersrun.com/gridmedia/js/__homescripts.min.js

1(function () {
2  const homepageCinemagraphWrapper = document.querySelector('.hp-cinemagraph-section');
3  const homepageSwiperWrapper = document.querySelector('.hp-slideshow-wrapper');
4  const cinemagraphVideo = document.querySelector('#cinemagraph_video');
5  let currentVideoWidth;
6  let homepageSwiper;
7
8  function buildHomepageSwiper(swiperSelector) {
9    return new Swiper(swiperSelector, {
10      loop: true,
11      direction: 'horizontal',
12      effect: 'fade',
13      speed: 1500,
14      fadeEffect: {
15        crossFade: true
16      },
17      autoplay: {
18        delay: hpSwiperDelay // global variable decalred in homepage index, change this to update speed of swiper transitions
19      }
20    });
21  }
22
23  const checkSliderCount = homepageSwiperWrapper.querySelectorAll('.swiper-slide');
24  if (checkSliderCount.length > 1) {
25    homepageSwiper = buildHomepageSwiper(homepageSwiperWrapper);
26  }
27  
28    // This is for the hero cinemagraph   
29    const heroCine = document.getElementById('hero_video');
30    
31    if (heroCine) {
32      const mql = window.matchMedia('(min-width: 768px)');
33    
34      function handleBreakpoint(e) {
35        if (e.matches) {
36          // On tablets/desktops: allow loading
37          heroCine.setAttribute('preload', 'auto');
38          heroCine.load();
39        } else {
40          // On mobile: unload/stop video
41          heroCine.pause();
42          heroCine.removeAttribute('preload');
43          heroCine.load();  // drops the buffer
44        }
45      }
46    
47      mql.addEventListener('change', handleBreakpoint);
48      handleBreakpoint(mql);  // run once on start
49    }
50
51  function loadCinemagraph() {
52    const homepageCinemagraphObserver = new ResizeObserver(entries => {
53      entries.forEach(entry => {
54        const width = entry.contentRect.width;
55
56        // Gather all urls and breakpoints
57        let allVideoUrls = {};
58        cinemagraphVideo.querySelectorAll('source').forEach(source => {
59          allVideoUrls = {
60            ...allVideoUrls,
61            [source.dataset.mw]: source.dataset.src
62          };
63        });
64
65        // select which video dimension should show depending on width
66        if (width < 960 && currentVideoWidth !== 960) {
67          currentVideoWidth = 960;
68          cinemagraphVideo.src = allVideoUrls[960];
69        }
70        if ((width >= 960 && width < 1366) && currentVideoWidth !== 1366) {
71          currentVideoWidth = 1366;
72          cinemagraphVideo.src = allVideoUrls[1366];
73        }
74        if (width >= 1366 && currentVideoWidth !== 1920) {
75          currentVideoWidth = 1920;
76          cinemagraphVideo.src = allVideoUrls[1920];
77        }
78      });
79    });
80
81    homepageCinemagraphObserver.observe(homepageCinemagraphWrapper);
82  }
83
84  const Parallaxed = function () { };
85  Parallaxed.prototype = (function () {
86    const parallaxIt = function (element, speed, property, startingPt) {
87      const el = element;
88      const offset = window.pageYOffset;
89      if (startingPt) {
90        el.style[property] = ` translateY(${(startingPt + 0) * -1 + 'px'}) `;
91      } else {
92        el.style[property] = ` translateY(${(offset * speed) * -1 + 'px'}) `;
93      }
94    };
95    return {
96      parallaxIt: parallaxIt
97    };
98  }());
99
100  function parallaxCinemagraph() {
101    if(document.querySelector('.hp-cinemagraph-inner-wrapper')) {
102        if (window.innerWidth >= 1400) {
103          const parallaxedElement1 = new Parallaxed();
104          parallaxedElement1.parallaxIt(document.querySelector('.hp-cinemagraph-inner-wrapper'), 0.05, 'transform', 0);
105          window.onscroll = function () {
106            parallaxedElement1.parallaxIt(document.querySelector('.hp-cinemagraph-inner-wrapper'), 0.05, 'transform', 0);
107          };
108        } else {
109          window.onscroll = null;
110          document.querySelector('.hp-cinemagraph-inner-wrapper').style.transform = 'translateY(0px)';
111        }
112    }
113  }
114
115  if (homepageCinemagraphWrapper) {
116      parallaxCinemagraph();
117  }
118
119  window.addEventListener('resize', (event) => {
120    parallaxCinemagraph();
121  });
122
123  // lazy load images and cinemagraph
124  Apts247.dom.ready().then(() => {
125    const hpFPTextSection = document.querySelector('.floorplan-section-header-wrapper');
126    const hpFloorplansScript = document.getElementById('hp_fp_script');
127    const hpAmenitiesImg = document.getElementById('hp_amenity_img');
128
129    if (cinemagraphVideo) {
130      useIntersectionObserver(cinemagraphVideo, (entry) => {
131        loadCinemagraph();
132      }, { rootMargin: '250px' });
133    }
134
135    useIntersectionObserver(hpFPTextSection, (entry) => {
136      hpFloorplansScript.src = hpFloorplansScript.dataset.src;
137    }, { rootMargin: '150px' });
138
139    useIntersectionObserver(hpAmenitiesImg, (entry) => {
140      hpAmenitiesImg.dataset.mediaManager = hpAmenitiesImg.dataset.lazyloadMediaManager;
141    }, { rootMargin: '150px' });
142  });
143
144  // slideshow blur removal on button hover
145  const heroBtn = document.querySelector('.hero-btn');
146  const heroBlur = document.querySelector('.animate-blur');
147
148  if (heroBtn) {
149    heroBtn.addEventListener('mouseover', () => {
150      heroBlur.classList.remove('animate-blur');
151      heroBlur.classList.add('animate-clear-blur');
152    });
153
154    heroBtn.addEventListener('mouseout', () => {
155      heroBlur.classList.add('animate-blur');
156      heroBlur.classList.remove('animate-clear-blur');
157    });
158  }
159
160  // slideshow blur removal on scroll
161  let lastScrollTop = 0;
162  let initBlur = 5;
163
164  const heroObserver = new IntersectionObserver((entries, observer) => {

165    entries.forEach(entry => {
166      if (entry.isIntersecting) {
167        let element = entry.target;
168        let st = window.pageYOffset || document.documentElement.scrollTop;
169
170        if (st > lastScrollTop) {
171          // downscroll code
172          initBlur <= 0 ? null : initBlur = initBlur - 2.5;
173          element.style.backdropFilter = `blur(${(initBlur)}px)`;
174
175        } else {
176          // upscroll code
177          initBlur >= 5 ? null : initBlur = initBlur + 2.5;
178          element.style.backdropFilter = `blur(${(initBlur)}px)`
179        }
180
181        lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
182      }
183
184    });
185  }, { threshold: [.8, .9, .93, .96, 1] });
186
187  heroObserver.observe(document.querySelector('.hero-overlay-info'));
188})();
189