<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js