Line 54: | Line 54: | ||
} | } | ||
//move footer to main tag | //move footer to main tag | ||
− | + | window.addEventListener('load', function() { | |
− | + | document.querySelector('main').appendChild(document.getElementById('footerWrapper')); | |
+ | }); | ||
+ | var acc = document.querySelectorAll(".iteration-nr"); | ||
+ | for (let i = 0; i < acc.length; i++) { | ||
+ | acc[i].addEventListener("click", function() { | ||
+ | this.classList.toggle("active"); | ||
+ | var panel = this.parentElement.parentElement.nextElementSibling | ||
+ | let circles = panel.querySelectorAll('.circle'); | ||
+ | if (panel.style.maxHeight) { | ||
+ | panel.style.maxHeight = null; | ||
+ | |||
+ | circles.forEach((circle) => { | ||
+ | circle.style.opacity = 0; | ||
+ | }) | ||
+ | } else { | ||
+ | panel.style.maxHeight = panel.scrollHeight + "px"; | ||
+ | circles.forEach((circle) => { | ||
+ | console.log(circle) | ||
+ | circle.style.opacity = 1; | ||
+ | }) | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | let links = document.querySelectorAll('#dtp-cycle ellipse'); | ||
+ | links.forEach((link) => { | ||
+ | link.addEventListener('click', function() { | ||
+ | console.log(link) | ||
+ | }) | ||
+ | }) | ||
+ | $(document).ready(function() { | ||
+ | $('#detection').on('click', function() { | ||
+ | $('html, body').animate({ | ||
+ | 'scrollTop': $('#detection-section').offset().top | ||
+ | }, 2000); | ||
+ | }); | ||
+ | $('#prevention').on('click', function() { | ||
+ | $('html, body').animate({ | ||
+ | 'scrollTop': $('#prevention-section').offset().top | ||
+ | }, 2000); | ||
+ | }); | ||
+ | $('#treatment').on('click', function() { | ||
+ | $('html, body').animate({ | ||
+ | 'scrollTop': $('#treatment-section').offset().top | ||
+ | }, 2000); | ||
+ | }); | ||
}); | }); |
Revision as of 14:32, 11 October 2020
//cycles let engCyc = document.querySelector('#engineering-cycle svg'); let dtpCyc = document.querySelector('#dtp-cycle svg'); let stopEl = document.querySelector('.spacer'); let isMobile = false; let eXc, eYc, dXc, dYc let innHeight = 700
window.addEventListener('load', function() {
if (window.innerWidth < 767) { if (window.innerWidth < window.innerHeight) isMobile = true } else { isMobile = false; } eXc = window.innerWidth * (isMobile ? 0 : 0.5); eYc = window.innerHeight * (isMobile ? 0.6 : 0.7); dXc = window.innerWidth * (isMobile ? 0 : 0.1); dYc = window.innerHeight * (isMobile ? 1 : 1.2) innHeight = window.innerHeight;
})
window.addEventListener('resize', function() {
if (window.innerWidth < 767) { if (window.innerWidth < window.innerHeight) isMobile = true } else { isMobile = false; } eXc = window.innerWidth * (isMobile ? 0 : 0.5); eYc = window.innerHeight * (isMobile ? 0.6 : 0.7); dXc = window.innerWidth * (isMobile ? 0 : 0.1); dYc = window.innerHeight * (isMobile ? 1 : 1.2) innHeight = window.innerHeight;
})
window.addEventListener("scroll", () => {
if (stopEl.getBoundingClientRect().top > 0) { let dist = window.scrollY / innHeight; engCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.5 : 0.65)}) translate(-${dist * eXc}px,-${dist * eYc}px)`; dtpCyc.style.transform = `scale(${1 - dist * (isMobile ? 0.15 : 0.3)}) translate(${dist * dXc}px,-${dist * dYc}px)`; }
}); //waves var setWaveParams = () => {
let container = document.querySelector(".milkWave"); return { width: container.offsetWidth, height: container.offsetHeight, waveWidth: container.offsetWidth, waveHeight: container.offsetHeight * 0.2, waveDelta: 25, speed: 0.15, wavePoints: 5, }; } //move footer to main tag
window.addEventListener('load', function() {
document.querySelector('main').appendChild(document.getElementById('footerWrapper'));
}); var acc = document.querySelectorAll(".iteration-nr"); for (let i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.parentElement.parentElement.nextElementSibling let circles = panel.querySelectorAll('.circle'); if (panel.style.maxHeight) { panel.style.maxHeight = null;
circles.forEach((circle) => { circle.style.opacity = 0; }) } else { panel.style.maxHeight = panel.scrollHeight + "px"; circles.forEach((circle) => { console.log(circle) circle.style.opacity = 1; }) } });
}
let links = document.querySelectorAll('#dtp-cycle ellipse'); links.forEach((link) => {
link.addEventListener('click', function() { console.log(link) })
}) $(document).ready(function() {
$('#detection').on('click', function() { $('html, body').animate({ 'scrollTop': $('#detection-section').offset().top }, 2000); }); $('#prevention').on('click', function() { $('html, body').animate({ 'scrollTop': $('#prevention-section').offset().top }, 2000); }); $('#treatment').on('click', function() { $('html, body').animate({ 'scrollTop': $('#treatment-section').offset().top }, 2000); });
});