Skip to content

Instantly share code, notes, and snippets.

@Adefful

Adefful/index.html

Created August 26, 2019 18:24
Show Gist options
  • Save Adefful/78818f2d6d4efea350a8ffeb190ceb70 to your computer and use it in GitHub Desktop.
Save Adefful/78818f2d6d4efea350a8ffeb190ceb70 to your computer and use it in GitHub Desktop.
Download ZIP
Text Animation Light
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="middle">
<div class="text">Click this </div>
<p>Please, Like</p>
</div>
</body>
</html>
Raw
script.js
var textArr = $('.text').text().split('');
$('.text').html('');
$.each(textArr, function(i, v){
$('.text').append('<div class="word">'+v+'</div>');
})
($(".word").click(function(){
$(".word").each( (i, el) =>
setTimeout( (el) =>$(el).toggleClass("black"), 500 +200*i, el ) );
$(".word").each( (i, el) =>
setTimeout( (el) =>$(el).toggleClass("black"), 1500 +200*i, el ) );
}
));
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Raw
style.sass
$bg: #131419
$cl: #303030
$cl-l:#DDDDE7
body
background-color: $bg
color: $cl
height: 100%
.middle
display: flex
justify-content: center
.text
font-size: 120px
text-transform: uppercase
font-weight: 600
text-decoration: none
list-style-type: none
.word
display: inline
.black
transition: .3s
text-shadow: 0px 0px 20px rgba(255,255,255,.6)
color: $cl-l
Raw
text-animation-light.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment