<img src="https://images.unsplash.com/photo-1486074051793-e41332bf18fc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=650&h=400&q=80" />
<svg viewBox="0 0 211.9 104.6">
<path id="curve-1" d="M41.3,71.4V30.9c0-7.4,6-13.5,13.5-13.5h101.7c7.4,0,13.5,6,13.5,13.5v43c0,7.4-6,13.5-13.5,13.5H54.8
c-7.4,0-13.5-6-13.5-13.5"/>
<path id="curve-2" d="M176.6,33.8v42c0,9.5-7.7,17.2-17.2,17.2H51.8c-9.5,0-17.2-7.7-17.2-17.2V29c0-9.5,7.7-17.2,16.2-17.2h107.6
c10.5,0,18.2,7.7,18.2,17.2v3.5"/>
<text>
<textPath id="text-1" xlink:href="#curve-1" startOffset="0%">
Here's to the crazy ones
</textPath>
<textPath id="text-2" xlink:href="#curve-2" startOffset="75%">
Here's to the crazy ones
</textPath>
</text>
</svg>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #191919;
}
svg {
width: 50vw;
opacity: .7;
}
path {
fill: transparent;
}
img {
position: fixed;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30vw;
}
text {
font-size: 8px;
fill: transparent;
stroke: #fff;
stroke-width: 0.3;
font-family: arial, cursive;
font-weight: bold;
}
#text-1 {
fill: #fff;
stroke: none;
}
View Compiled
const scale = (a, b, c, d, e) => {
return (a - b) * (e - d) / (c - b) + d
}
const text1 = document.getElementById('text-1')
const text2 = document.getElementById('text-2')
const crazy = e => {
const x = e.clientX || e.touches[0].clientX
TweenMax.to(text1, .6, {
attr: {
startOffset: `${scale(x, 0, window.innerWidth, 0, 75)}%`
},
ease: Power3.easeOut,
})
TweenMax.to(text2, .8, {
attr: {
startOffset: `${scale(x, 0, window.innerWidth, 75, 0)}%`
},
ease: Power3.easeOut,
})
}
['mousemove', 'touchstart', 'touchmove'].forEach(e => {
window.addEventListener(e, crazy);
});
View Compiled
This Pen doesn't use any external CSS resources.