Skip to content

Instantly share code, notes, and snippets.

@chrisle
Created January 12, 2022 08:27
Show Gist options
  • Save chrisle/be00011e22a7448dad6ae8121d5747e3 to your computer and use it in GitHub Desktop.
Save chrisle/be00011e22a7448dad6ae8121d5747e3 to your computer and use it in GitHub Desktop.
Groovy text fade in script
.container
.intro Heres a quick script for y'all!
.sub Use it to animate in boring text
.dash -----------------------------------------------
.desc Comes with 2 pre-built effects
.fade Fade in some text
.bounce Bounce in some text
.dash2 -----------------------------------------------
.usage textify(element,method,delay)
split = function (element) {
words = $(element).text().split('');
for (i in words) {
words[i] = '<span>' + words[i] + '</span>';
}
text = words.join('');
$(element).html(text);
};
textify = function(element,method,delay) {
split(element);
$(element + ' span').css('opacity','0')
$(element + ' span').css('position','relative');
in_speed = 10;
count = 0;
setTimeout(function(){
count = 0;
$(element + ' span').each(function () {
if(method == 'fade'){
$(this).delay(0 + in_speed * count).animate({ opacity: '1' }, 200);
} else if(method == 'bounce'){
$(this).delay(0 + in_speed * count).animate({ opacity: '1','top':'-4px'}, 220,'easeOutCubic');
$(this).delay(0 + in_speed * count/4).animate({ opacity: '1','top':'0px'}, 220);
}
count++;
});
},delay);
};
/* Now textify! */
textify('.intro','fade',500);
textify('.sub','bounce',1500);
textify('.dash','fade',2500);
textify('.desc','fade',3500);
textify('.fade','fade',4500);
textify('.bounce','bounce',5500);
textify('.dash2','fade',6500);
textify('.usage','fade',7500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
/* Base Fonts */
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
body{
background:#4A6E8C;
font-family:oswald;
color:white;
text-transform:uppercase;
text-align:center;
.container{
position:absolute;
top:50%;
transform:translateY(-50%);
left:0;
right:0;
}
.intro{
font-size:30px;
}
.sub{
font-size: 26px;
letter-spacing: 1.4px;
margin-top: -4px;
color: #94C9F5;
}
.desc{
font-size: 27px;
letter-spacing: 1.23px;
margin-top: 4px;
color: #FFCB00;
}
.fade{
font-size: 53px;
margin-top: -14px;
}
.bounce{
font-size: 44.5px;
margin-top: -18px;
color: #F99323;
}
.dash2{
margin-top:-10px;
}
.usage{
font-size: 30px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment