How to Create Sliding Text Effect Using CSS and JavaScript
2 min read
Sliding Text Effect Using CSS and JavaScript
If you want to Create a Sliding Text Effect, use CSS and Javascript. It will help improve your visitors well time. The Sliding Text Effect will encourage visitors to see what your site has to offer and makes your page more dynamic. It also boosts your brand reputation.
Here we will learn How to Create Sliding Text effect using CSS and JavaScript
Include these two CSS files
https://fonts.googleapis.com/css?family=Montserrat:900&display=swap
https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
Javascript Code
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('resize', handleWindowResize);
const spansSlow = document.querySelectorAll('.spanSlow');
const spansFast = document.querySelectorAll('.spanFast');
let width = window.innerWidth;
function handleMouseMove(e) {
let normalizedPosition = e.pageX / (width/2) - 1;
let speedSlow = 100 * normalizedPosition;
let speedFast = 200 * normalizedPosition;
spansSlow.forEach((span) => {
span.style.transform = `translate(${speedSlow}px)`;
});
spansFast.forEach((span) => {
span.style.transform = `translate(${speedFast}px)`
})
}
//we need to recalculate width when the window is resized
function handleWindowResize() {
width = window.innerWidth;
}
CSS code: Sliding Text Effect Using CSS and JavaScript
.line {
width: 100vw;
}
.left, .right {
width: 50vw;
overflow: hidden;
display: inline-block;
}
.left {
color:pink;
-webkit-transform: skew(0deg, -15deg);
transform: skew(0deg, -15deg);
}
.right {
color: black;
-webkit-transform: skew(0deg, 15deg);
transform: skew(0deg, 15deg);
}
.left .content {
width: 100vw;
text-align: center;
}
.right .content {
width: 100vw;
text-align: center;
-webkit-transform: translate(-50vw);
transform: translate(-50vw);
}
span {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 10vw;
text-transform: uppercase;
line-height: .8;
transition: ease-out .6s;
}
HTML code
<h1>How to Create Sliding Text Effect Using CSS and JavaScript</h1>
<div class="wrap">
<div class="line">
<div class="left">
<div class="content">
<span class="spanSlow">Ask-me.in</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanSlow">Ask-me.in</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="content">
<span class="spanSlow">Tips and Tricks</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanSlow">Tips and Tricks</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="content">
<span class="spanFast">Visit</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanFast">Visit</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="content">
<span class="spanSlow">Daily</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanSlow">Daily</span>
</div>
</div>
</div>
</div>
Result
Download Source Code
About Post Author
