55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
const scroll = new LocomotiveScroll({
|
|
el: document.querySelector('#main'),
|
|
smooth: true
|
|
});
|
|
|
|
//overlay-image
|
|
function topicOverlayAnimation() {
|
|
var topic = document.querySelector(".container")
|
|
var fixed = document.querySelector("#overlay-image")
|
|
topic.addEventListener("mouseenter", function () {
|
|
fixed.style.display = "block"
|
|
})
|
|
topic.addEventListener("mouseleave", function () {
|
|
fixed.style.display = "none"
|
|
})
|
|
|
|
var topicHead = document.querySelectorAll(".topic")
|
|
topicHead.forEach(function (e) {
|
|
e.addEventListener("mouseenter", function () {
|
|
var image = e.getAttribute("data-image")
|
|
fixed.style.backgroundImage = `url(${image})`
|
|
})
|
|
})
|
|
}
|
|
topicOverlayAnimation()
|
|
|
|
//tabs
|
|
const allIndicator = document.querySelectorAll('.indicator li');
|
|
const allContent = document.querySelectorAll('.content li');
|
|
|
|
allIndicator.forEach(item=> {
|
|
item.addEventListener('click', function () {
|
|
const content = document.querySelector(this.dataset.target);
|
|
|
|
allIndicator.forEach(i=> {
|
|
i.classList.remove('active');
|
|
})
|
|
|
|
allContent.forEach(i=> {
|
|
i.classList.remove('active');
|
|
})
|
|
|
|
content.classList.add('active');
|
|
this.classList.add('active');
|
|
})
|
|
})
|
|
|
|
//loading animation
|
|
function loadingAnimation() {
|
|
var loading = document.querySelector("#loading")
|
|
setTimeout(function () {
|
|
loading.style.top = "-100%"
|
|
}, 4200)
|
|
}
|
|
loadingAnimation()
|