Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created March 28, 2017 03:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save CodeMyUI/685ccba988ede63d356a0eec87ff9f11 to your computer and use it in GitHub Desktop.
Save CodeMyUI/685ccba988ede63d356a0eec87ff9f11 to your computer and use it in GitHub Desktop.
Title Swap
<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 = "&nbsp;"};
$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%);
}
@naimkhalifa
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment