<div class="wrap">
<div class="line">
<div class="left">
<div class="content">
<span class="spanSlow">Aladdin</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanSlow">Aladdin</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="content">
<span class="spanSlow">What do</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanSlow">what do</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="content">
<span class="spanFast">you</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanFast">you</span>
</div>
</div>
</div>
<div class="line">
<div class="left">
<div class="content">
<span class="spanSlow">want</span>
</div>
</div><!--
--><div class="right">
<div class="content">
<span class="spanSlow">want</span>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.line {
width: 100vw;
}
.left, .right {
width: 50vw;
overflow: hidden;
display: inline-block;
}
.left {
color:pink;
transform: skew(0deg, -15deg);
}
.right {
color: black;
transform: skew(0deg, 15deg);
}
.left .content {
width: 100vw;
text-align: center;
}
.right .content {
width: 100vw;
text-align: center;
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;
}
// The place I saw this effect:
// https://angle2.agency/
// Red Staper made a NICE tutorial about this effect! You should check it out!
// https://www.youtube.com/watch?v=LgiadQQM6mo&t=5s
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.