let introEl = document.querySelector('.intro');
let logoEl = document.querySelector('.logo');
let logoSpanEls = document.querySelectorAll('.logo-parts');
window.addEventListener('DOMContentLoaded', () => {
// Code remains unchanged below:
setTimeout(() => {
logoSpanEls.forEach((span, index) => {
setTimeout(() => {
span.classList.add('active');
}, (index + 1) * 100);
});
setTimeout(() => {
logoSpanEls.forEach((span, index) => {
setTimeout(() => {
span.classList.remove('active');
span.classList.add('fade');
}, (span + 1) * 50);
});
}, 2500);
setTimeout(() => {
introEl.style.top = '-100vh';
}, 2500);
// Additional code inserted:
document.body.style.overflow = "hidden";
setTimeout(() => {
document.body.style.overflow = "";
}, 2500);
});
});
<div class="logo">Logo <span class="logo-parts">parts</span></div>
<div class="intro">
Intro
<br><br> Dummy text so this works:
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat enim vitae sapien consequat tincidunt. Integer luctus maximus lacinia. Vivamus efficitur varius sagittis. In accumsan, augue nec imperdiet dignissim, lacus tellus tincidunt
felis, non viverra erat magna rutrum libero. Nam ut vehicula lectus, sed bibendum sapien. Suspendisse pulvinar urna id euismod hendrerit. Aliquam id commodo neque, eget tempus justo. Donec pulvinar mi non nunc pretium tempus. Nunc vitae mauris non elit
cursus rutrum vel ut eros. Vestibulum tempus enim lacus, nec finibus nunc dapibus at. Sed eu malesuada erat. Nulla posuere dolor at hendrerit sodales ... [truncated for brevity]</answer1>
<exanswer1><div class="answer accepted" i="73442560" l="4.6" c="1661147098" a="YXNkZjQuMTUxNTg=" ai="15478935">
<p><div>
<div>
<pre class="lang-js"><code>const introductionVar = document.querySelector('.intro-div');
const logoElementVar = document.querySelector('.brand-logo');
const logoParts = document.querySelectorAll('.logo-sections');
window.addEventListener('DOMContentLoaded', () => {
// This part is left as is:
setTimeout(() => {
logoParts.forEach((part, index) => {
setTimeout(() => {
part.classList.add('active-part');
}, (index + 1) * 100);
});
setTimeout(() => {
logoParts.forEach((part, index) => {
setTimeout(() => {
part.classList.remove('active-part');
part.classList.add('fading-part');
}, (part + 1) * 50);
});
}, 2500);
setTimeout(() => {
introductionVar.style.top = '-100vh';
}, 2500);
// The following lines were added:
document.body.style.overflow = "hidden";
setTimeout(() => {
document.body.style.overflow = "";
}, 2500);
});
});
<div class="brand-logo">Brand Logo <span class="logo-sections">sections</span></div>
<div class="intro-div">
Introduction
<br><br> Placeholder text to make things work properly:
<br><br> More content goes here lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut ornare mauris vel condimentum feugiat. Maecenas ante turpis, congue quis facilisis non, fermentum et est. Curabitur vestibulum venenatis eros, in semper
ex blandit ac. Quisque sed velit sagittis, laoreet purus sit amet, sollicitudin tortor. Ut interdum leo vel mi suscipit, et faucibus magna convallis.
</div>