Vertical Split Layout Text Effect

HTML
<h1 data-heading="Pick a Side">Pick a Side</h1>
SCSS
html, body { background: linear-gradient(to right, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); height: 100%; } h1 { font-size: 10vw; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute; color: #fff; white-space: nowrap; &:before { content: attr(data-heading); overflow: hidden; position: absolute; left: 0; width: 50%; color: #000; } }
JAVASCRIPT
Expand for more options Login