Кто может объяснить как его использовать? в демо исходниках есть такие строчки:
// 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', // мой файл скрипта где неудачно пытаюсь вызвать плагин)
Во-первых
подставлять в "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>
Решил написать с нуля (вдруг кому пригодиться) :
<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);
Виртуальный выделенный сервер (VDS) становится отличным выбором
Здравствуйте! Я в JS ничего не понимаю, но жизнь требуетДелаю интуитивно и с помощью гугла
Работаю с этой библиотекойК сожалению, между блоками в ней нет отступов, они просто склеиваются(когда перестраиваются друг под друга на маленьком...
У меня есть форма, в ней текстовое поле и кнопкаПри попытке сдвинуть кнопку, поле двигается ровно на ту же величину
Мне необходимо найти все элементы с классом incorrect, когда у меня есть this объекта одного из input в таблице (не важно какого), после этого по набору...