I really need your help because I have always loaded scripts at the end of the body tag but I have to insert them in head and after I added Scroll Reveal it caused me problems because at 375px you can no longer see a part of navbar which is managed by “script.js”. I tried using “defer” on it, but it doesn’t work. Can you help me?
/* Navbar - change on scroll */
const nav = document.querySelector("nav");
const sectionOne = document.querySelector(".hero-section");
const sectionOneOptions = {
rootMargin: "-200px 0px 0px 0px"
};
const sectionOneObserver = new IntersectionObserver(function(
entries,
sectionOneObserver
) {
entries.forEach(entry => {
if(!entry.isIntersecting) {
nav.classList.add("nav-scrolled");
} else {
nav.classList.remove("nav-scrolled");
}
})
},
sectionOneOptions);
sectionOneObserver.observe(sectionOne);
/* Hero - text animation */
let typed = new Typed(".auto-type", {
strings: ["Developer.", "Freelancer."],
typeSpeed: 150,
backSpeed: 150,
startDelay: 900,
loop: true
})
/* Progress bar - scroll animation */
let elements_to_watch = document.querySelectorAll(".watch");
// callback
let callback = function(items) {
items.forEach((item) => {
if(item.isIntersecting) {
item.target.classList.add("active");
} /*else {
item.target.classList.remove("active");
}*/
});
}
// observer
let observer = new IntersectionObserver(callback, { threshold : 0.5 } );
// apply
elements_to_watch.forEach((element) => {
observer.observe(element);
});
/* Porfolio isotope and filter */
/* Easy selector helper function */
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/* Easy event listener function */
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item',
layoutMode: 'fitRows'
});
let portfolioFilters = select('.portfolio-flters li', true);
on('click', '.portfolio-flters li', function(e) {
e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');
portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});
}, true);
}
});
/* Glightbox */
// Initiate portfolio lightbox
const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox'
});
//Initiate portfolio details lightbox
const portfolioDetailsLightbox = GLightbox({
selector: '.portfolio-details-lightbox',
width: '90%',
height: '90vh'
});
/* Form - Email JS*/
(function(){
emailjs.init("8PWNKMuO5773e7X7P");
})();
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
sendEmail();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
function sendEmail() {
emailjs.sendForm('service_b7zg4dy', 'template_8ccl4fd', '.needs-validation')
.then(function() {
document.getElementById("messageSuccess").style.display = "block";
setTimeout(function() {
resetForm();
}, 3000);
}, function(error) {
console.error('Failed to send email:', error);
});
}
function resetForm() {
var form = document.querySelector('.needs-validation');
form.reset();
form.classList.remove('was-validated');
document.getElementById("messageSuccess").style.display = "none";
}
/* Copyright */
function updateCopyrightYear() {
var d = new Date();
var currentYear = d.getFullYear();
document.getElementById("year").innerHTML = currentYear;
}
window.requestAnimationFrame(updateCopyrightYear);
/* Scroll to top button */
const scrollTopBtn = document.querySelector(".scrollToTop-btn");
window.addEventListener("scroll", function(){
scrollTopBtn.classList.toggle("active", window.scrollY > 500);
});
ScrollReveal().reveal('.reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600});
ScrollReveal().reveal('.left-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'left'});
ScrollReveal().reveal('.right-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'right'});
ScrollReveal().reveal('.top-reveal', { distance: '100px', duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 600, origin: 'top'});
ScrollReveal().reveal('.zoom', { duration: 1500, easing: 'cubic-bezier(.215, .61, .355, 1)', interval: 200, scale: 0.65});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Personal Portfolio | Alessandra Casole </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Alessandra Casole" />
<meta name="description" content="Esplora il mio portfolio professionale online, le mie abilità , i progetti che ho realizzato e come contattarmi. Scopri come posso aiutarti a raggiungere i tuoi obiettivi attraverso le mie competenze."/>
<meta property="og:title" content="Alessandra Casole | Personal Portfolio"/>
<meta property="og:description" content="Esplora il mio portfolio professionale online, le mie abilità , i progetti che ho realizzato e come contattarmi. Scopri come posso aiutarti a raggiungere i tuoi obiettivi attraverso le mie competenze."/>
<meta property="og:image" content="./assets/img/og-image.jpg"/>
<meta property="og:url" content="URL della tua pagina"/>
<meta property="og:type" content="profile"/>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./assets/img/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon-16x16.png" />
<link rel="icon" href="./assets/img/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="./assets/img/site.webmanifest" />
<!-- Bootstrap v.5.2.3 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
<!-- Font Awesome v.6.2.1 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<!-- Glightbox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.css" />
<!-- Swiper -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.6/swiper-bundle.css" />
<!-- CSS -->
<link rel="stylesheet" href="./assets/css/style.css" />
<!-- Scripts -->
<!-- Bootstrap -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<!--Text Animation -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<!-- Isotope layout -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<!-- Glightbox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js"></script>
<!--Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.6/swiper-bundle.min.js"></script>
<!-- Email JS -->
<script defer src="https://cdn.jsdelivr.net/npm/@emailjs/[email protected]/dist/email.min.js"></script>
<!-- Scroll Reveal -->
<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
<!-- JS -->
<script defer src="./assets/js/script.js"></script>
</head>