MIF_E31211891/public/assets/landingpage/script.js

117 lines
2.8 KiB
JavaScript

/* ----- NAVIGATION BAR FUNCTION ----- */
function myMenuFunction(){
var menuBtn = document.getElementById("myNavMenu");
if(menuBtn.className === "nav-menu"){
menuBtn.className += " responsive";
} else {
menuBtn.className = "nav-menu";
}
}
/* ----- ADD SHADOW ON NAVIGATION BAR WHILE SCROLLING ----- */
window.onscroll = function() {headerShadow()};
function headerShadow() {
const navHeader =document.getElementById("header");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
navHeader.style.boxShadow = "0 1px 6px rgba(0, 0, 0, 0.1)";
navHeader.style.height = "70px";
navHeader.style.lineHeight = "70px";
} else {
navHeader.style.boxShadow = "none";
navHeader.style.height = "90px";
navHeader.style.lineHeight = "90px";
}
}
/* ----- TYPING EFFECT ----- */
var typingEffect = new Typed(".typedText",{
strings : ["SIMANTA"],
loop : true,
typeSpeed : 100,
backSpeed : 80,
backDelay : 2000
})
/* ----- ## -- SCROLL REVEAL ANIMATION -- ## ----- */
const sr = ScrollReveal({
origin: 'top',
distance: '80px',
duration: 2000,
reset: true
})
/* -- HOME -- */
sr.reveal('.featured-text-card',{})
sr.reveal('.featured-name',{delay: 100})
sr.reveal('.featured-text-info',{delay: 200})
sr.reveal('.featured-text-btn',{delay: 200})
sr.reveal('.social_icons',{delay: 200})
sr.reveal('.featured-image',{delay: 300})
/* -- PROJECT BOX -- */
sr.reveal('.project-box',{interval: 200})
/* -- HEADINGS -- */
sr.reveal('.top-header',{})
/* ----- ## -- SCROLL REVEAL LEFT_RIGHT ANIMATION -- ## ----- */
/* -- ABOUT INFO & CONTACT INFO -- */
const srLeft = ScrollReveal({
origin: 'left',
distance: '80px',
duration: 2000,
reset: true
})
srLeft.reveal('.about-info',{delay: 100})
srLeft.reveal('.contact-info',{delay: 100})
/* -- ABOUT SKILLS & FORM BOX -- */
const srRight = ScrollReveal({
origin: 'right',
distance: '80px',
duration: 2000,
reset: true
})
srRight.reveal('.skills-box',{delay: 100})
srRight.reveal('.form-control',{delay: 100})
/* ----- CHANGE ACTIVE LINK ----- */
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
const scrollY = window.scrollY;
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 50,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
} else {
document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)