Help with textillate text animation library

Question

Help with textillate text animation library

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Good day programmers, I am trying to implement a known library of text animation called textillate, documentation: link

Well, I do not know if the problem is of includes or I'll be having some syntax error but it's not so much science to make it work, the question is that I'm not -.-

Here I leave the html code clean, and as well as this I would have to use the default animation. But it does not work ..

Any help is appreciated!

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="textillate/assets/jquery.lettering.js"></script>  
    <script src="textillate/jquery.textillate.js"></script>
    <link rel="stylesheet" href="textillate/assets/animate.css">
    <script type="text/javascript">
$(function () {
    $('.demo').textillate();
})
  </script>
<body>
  
<!-- texto animado -->
<div class="demo">
    <p>Gracias stackoverflow :D</p>
</div>

<!-- fin texto animado -->


	

</body>
</html>

javascript jquery html css

asked by Juampi 23.03.2018 в 16:03

source

2 answers

0

From what I see I think the error may be in your libraries and the positioning of the jquery libraries, so I made an example by taking your code, it works for me, look for the cdn of the dependencies of each one. I put the libraries js below, the css in the head that is how it should be.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    
<body>
  
<!-- texto animado -->
<div class="demo">
    <p>Gracias stackoverflow :D</p>
</div>

<!-- fin texto animado -->


	
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>
<script type="text/javascript">
	$(function () {
	    $('.demo').textillate();
	});
  </script>
  
</body>
</html>

PS: I put a more updated library of jquery. To work locally your libraries download the files again or go to the cdn link and copy the code into js files that you create.

answered by 23.03.2018 в 16:45

difference between the use of functions, views, triggers and stored procedures in sql server and mysql Variable assigned within the post in axios travel empty

score 1 · Accepted Answer

Based on the errors I got in your code

It was Jquery's version

It gave an error per console with $(function() {

So I included the CDN and it was solved, your code was good

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
    <script type="text/javascript">
    $(function() {
        	$('.demo').textillate({ in: { effect: 'rollIn' } });
		});
  </script>
  </head>
<body>
  
<!-- texto animado -->
<div class="demo">
    Gracias stackoverflow :D
</div>