Title Swap
A Pen by Ben Sheppard on CodePen.
<div class="titleWrapper"> | |
<h1 class="first">Flatking</h1> <h1 class="second">Navigation</h1> | |
</div> | |
jQuery(document).ready(function(){ | |
jQuery(".titleWrapper").addClass("ready"); | |
jQuery(".titleWrapper h1").each(function(){ | |
var fullString; | |
var characters = jQuery(this).text().split(""); | |
$this = jQuery(this); | |
$this.empty(); | |
$.each(characters, function (i, el) { | |
if(el == " "){el = " "}; | |
$this.append("<span>" + el + "</span"); | |
}); | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
@import url('https://fonts.googleapis.com/css?family=Montserrat'); | |
body{ | |
background:#fafafa; | |
font-size:0; | |
position: relative; | |
height:500px; | |
} | |
.titleWrapper{ | |
position:absolute; | |
top:0; | |
left:0; | |
right:0; | |
bottom:0; | |
margin: auto; | |
text-align:center; | |
height:80px; | |
overflow:hidden; | |
width: 100%; | |
text-align:center; | |
} | |
h1{ | |
color:#292929; | |
font-size: 80px; | |
margin:0; | |
padding:0; | |
line-height:80px; | |
height:80px; | |
position: relative; | |
font-family: 'Montserrat', sans-serif; | |
text-transform: uppercase; | |
word-space: 4em; | |
letter-spacing: 0.05em; | |
} | |
h1 span{ | |
position: relative; | |
display: inline-block; | |
transform: translateY(100%); | |
transition: all 0.25s cubic-bezier(0.65, 0, 0.21, 1.47) 0s; | |
} | |
.titleWrapper.ready h1 span{ | |
transform: translateY(0%); | |
} | |
h1.first span{ | |
background:#fafafa; | |
position:relative; | |
z-index:5; | |
} | |
h1.second span{ | |
position:relative; | |
z-index:1; | |
} | |
$num: 1; | |
@while $num < 20 { | |
h1.first span:nth-of-type(#{$num}) { | |
transition-delay: 0.02s * $num; | |
} | |
h1.second span:nth-of-type(#{$num}) { | |
transition-delay: 0.03s * $num + 0.05; | |
} | |
$num: $num + 1; | |
} | |
.titleWrapper.ready:hover h1.first span{ | |
transform: translateY(-100%); | |
} | |
.titleWrapper.ready:hover h1.second span{ | |
transform: translateY(-100%); | |
} |
A Pen by Ben Sheppard on CodePen.
Thanks for sharing!
I noticed your code won't work in strict mode. That's simply because you forgot to put a var statement on $this variable creation.
You can have a look here to see my revision:
https://gist.github.com/naimkhalifa/283ec1145d5c1c055b904302c6a1932e/revisions