(Created page with "//cycles let engCyc = document.querySelector('#engineering-cycle svg'); let dtpCyc = document.querySelector('#dtp-cycle svg'); let stopEl = document.querySelector('.spacer');...") |
m |
||
(18 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
let stopEl = document.querySelector('.spacer'); | let stopEl = document.querySelector('.spacer'); | ||
let isMobile = false; | let isMobile = false; | ||
+ | let eXc, eYc, dXc, dYc | ||
+ | let innHeight = 700 | ||
window.addEventListener('load', function() { | window.addEventListener('load', function() { | ||
if (window.innerWidth < 767) { | if (window.innerWidth < 767) { | ||
if (window.innerWidth < window.innerHeight) isMobile = true | 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; | ||
}) | }) | ||
Line 14: | Line 23: | ||
if (window.innerWidth < 767) { | if (window.innerWidth < 767) { | ||
if (window.innerWidth < window.innerHeight) isMobile = true | 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; | ||
+ | if (!clicked) { | ||
+ | if (window.innerWidth >= 767) { | ||
+ | document.getElementById('click-info-desktop').classList.add('visible') | ||
+ | document.getElementById('click-info-mobile').classList.remove('visible') | ||
+ | } else { | ||
+ | document.getElementById('click-info-mobile').classList.add('visible') | ||
+ | document.getElementById('click-info-desktop').classList.remove('visible') | ||
+ | } | ||
+ | } | ||
+ | |||
}) | }) | ||
window.addEventListener("scroll", () => { | window.addEventListener("scroll", () => { | ||
if (stopEl.getBoundingClientRect().top > 0) { | if (stopEl.getBoundingClientRect().top > 0) { | ||
− | let dist = window.scrollY / | + | 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)`; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | dtpCyc.style.transform = `scale(${ | + | |
} | } | ||
}); | }); | ||
− | / | + | window.addEventListener('load', function() { |
− | + | setTimeout(function() { | |
− | + | let dist = window.scrollY / innHeight; | |
− | + | if (dist > 0.95) { | |
− | + | dist = 1; | |
− | + | engCyc.style.transform = `scale(${1 - 0.95 * (isMobile ? 0.5 : 0.65)}) translate(-${0.95 * eXc}px,-${0.95 * eYc}px)`; | |
− | + | dtpCyc.style.transform = `scale(${1 - 0.95 * (isMobile ? 0.15 : 0.3)}) translate(${0.95 * dXc}px,-${0.95 * dYc}px)`; | |
− | + | } | |
− | + | }, 500) | |
− | + | if (window.innerWidth >= 767) { | |
− | + | document.getElementById('click-info-desktop').classList.add('visible') | |
− | }; | + | document.getElementById('click-info-mobile').classList.remove('visible') |
+ | } else { | ||
+ | document.getElementById('click-info-mobile').classList.add('visible') | ||
+ | document.getElementById('click-info-desktop').classList.remove('visible') | ||
+ | } | ||
+ | }) | ||
+ | //move footer to main tag | ||
+ | window.addEventListener('load', function() { | ||
+ | document.querySelector('main').appendChild(document.getElementById('footerWrapper')); | ||
+ | }); | ||
+ | var acc = document.querySelectorAll(".iteration-nr"); | ||
+ | let separator = document.getElementById('separator'); | ||
+ | let clickIndicator = document.querySelectorAll('.section-iteration svg'); | ||
+ | let clicked = false; | ||
+ | |||
+ | for (let i = 0; i < acc.length; i++) { | ||
+ | acc[i].addEventListener("click", function() { | ||
+ | clicked = true; | ||
+ | var panel = this.parentElement.parentElement.nextElementSibling | ||
+ | clickIndicator.forEach((el) => { | ||
+ | el.classList.remove('visible'); | ||
+ | }) | ||
+ | $(panel).toggleClass('visible'); | ||
+ | if (panel.style.maxHeight == 0) { | ||
+ | separator.style.height = null; | ||
+ | } else { | ||
+ | height = separator.previousElementSibling.scrollHeight - document.getElementById('footerWrapper').getBoundingClientRect().height + "px"; | ||
+ | separator.style.height = height; | ||
+ | } | ||
+ | setTimeout(_initializeIndexScroll, 500); | ||
+ | }); | ||
} | } | ||
+ | |||
+ | function toggleAll() { | ||
+ | let counter = 0; | ||
+ | let accordions = document.querySelectorAll('.accordion'); | ||
+ | accordions.forEach((acc) => { | ||
+ | if (acc.classList.contains('visible')) counter++; | ||
+ | }) | ||
+ | if (counter < accordions.length) { | ||
+ | $('.accordion').addClass('visible'); | ||
+ | document.getElementById('toggleAccordion').innerHTML = 'close all' | ||
+ | } else { | ||
+ | $('.accordion').removeClass('visible'); | ||
+ | document.getElementById('toggleAccordion').innerHTML = 'expand all' | ||
+ | } | ||
+ | setTimeout(_initializeIndexScroll, 500); | ||
+ | } | ||
+ | |||
+ | $(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); | ||
+ | }); | ||
+ | }); |
Latest revision as of 19:34, 23 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; if (!clicked) { if (window.innerWidth >= 767) { document.getElementById('click-info-desktop').classList.add('visible') document.getElementById('click-info-mobile').classList.remove('visible') } else { document.getElementById('click-info-mobile').classList.add('visible') document.getElementById('click-info-desktop').classList.remove('visible') } }
})
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)`; }
}); window.addEventListener('load', function() {
setTimeout(function() { let dist = window.scrollY / innHeight; if (dist > 0.95) { dist = 1; engCyc.style.transform = `scale(${1 - 0.95 * (isMobile ? 0.5 : 0.65)}) translate(-${0.95 * eXc}px,-${0.95 * eYc}px)`; dtpCyc.style.transform = `scale(${1 - 0.95 * (isMobile ? 0.15 : 0.3)}) translate(${0.95 * dXc}px,-${0.95 * dYc}px)`; } }, 500) if (window.innerWidth >= 767) { document.getElementById('click-info-desktop').classList.add('visible') document.getElementById('click-info-mobile').classList.remove('visible') } else { document.getElementById('click-info-mobile').classList.add('visible') document.getElementById('click-info-desktop').classList.remove('visible') } }) //move footer to main tag window.addEventListener('load', function() { document.querySelector('main').appendChild(document.getElementById('footerWrapper')); });
var acc = document.querySelectorAll(".iteration-nr"); let separator = document.getElementById('separator'); let clickIndicator = document.querySelectorAll('.section-iteration svg'); let clicked = false;
for (let i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() { clicked = true; var panel = this.parentElement.parentElement.nextElementSibling clickIndicator.forEach((el) => { el.classList.remove('visible'); }) $(panel).toggleClass('visible'); if (panel.style.maxHeight == 0) { separator.style.height = null; } else { height = separator.previousElementSibling.scrollHeight - document.getElementById('footerWrapper').getBoundingClientRect().height + "px"; separator.style.height = height; } setTimeout(_initializeIndexScroll, 500); });
}
function toggleAll() {
let counter = 0; let accordions = document.querySelectorAll('.accordion'); accordions.forEach((acc) => { if (acc.classList.contains('visible')) counter++; }) if (counter < accordions.length) { $('.accordion').addClass('visible'); document.getElementById('toggleAccordion').innerHTML = 'close all' } else { $('.accordion').removeClass('visible'); document.getElementById('toggleAccordion').innerHTML = 'expand all' } setTimeout(_initializeIndexScroll, 500);
}
$(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); });
});