Schade das du die modernisierung der Javascript`s nicht berücksichtigt hast in der neuen Version.
Beiträge von SunnyCue
-
-
Hallo zusammen,
ich habe die Javascript-Codes etwas optimiert. Zudem kommen alle ohne jQuery aus
So kann der Code auch im Typ template als Startseite genutzt werden
HTML
Alles anzeigen<!-- 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>
Gino Zantarelli , wird es auch eine aktualisierte Version geben mit neuen, zusätzlichen oder überarbeiteten Ideen geben?
mfg