Skip to content

Instantly share code, notes, and snippets.

@philwilliammee

philwilliammee/animated_text.html

Created February 7, 2018 09:15
Show Gist options
  • Save philwilliammee/e972ab15f557d24a684fce711ebd2e01 to your computer and use it in GitHub Desktop.
Save philwilliammee/e972ab15f557d24a684fce711ebd2e01 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animated_text.html
<!DOCTYPE html>
<html>
<head>
<style>
.animated .text{
list-style: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.animated .text li{
display: inline-block;
opacity: 1;
transition: all 2s ease;
}
.animated .text.hidden li:nth-child(1){
transform: translateX(-200px) translateY(-200px);
}
.animated .text.hidden li:nth-child(2){
transform: translateX(-100px) translateY(-100px);
}
.animated .text.hidden li:nth-child(3){
transform: translateX(300px) translateY(-300px);
}
.animated .text.hidden li:nth-child(4){
transform: translateX(-200px) translateY(200px);
}
.animated .text.hidden{
opacity:0.5;
}
</style>
</head>
<body
<div class="animated">
<ul class="text hidden">
<li>T</li>
<li>E</li>
<li>S</li>
<li>T</li>
</ul>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
setTimeout(function(){
$(".text").removeClass("hidden")
},100)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment