All Source Code : https://www.patreon.com/onlinetutorials Get now more than 1000+ source code just by clicking on this link …
source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Scroll Animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h2 class="text">Scroll to See Magic...</h2>
</div>
<script>
let textElement = document.querySelector('.text');
let textContent = textElement.textContent;
textElement.innerHTML = '';
let spans = [];
for (let char of textContent){
let span = document.createElement('span');
span.textContent = char;
textElement.appendChild(span);
spans.push(span);
}
// add scroll event listener
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
spans.forEach((span, index) => {
if (scrollDistance >= (index + 1) * 50){
span.style.transform = `translate(${index * 20}px,0)`;
span.classList.add('active');
} else
{
span.style.transform = `translate(${Math.random() * 100 - 50}vw, ${Math.random() * 100 - 50}vh)`;
span.classList.remove('active');
}
})
})
// Trigger initial random position
window.dispatchEvent(new Event('scroll'));
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 300vh;
background: #333;
}
.box
{
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 440px;
padding: 0 0 25px;
}
.box span
{
position: absolute;
color: transparent;
-webkit-text-stroke: 0.5px #fff;
font-size: 1.5em;
transition: 0.25s;
}
.box span.active
{
color: #0f0;
-webkit-text-stroke: 0.5px #fff0;
text-shadow: 0 0 10px #0f0,
0 0 30px #0f0,
0 0 60px #0f0;
}
