Hover JS Experiment

HTML
<h1>HOVER ME!</h1>
SCSS
html, body { text-align: center; background: #9b59b6; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } h1 { text-transform: uppercase; font-size: 120px; color: white; text-shadow: 10px 10px 0 rgba(0,0,0,0.2); } h1 span { position: relative; top: 0; transition: all 10s; } h1 span:hover { top: -100px; transition: all .2s linear; cursor: pointer; }
JAVASCRIPT
var text = $('h1').text(); var spans = "<span>" + text.split('').join('</span><span>')+ "</span>"; $('h1').html(spans);
Expand for more options Login