https://fiskl.com/wp-content/themes/fiskl-starter/assets/public/js/main.js?ver=1.0.0

1(function ($) {
2  "use strict"; // Start of use strict
3
4  //console.log('Starter theme');
5
6})(jQuery); // End of use strict
7
8
9// ======================= Only Used on Homepage ======================= \\
10
11// Add class when scrolled 33% and 66% of scrolling-pos-three__section
12document.addEventListener('DOMContentLoaded', function () {
13  const scrollingSection = document.querySelector('.scrolling-pos-three__section');
14
15  if (scrollingSection) {
16    window.addEventListener('scroll', function () {
17      const scrollPositionRelativeToScrolling = window.scrollY - scrollingSection.offsetTop;
18
19      const sectionHeight = scrollingSection.offsetHeight;
20      const oneThirdHeight = sectionHeight * 0.33;
21      const twoThirdsHeight = sectionHeight * 0.66;
22
23      if (scrollPositionRelativeToScrolling >= oneThirdHeight && scrollPositionRelativeToScrolling < twoThirdsHeight) {
24        scrollingSection.classList.add('--one-third-scrolled');
25        scrollingSection.classList.remove('--two-thirds-scrolled');
26      } else if (scrollPositionRelativeToScrolling >= twoThirdsHeight) {
27        scrollingSection.classList.remove('--one-third-scrolled');
28        scrollingSection.classList.add('--two-thirds-scrolled');
29      } else {
30        scrollingSection.classList.remove('--one-third-scrolled');
31        scrollingSection.classList.remove('--two-thirds-scrolled');
32      }
33    });
34  }
35});
36
37// Add class when scrolling into the section, then removed at the bottom
38document.addEventListener('DOMContentLoaded', function () {
39  const scrollingSection = document.querySelector('.scrolling-pos-three__section');
40
41  if (scrollingSection) {
42    window.addEventListener('scroll', function () {
43      const scrollPositionRelativeToScrolling = window.scrollY - scrollingSection.offsetTop;
44      const topOfViewport = window.scrollY;
45
46      if (scrollPositionRelativeToScrolling >= -160 && topOfViewport <= scrollingSection.offsetTop + scrollingSection.offsetHeight) {
47        scrollingSection.classList.add('--scrolled-heading');
48      } else {
49        scrollingSection.classList.remove('--scrolled-heading');
50      }
51    });
52  }
53});
54
55
56// Section coming into view from the center of the screen
57document.addEventListener('DOMContentLoaded', function() {
58
59  const section = document.querySelector('.elevating-section__section');
60  const textContainer = document.querySelector('.elevating-section__text-container');
61
62  if ( !section ) return;
63  if ( !textContainer) return;
64
65  const sectionHeight = section.scrollHeight;
66
67  const startScroll = section.offsetTop;
68  const endScroll = startScroll + sectionHeight;
69  const startScale = 1; // Initial scale value
70  const endScale = 0.30; // Final scale value
71  const scaleScrollRange = sectionHeight * 0.25; // Scale effect starts after scrolling 25% of the section height
72  const delayScroll = sectionHeight * 0.05; // Delay before scaling starts (0.5% of the section height)
73
74  let scaleApplied = false;
75
76  window.addEventListener('scroll', () => {
77    
78    const scrollPosition = window.scrollY - startScroll;
79
80    if (scrollPosition >= delayScroll && scrollPosition <= scaleScrollRange) {
81      const scrollProgress = (scrollPosition - delayScroll) / (scaleScrollRange - delayScroll);
82      const scaleValue = startScale - (startScale - endScale) * scrollProgress;
83      textContainer.style.transform = `scale(${scaleValue.toFixed(2)})`;
84      scaleApplied = true;
85    } else if (scrollPosition > scaleScrollRange && !scaleApplied) {
86      textContainer.style.transform = `scale(${endScale.toFixed(2)})`;
87      scaleApplied = true;
88    } else if (scrollPosition < delayScroll && scaleApplied) {
89      textContainer.style.transform = `scale(${startScale.toFixed(2)})`;
90      scaleApplied = false;
91    }
92  });
93});
94
95// Text effect gradual increase in opacity
96  document.addEventListener("DOMContentLoaded", function() {
97    function handleScroll() {
98        const ratingContainer = document.querySelector('.testimonial-hp__section');
99        const quoteContainer = document.querySelector('.testimonial-hp__quote');
100
101        if ( !ratingContainer ) return;
102        if ( !quoteContainer ) return;
103
104        const words = quoteContainer.querySelectorAll('span');
105        const containerTop = ratingContainer.getBoundingClientRect().top;
106        const containerBottom = ratingContainer.getBoundingClientRect().bottom;
107        const quoteTop = quoteContainer.getBoundingClientRect().top;
108        const quoteBottom = quoteContainer.getBoundingClientRect().bottom;

109        const viewportHeight = window.innerHeight;
110        const middleViewport = viewportHeight / 2; // Middle of the viewport
111  
112        if (quoteTop <= middleViewport && quoteBottom >= middleViewport) {
113            words.forEach((word, index) => {
114                word.style.opacity = 1;
115            });
116        } else {
117            words.forEach((word, index) => {
118                const distanceToTop = word.getBoundingClientRect().top;
119                let opacity = 1 - Math.abs(middleViewport - distanceToTop) / (viewportHeight / 2); // Calculate opacity based on distance from the middle of the viewport
120                opacity = Math.max(0, Math.min(opacity, 1)); // Ensure opacity is within range [0, 1]
121                word.style.opacity = opacity;
122            });
123        }
124    }
125
126    // Add scroll event listener to the window
127    window.addEventListener('scroll', handleScroll);
128
129    // Initial call to handleScroll to set initial opacity
130    handleScroll();
131});
132
133
134// ======================= Only Used on Features ======================= \\
135document.addEventListener('DOMContentLoaded', function () {
136  const scrollingSection = document.querySelector('.invoice-sample');
137
138  if (scrollingSection) {
139    window.addEventListener('scroll', function () {
140      const scrollPositionRelativeToScrolling = window.scrollY - scrollingSection.offsetTop;
141
142      const sectionHeight = scrollingSection.offsetHeight;
143      const oneThirdHeight = sectionHeight * 0.01;
144      const twoThirdsHeight = sectionHeight * 0.20;
145
146      if (scrollPositionRelativeToScrolling >= oneThirdHeight && scrollPositionRelativeToScrolling < twoThirdsHeight) {
147        scrollingSection.classList.add('--one-third-scrolled');
148        scrollingSection.classList.remove('--two-thirds-scrolled');
149      } else if (scrollPositionRelativeToScrolling >= twoThirdsHeight) {
150        scrollingSection.classList.remove('--one-third-scrolled');
151        scrollingSection.classList.add('--two-thirds-scrolled');
152      } else {
153        scrollingSection.classList.remove('--one-third-scrolled');
154        scrollingSection.classList.remove('--two-thirds-scrolled');
155      }
156    });
157  }
158});