Как подключить плагин “Letter Effects” js, jqery

316
22 февраля 2017, 23:24

Кто может объяснить как его использовать? в демо исходниках есть такие строчки:

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

так понимаю верх это пример инициализации, а снизу пример использования "показать" вот но нет документации или я не нашел, что подставлять в "effect" ? callback так понимаю можно пропустить.

мой код выглядит как то так:

html:

<h1>Hello world</h1>

js:

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

Файлы плагина подключаю в таком порядке:

'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', // мой файл скрипта где неудачно пытаюсь вызвать плагин)
Answer 1

Во-первых

подставлять в "effect" callback так понимаю можно пропустить.

Да можно, но анимации не будет.

If nothing is passed, then no animation.

Во-вторых, TextFx() не ест jQuery объекты, поэтому так:

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

И в-третьих, чтобы объект показать, нужно его сначала скрыть:

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>

Answer 2

Решил написать с нуля (вдруг кому пригодиться) :

<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);
READ ALSO
Не верно работает JS

Не верно работает JS

Здравствуйте! Я в JS ничего не понимаю, но жизнь требуетДелаю интуитивно и с помощью гугла

247
Как при клике изменить стили dom-элемента?

Как при клике изменить стили dom-элемента?

Работаю с этой библиотекойК сожалению, между блоками в ней нет отступов, они просто склеиваются(когда перестраиваются друг под друга на маленьком...

327
Как в форме изменить положение кнопки?

Как в форме изменить положение кнопки?

У меня есть форма, в ней текстовое поле и кнопкаПри попытке сдвинуть кнопку, поле двигается ровно на ту же величину

235
jquery пробежать по всем дочерним элементам

jquery пробежать по всем дочерним элементам

Мне необходимо найти все элементы с классом incorrect, когда у меня есть this объекта одного из input в таблице (не важно какого), после этого по набору...

282