A simple text effect with jQuery and tiny CSS.
Textyle.js requires jQuery and textyle.js ( or textyle.min.js).
Easing pattern can be extended by jquery.easing.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="textyle.min.js"></script>
$('target').textyle();
opacity: 0;
-
translate effect position: relative; top: xxx; left: xxx;
-
fade effect opacity: 0;
target {
opacity: 0;
}
target span {
/* translate effect */
position: relative;
top: 10px;
left: 10px;
/* fade effect */
opacity: 0;
}
You can choose some following options or add callback function.
Values below is default.
$('target').textyle({
duration : 400,
delay : 100,
easing : 'swing',
callback : null
});
Easing property can be extended by jquery.easing.js.
If you want , add reading script below next to jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
$('target').textyle({
duration : 600,
delay : 150,
easing : 'linear',
callback : function(){
$(this).css({
color : 'coral',
transition : '1s',
});
}
});