Support
Quality
Security
License
Reuse
kandi has reviewed textillate and discovered the below as its top functions. This is intended to give you an instant insight into textillate implemented functionality, and help decide if they suit your requirements.
A jquery plugin for CSS3 text animations.
Usage
<h1 class="tlt">My Title</h1>
Options
$('.tlt').textillate({
// the default selector to use when detecting multiple texts to animate
selector: '.texts',
// enable looping
loop: false,
// sets the minimum display time for each text before it is replaced
minDisplayTime: 2000,
// sets the initial delay before starting the animation
// (note that depending on the in effect you may need to manually apply
// visibility: hidden to the element before running this plugin)
initialDelay: 0,
// set whether or not to automatically start animating
autoStart: true,
// custom set of 'in' effects. This effects whether or not the
// character is shown/hidden before or after an animation
inEffects: [],
// custom set of 'out' effects
outEffects: [ 'hinge' ],
// in animation settings
in: {
// set the effect name
effect: 'fadeInLeftBig',
// set the delay factor applied to each consecutive character
delayScale: 1.5,
// set the delay between each character
delay: 50,
// set to true to animate all the characters at the same time
sync: false,
// randomize the character sequence
// (note that shuffle doesn't make sense with sync = true)
shuffle: false,
// reverse the character sequence
// (note that reverse doesn't make sense with sync = true)
reverse: false,
// callback that executes once the animation has finished
callback: function () {}
},
// out animation settings.
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
reverse: false,
callback: function () {}
},
// callback that executes once textillate has finished
callback: function () {},
// set the type of token to animate (available types: 'char' and 'word')
type: 'char'
});
Events
$('.tlt').on('inAnimationBegin.tlt', function () {
// do something
});
jQuery Textillate options not creating the expected result
<!DOCTYPE html>
<html>
<head>
<link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" />
<style>
.infobtn {
width: 100%;
height: 100%;
position: relative;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
color: #f00;
}
.btneffect .infobtn2 {
position: absolute;
bottom: 0;
color: #000;
}
.btneffect {
border-bottom: 1px solid #f00;
}
</style>
</head>
<body>
<div class="btneffect corpri1 letra14 bold">
<div class="infobtn animate corpri1">Todos os produtos</div>
<div class="infobtn2 animate preto">Todos os produtos</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<script src="http://textillate.js.org/jquery.textillate.js"></script>
<script>
$(function () {
var textilateoptions = {
autoStart: true,
// in animation settings
in: {
// set the effect name
effect: "fadeInUp",
// set the delay factor applied to each consecutive character
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// out animation settings.
out: {
effect: "fadeOutUp",
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// set the type of token to animate (available types: 'char' and 'word')
type: "char",
};
$(".btneffect .infobtn").textillate(textilateoptions);
textilateoptions.autoStart = false;
$(".btneffect .infobtn2").textillate(textilateoptions);
$(".btneffect").hover(
function () {
$(this).find(".infobtn").textillate("out");
$(this).find(".infobtn2").textillate("in");
},
function () {
$(this).find(".infobtn").textillate("in");
$(this).find(".infobtn2").textillate("out");
}
);
});
</script>
</body>
</html>
-----------------------
// set to true to animate all the characters at the same time
sync: false,
Textillate JS-JQuery animation is not the selected one (and always the same)
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>
-----------------------
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>
QUESTION
jQuery Textillate options not creating the expected result
Asked 2021-Nov-19 at 07:06I have this textillate options set, already tried some examples on the web but no animation is running, on what I think is the correct. The objective is to create a button where the first text element goes fadeOutUp letter by letter randomly, and the second text goes fadeInUp randomly as well, this is what I'v tried:
var textilateoptions = {
autoStart: true,
// in animation settings
in: {
// set the effect name
effect: 'fadeInUp',
// set the delay factor applied to each consecutive character
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// out animation settings.
out: {
effect: 'fadeOutUp',
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// set the type of token to animate (available types: 'char' and 'word')
type: 'char'
};
$('.btneffect .infobtn').textillate(textilateoptions);
textilateoptions.autoStart = false;
$('.btneffect .infobtn2').textillate(textilateoptions);
$('.btneffect').hover(function(){
$(this).find(".infobtn").textillate('out');
$(this).find(".infobtn2").textillate('in');
},function(){
$(this).find(".infobtn").textillate('in');
$(this).find(".infobtn2").textillate('out');
});
Codepen example here
ANSWER
Answered 2021-Oct-29 at 00:30Textillate's github page lists a few dependencies like lettering.js
and animate.css
. You might be missing the animate.css file as when I added the line <link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" />
to your Codepen
, I could get the text moving up on mouse over. Observed something similar in a test HTML page(included below) I created with your CSS, Javascript and HTML from Codepen.
<!DOCTYPE html>
<html>
<head>
<link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" />
<style>
.infobtn {
width: 100%;
height: 100%;
position: relative;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
color: #f00;
}
.btneffect .infobtn2 {
position: absolute;
bottom: 0;
color: #000;
}
.btneffect {
border-bottom: 1px solid #f00;
}
</style>
</head>
<body>
<div class="btneffect corpri1 letra14 bold">
<div class="infobtn animate corpri1">Todos os produtos</div>
<div class="infobtn2 animate preto">Todos os produtos</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<script src="http://textillate.js.org/jquery.textillate.js"></script>
<script>
$(function () {
var textilateoptions = {
autoStart: true,
// in animation settings
in: {
// set the effect name
effect: "fadeInUp",
// set the delay factor applied to each consecutive character
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// out animation settings.
out: {
effect: "fadeOutUp",
delayScale: 20,
delay: 50,
sync: true,
shuffle: true,
reverse: false,
},
// set the type of token to animate (available types: 'char' and 'word')
type: "char",
};
$(".btneffect .infobtn").textillate(textilateoptions);
textilateoptions.autoStart = false;
$(".btneffect .infobtn2").textillate(textilateoptions);
$(".btneffect").hover(
function () {
$(this).find(".infobtn").textillate("out");
$(this).find(".infobtn2").textillate("in");
},
function () {
$(this).find(".infobtn").textillate("in");
$(this).find(".infobtn2").textillate("out");
}
);
});
</script>
</body>
</html>
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
Explore Related Topics
Save this library and start creating your kit