WSC 5 & WSC 3 HTML-Startseite (Free)

<!-- Accordion Function -->
<script data-relocate="true">
const accordions = document.querySelectorAll('.gaccordion');

accordions.forEach((accordion) => {
  accordion.addEventListener('click', function() {
    const panel = this.nextElementSibling;
    const isActive = this.classList.contains('active');
    
    if (isActive) {
      panel.style.maxHeight = null;
    } else {
      const panelHeight = panel.scrollHeight;
      
      window.requestAnimationFrame(() => {
        panel.style.maxHeight = panelHeight + 'px';
      });
    }
    
    this.classList.toggle('active');
  });
});
</script>

<!-- Counter Animation -->
<script data-relocate="true">
const counters = document.querySelectorAll('.counter-value');
let a = 0;

window.addEventListener('scroll', function() {
  const oTop = document.querySelector('#counter').getBoundingClientRect().top - window.innerHeight;
  
  if (a === 0 && window.pageYOffset > oTop) {
    counters.forEach(function(counter) {
      const countTo = parseInt(counter.getAttribute('data-count'));
      let countNum = parseInt(counter.textContent);

      const updateCount = function() {
        countNum += Math.ceil((countTo - countNum) / 25);
        counter.textContent = countNum;
        if (countNum >= countTo) {
          clearInterval(timer);
          counter.textContent = countTo;
        }
      };

      const timer = setInterval(updateCount, 30);
    });
    a = 1;
  }
});
</script>

<!-- Image Slider Function -->
<script data-relocate="true">
/*!
=> Sheet Slider v2.2.0
=> Copyright: 2018 zkreations
=> Licensed under MIT | github.com/zkreations/SheetSlider/blob/master/LICENSE
*/
const animateDelay = 4000;
const autoplayHoverPause = false;
let auto, slides = document.querySelectorAll(".sh-auto input");
const sliderContent = document.querySelector(".sh-auto .sh__content"); 
const sliderButtons = document.querySelectorAll(".sh-auto .sh__btns label");
const sliderArrows = document.querySelectorAll(".sh-auto .sh__arrows label");
const sliderControl = document.querySelector(".sh-control");
let sliderStopped = false;

if (autoplayHoverPause) {    
  sliderContent.addEventListener("mouseover", pauseSlider);
  sliderContent.addEventListener("mouseout", playSlider);
}

if (sliderControl) {
  sliderControl.addEventListener("click", playPauseButton);
}

function setInput(){
  auto = setInterval(autoSlides, animateDelay);
}

function autoSlides() {
  for (let i = 0; i < slides.length; i++) {
    if (slides[i].checked) {
      if (i === slides.length - 1) {
        slides[0].checked = true;
      } else {
        slides[i + 1].checked = true;
      }
      break;
    }
  }
}

function pauseSlider() {
  clearInterval(auto);
}

function playSlider() {
  if (!sliderStopped) {
    setInput();
  }
}

function playPauseButton() {
  sliderStopped = !sliderStopped;
  pauseSlider();
  sliderControl.classList.add('is-active');
  
  if (!sliderStopped) {
    autoSlides();
    playSlider();
    sliderControl.classList.remove('is-active');
  }
}

for (let i = 0; i < slides.length; i++) {
  if (sliderButtons.length) {
    // Pausar si los botones reciben un clic
    sliderButtons[i].addEventListener("click", function() {
      pauseSlider();
      playSlider();
    });
  }
  
  if (sliderArrows.length) {
    // Pausar si las flechas reciben un clic
    sliderArrows[i].addEventListener("click", function() {
      pauseSlider();
      playSlider();
    });
  }
}
    
window.addEventListener("load", function() {
  setInput();
});
                        
</script>

<!-- Scrollpoint Anchor Function -->

<script data-relocate="true">
(function() {
  function onReady(fn) {
    if (document.readyState != "loading") {
      fn();
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  function scrollToID(id, speed) {
    var offSet = 50;
    var targetOffset = document.querySelector(id).offsetTop - offSet;
    var mainNav = document.querySelector('#main-nav');
    window.scrollTo({
      top: targetOffset,
      behavior: 'smooth'
    });
    if (mainNav.classList.contains("open")) {
      mainNav.style.height = "1px";
      mainNav.classList.remove("in");
      mainNav.classList.add("collapse");
      mainNav.classList.remove("open");
    }
  }

  onReady(function() {
    // navigation click actions    
    var navLinks = document.querySelectorAll('.nav-link');
    for (var i = 0; i < navLinks.length; i++) {
      navLinks[i].addEventListener('click', function(event) {
        event.preventDefault();
        var sectionID = this.getAttribute("data-id");
        scrollToID('#' + sectionID, 750);
      });
    }

    // scroll to top action
    var scrollTopLink = document.querySelector('.scroll-top');
    if (scrollTopLink) {
      scrollTopLink.addEventListener('click', function(event) {
        event.preventDefault();
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    }

    // mobile nav toggle
    var navToggle = document.querySelector('#nav-toggle');
    if (navToggle) {
      navToggle.addEventListener('click', function(event) {
        event.preventDefault();
        var mainNav = document.querySelector('#main-nav');
        mainNav.classList.toggle("open");
      });
    }
  });
})();
</script>