<!DOCTYPE HTML>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"chrome=1"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
link
href
=
"assets/animate.css"
rel
=
"stylesheet"
>
<
link
href
=
"assets/style.css"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
center
>
<
h2
style
=
"color:green"
>
GeeksforGeeks
</
h2
>
<
p
><
b
>Animate a list</
b
><
p
>
<
h3
class
=
"myClass"
>
<
ul
class
=
"myTexts"
>
<
li
data-out-effect
=
"fadeOut"
data-out-shuffle
=
"true"
>
Learn PHP
</
li
>
<
li
data-in-effect
=
"rollIn"
>
Learn CSS
</
li
>
</
ul
>
</
h3
>
<
script
src
=
</
script
>
<
script
src
=
"assets/jquery.fittext.js"
></
script
>
<
script
src
=
"assets/jquery.lettering.js"
></
script
>
<
script
src
=
"jquery.textillate.js"
></
script
>
<
script
>
$(document).ready(function () {
$('.myClass').textillate({
// Selector of multiple texts to animate
selector: '.myTexts',
// Enable looping
loop: false,
// Sets the minimum display time for
// each text before it is replaced
minDisplayTime: 3000,
// Sets the initial delay before
// starting the animation
initialDelay: 50,
// Automatically start animating
autoStart: true,
// Character is shown/hidden
// before or after animation
inEffects: [],
// Set 'out' effects
outEffects: ['hinge'],
// In animation settings
in: {
// Set the effect name
effect: 'fadeInLeftBig',
// Set the delay applied to
// each character
delayScale: 1.5,
// Set the delay between
// each character
delay: 100,
// Set to true to animate all the
// characters at the same time
sync: false,
// Randomize the character sequence
shuffle: true,
// Reverse the character sequence
reverse: true,
// Callback once the animation
// has finished
callback: function () { }
},
// Out animation settings.
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 100,
sync: false,
shuffle: true,
reverse: true,
callback: function () { }
},
// Callback once textillate
// has finished
callback: function () { },
// Set type as 'char' or
// 'word'to animate
type: 'word'
});
});
</
script
>
</
center
>
</
body
>
</
html
>