Who can explain how to use it? In the demo source there are such lines:

// Initialize var txt = new TextFx(this.el.querySelector('.title')); // Show letters: // txt.show([effect] [,callback]);

So I understand the top is an example of initialization, and below is an example of using "show" here, but there is no documentation, or have I not found what to substitute in the "effect"? callback so I can skip.

my code looks something like this:

html:

 <h1>Hello world</h1>

js:

 var txt = new TextFx($('h1')); txt.show();

Plugin files are connected in this order:

 'libs/jquery/dist/jquery.min.js', /libs/letterEffects-master/js/charming.min.js', 'libs/letterEffects-master/js/anime.min.js', 'libs/letterEffects-master/js/lineMaker.js', 'libs/letterEffects-master/js/imagesloaded.pkgd.min.js', 'libs/letterEffects-master/js/textfx.js', 'js/common.js', // мой файл скрипта где неудачно пытаюсь вызвать плагин)

    2 answers 2

    First of all

    Substitute in the "effect" callback so I understand you can skip.

    Yes you can, but the animation will not.

    If nothing is passed, then no animation.

    Secondly , TextFx() does not eat jQuery objects, therefore:

     var txt = new TextFx( $('.title')[0] );

    And thirdly , to show an object, you must first hide it:

     txt.hide() //тут как раз без анимации txt.show('fx1') 

     (function() { var txt = new TextFx( $('.title')[0] ); txt.hide() txt.show('fx1') })(); 
     .title { font-size: 30px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://tympanus.net/Development/LetterEffects/js/charming.min.js"></script> <script src="https://tympanus.net/Development/LetterEffects/js/anime.min.js"></script> <script src="https://tympanus.net/Development/LetterEffects/js/lineMaker.js"></script> <script src="https://tympanus.net/Development/LetterEffects/js/imagesloaded.pkgd.min.js"></script> <script src="https://tympanus.net/Development/LetterEffects/js/textfx.js"></script> <div class="title">Тестовый заголовок</div>

    • Thank you for taking the right path) otherwise I am stupid, I understand correctly? is it not a plugin, but just examples of effects, using several plugins? including anime.js, in which 10+ cross-browser compatibility is probably what I wanted to do (it’s better to drop letters from top to bottom from scratch) and I did, looped through each letter inside h1 and stuck it in a span of js and in turn top with opacity I animate, "animate" in jqery understands IE9 which is good. If I'm in something wrong, I will be happy with the advice, or the hint of an alternative implementation. Thank you - junior-web-dev
    • @ junior-web-dev maybe yes, upload libraries libraries to make one pretty simple animation too bold for web traffic - Crantisz
    • Any idea why your fx1 animation is different from the animation in the example? - Denis Denis

    I decided to write from scratch (if someone come in handy) :

     <h1>Привет мир</h1> //letterEffect(element,speed,delay); function letterEffect (element,speed,delay){ element.css("opacity","0"); setTimeout(function(){ element.css("opacity","1"); var el = element; var sp = speed; var output = ""; for (var i = 0; i < el.text().length; i++) { if(el.text()[i] != " "){ output = output + '<span class="js-letters">'+el.text()[i]+'</span>'; } else{ output = output +" "; } } el.html(output); el.children(".js-letters").css({ position: "relative", top: "-20px", opacity: 0 }) var countLetterAnim = 0; anim(); function anim () { $(el.children(".js-letters")[countLetterAnim]).animate({ top: "0px", opacity: 1 },sp,function(){ if(el.text().length != countLetterAnim){ countLetterAnim++ anim() } sp = sp - sp / 100 }); } }, delay); } letterEffect($("h1"), 200, 300);