53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
|
document.addEventListener('alpine:init', () => {
|
||
|
|
Alpine.data('navigation', () => ({
|
||
|
|
menuStates: {
|
||
|
|
about: false,
|
||
|
|
work: false,
|
||
|
|
contact: false
|
||
|
|
},
|
||
|
|
toggleSubmenu(menu) {
|
||
|
|
this.menuStates[menu] = !this.menuStates[menu];
|
||
|
|
Object.keys(this.menuStates).forEach(key => {
|
||
|
|
if (key !== menu) this.menuStates[key] = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
|
||
|
|
Alpine.data('mainApp', () => ({
|
||
|
|
images: [],
|
||
|
|
currentImageIndex: null,
|
||
|
|
async init() {
|
||
|
|
const response = await fetch('data.json');
|
||
|
|
const data = await response.json();
|
||
|
|
this.images = data.images;
|
||
|
|
this.currentImageIndex = Math.floor(Math.random() * this.images.length);
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.startImageAnimation();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getRandomIndex() {
|
||
|
|
let newIndex;
|
||
|
|
do {
|
||
|
|
newIndex = Math.floor(Math.random() * this.images.length);
|
||
|
|
} while (newIndex === this.currentImageIndex && this.images.length > 1);
|
||
|
|
return newIndex;
|
||
|
|
},
|
||
|
|
startImageAnimation() {
|
||
|
|
const img = document.querySelector('.hero img');
|
||
|
|
img.classList.add('zooming');
|
||
|
|
|
||
|
|
img.addEventListener('animationend', () => {
|
||
|
|
img.classList.add('fade-out');
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
this.currentImageIndex = this.getRandomIndex();
|
||
|
|
img.classList.remove('zooming', 'fade-out');
|
||
|
|
setTimeout(() => {
|
||
|
|
img.classList.add('zooming');
|
||
|
|
}, 50);
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
});
|