89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
function toggleMenu(el) {
|
|
let nav = document.querySelector('nav');
|
|
el.classList.toggle('open');
|
|
nav.classList.toggle('open');
|
|
}
|
|
|
|
function toggleAbout() {
|
|
let arrow = document.querySelector('#about-arrow');
|
|
let aboutContent = document.querySelector('#about-hidden');
|
|
aboutContent.classList.toggle('open');
|
|
arrow.classList.toggle('open');
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
let body = document.querySelector('body');
|
|
if (document.querySelector('.swiper')) {
|
|
body.style.overflowY = "hidden";
|
|
} else {
|
|
body.style.overflowY = "auto";
|
|
}
|
|
let swiperEl = document.querySelector('.swiper');
|
|
if (swiperEl) {
|
|
swiperEl.style.opacity = 1;
|
|
resizeVerticalImages();
|
|
}
|
|
initSwiper();
|
|
barba.init({
|
|
transitions: [{
|
|
name: 'opacity-transition',
|
|
leave(data) {
|
|
return gsap.to(data.current.container, {
|
|
opacity: 0
|
|
})
|
|
},
|
|
enter(data) {
|
|
return gsap.from(data.next.container, {
|
|
opacity: 0
|
|
})
|
|
}
|
|
}]
|
|
});
|
|
barba.hooks.before((data) => {
|
|
if (swiperEl) {
|
|
swiperEl.style.opacity = 0;
|
|
}
|
|
});
|
|
barba.hooks.after((data) => {
|
|
swiperEl = document.querySelector('.swiper');
|
|
if (swiperEl) {
|
|
if (document.querySelector('.swiper') && !document.querySelector('.swiper-initialized')) {
|
|
initSwiper();
|
|
body.style.overflowY = "hidden";
|
|
}
|
|
swiperEl.style.opacity = 1;
|
|
} else {
|
|
body.style.overflowY = "auto";
|
|
}
|
|
resizeVerticalImages();
|
|
});
|
|
})
|
|
|
|
function initSwiper() {
|
|
let swiper = new Swiper('.swiper', {
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
});
|
|
}
|
|
|
|
function resizeVerticalImages() {
|
|
let verticalImages = document.querySelectorAll('.swiper-slide > img');
|
|
let imagesIndex = 0;
|
|
for (let img of verticalImages) {
|
|
imagesIndex++;
|
|
img.addEventListener('load', () => {
|
|
if (img.clientHeight > img.clientWidth) {
|
|
img.style.width = "50%";
|
|
}
|
|
})
|
|
if (imagesIndex === verticalImages.length) {
|
|
swiperSlideEls = document.querySelectorAll('.swiper-slide');
|
|
for (let swiperSlideEl of swiperSlideEls) {
|
|
swiperSlideEl.style.maxHeight = "unset";
|
|
}
|
|
}
|
|
}
|
|
} |