Bended Text Effect

HTML
<div class="wrapper"> <h1 data-heading="It Bends">It Bends</h1> </div>
SCSS
html, body { height: 100%; background: #1a5c9a; font-family: 'Oswald', sans-serif; overflow: hidden; } .wrapper { width: 100%; height: 100%; background: linear-gradient(to right, rgba(160,209,255,1) 0%,rgba(160,209,255,1) 1%,rgba(0,0,0,0) 100%); overflow: hidden; &::before { content: ""; background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 19%,rgba(0,0,0,0) 19%); width: 50%; left: 50%; height: 100%; position: absolute; z-index: 10; } } h1 { color: transparent; text-transform: uppercase; text-align: center; white-space: nowrap; font-size: 20vw; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute; font-weight: 900; &:after { content: attr(data-heading); position: absolute; left: 0; top: 0; overflow: hidden; color: #2a3842; width: 50%; } &:before { content: attr(data-heading); position: absolute; left: 0; top: 0; overflow: hidden; color: #071a28; width: 100%; clip-path: polygon(100% 0, 50% 0, 50% 100%, 100% 100%); transform: perspective( 600px ) rotateY( 70deg ); } }
JAVASCRIPT
Expand for more options Login