textillate.jsのカスタマイズが分かりません。

実現したいこと

// フェードインだけが、繰り返し行われて欲しいです。

前提

// フェードアウトが行われずに、
// フェードインだけが、繰り返し行われて欲しいです。

発生している問題・エラーメッセージ

// フェードアウトを削除しても、
// フェードインだけの動作にならないので、// フェードインだけが、繰り返し行われて欲しいです。

該当のソースコード

$(function () {
$('.hero-copy').textillate({
loop: true, //ループ
minDisplayTime: 5000, //テキストが置き換えられるまでの時間
// initialDelay: 1000, //遅延時間
autoStart: true, //アニメーション自動スタート

// フェードイン
in: {
effect: 'swing', //アニメーション効果、エフェクトの種類
delayScale: 2.5, //遅延時間の指定
delay: 150, //文字ごとの遅延時間
sync: true, //『true』全ての文字に同時に適応される
shuffle: false //ランダム
},

// フェードアウト
out: {
effect: 'fadeOut',
delayScale: 2.5,
delay: 150,
sync: true,
shuffle: false
}

});
})

試したこと

・// フェードアウトを削除
・effect: 'fadeOut', を effect: '', に。

補足情報(FW/ツールのバージョンなど)

こちらは、必須の別のjquery.textillate.jsというファイルです。

/*

*/

(function ($) {
"use strict";

function isInEffect (effect) {
return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0;
};

function isOutEffect (effect) {
return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0;
};

function stringToBoolean(str) {
if (str !== "true" && str !== "false") return str;
return (str === "true");
};

// custom get data api method
function getData (node) {
var attrs = node.attributes || []
, data = {};

if (!attrs.length) return data; $.each(attrs, function (i, attr) { var nodeName = attr.nodeName.replace(/delayscale/, 'delayScale'); if (/^data-in-*/.test(nodeName)) { data.in = data.in || {}; data.in[nodeName.replace(/data-in-/, '')] = stringToBoolean(attr.nodeValue); } else if (/^data-out-*/.test(nodeName)) { data.out = data.out || {}; data.out[nodeName.replace(/data-out-/, '')] =stringToBoolean(attr.nodeValue); } else if (/^data-*/.test(nodeName)) { data[nodeName.replace(/data-/, '')] = stringToBoolean(attr.nodeValue); } }) return data;

}

function shuffle (o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}

function animate ($t, effect, cb) {
$t.addClass('animated ' + effect)
.css('visibility', 'visible')
.show();

$t.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $t.removeClass('animated ' + effect); cb && cb(); });

}

function animateTokens ($tokens, options, cb) {
var that = this
, count = $tokens.length;

if (!count) { cb && cb(); return; } if (options.shuffle) $tokens = shuffle($tokens); if (options.reverse) $tokens = $tokens.toArray().reverse(); $.each($tokens, function (i, t) { var $token = $(t); function complete () { if (isInEffect(options.effect)) { $token.css('visibility', 'visible'); } else if (isOutEffect(options.effect)) { $token.css('visibility', 'hidden'); } count -= 1; if (!count && cb) cb(); } var delay = options.sync ? options.delay : options.delay * i * options.delayScale; $token.text() ? setTimeout(function () { animate($token, options.effect, complete) }, delay) : complete(); });

};

var Textillate = function (element, options) {
var base = this
, $element = $(element);

base.init = function () { base.$texts = $element.find(options.selector); if (!base.$texts.length) { base.$texts = $('<ul class="texts"><li>' + $element.html() + '</li></ul>'); $element.html(base.$texts); } base.$texts.hide(); base.$current = $('<span>') .html(base.$texts.find(':first-child').html()) .prependTo($element); if (isInEffect(options.in.effect)) { base.$current.css('visibility', 'hidden'); } else if (isOutEffect(options.out.effect)) { base.$current.css('visibility', 'visible'); } base.setOptions(options); base.timeoutRun = null; setTimeout(function () { base.options.autoStart && base.start(); }, base.options.initialDelay) }; base.setOptions = function (options) { base.options = options; }; base.triggerEvent = function (name) { var e = $.Event(name + '.tlt'); $element.trigger(e, base); return e; }; base.in = function (index, cb) { index = index || 0; var $elem = base.$texts.find(':nth-child(' + ((index||0) + 1) + ')') , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) , $tokens; $elem.addClass('current'); base.triggerEvent('inAnimationBegin'); $element.attr('data-active', $elem.data('id')); base.$current .html($elem.html()) .lettering('words'); // split words to individual characters if token type is set to 'char' if (base.options.type == "char") { base.$current.find('[class^="word"]') .css({ 'display': 'inline-block', // fix for poor ios performance '-webkit-transform': 'translate3d(0,0,0)', '-moz-transform': 'translate3d(0,0,0)', '-o-transform': 'translate3d(0,0,0)', 'transform': 'translate3d(0,0,0)' }) .each(function () { $(this).lettering() }); } $tokens = base.$current .find('[class^="' + base.options.type + '"]') .css('display', 'inline-block'); if (isInEffect(options.in.effect)) { $tokens.css('visibility', 'hidden'); } else if (isOutEffect(options.in.effect)) { $tokens.css('visibility', 'visible'); } base.currentIndex = index; animateTokens($tokens, options.in, function () { base.triggerEvent('inAnimationEnd'); if (options.in.callback) options.in.callback(); if (cb) cb(base); }); }; base.out = function (cb) { var $elem = base.$texts.find(':nth-child(' + ((base.currentIndex||0) + 1) + ')') , $tokens = base.$current.find('[class^="' + base.options.type + '"]') , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) base.triggerEvent('outAnimationBegin'); animateTokens($tokens, options.out, function () { $elem.removeClass('current'); base.triggerEvent('outAnimationEnd'); $element.removeAttr('data-active'); if (options.out.callback) options.out.callback(); if (cb) cb(base); }); }; base.start = function (index) { setTimeout(function () { base.triggerEvent('start'); (function run (index) { base.in(index, function () { var length = base.$texts.children().length; index += 1; if (!base.options.loop && index >= length) { if (base.options.callback) base.options.callback(); base.triggerEvent('end'); } else { index = index % length; base.timeoutRun = setTimeout(function () { base.out(function () { run(index) }); }, base.options.minDisplayTime); } }); }(index || 0)); }, base.options.initialDelay); }; base.stop = function () { if (base.timeoutRun) { clearInterval(base.timeoutRun); base.timeoutRun = null; } }; base.init();

}

$.fn.textillate = function (settings, args) {
return this.each(function () {
var $this = $(this)
, data = $this.data('textillate')
, options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings);

if (!data) { $this.data('textillate', (data = new Textillate(this, options))); } else if (typeof settings == 'string') { data[settings].apply(data, [].concat(args)); } else { data.setOptions.call(data, options); } })

};

$.fn.textillate.defaults = {
selector: '.texts',
loop: false,
minDisplayTime: 2000,
initialDelay: 0,
in: {
effect: 'fadeInLeftBig',
delayScale: 1.5,
delay: 50,
sync: false,
reverse: false,
shuffle: false,
callback: function () {}
},
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 50,
sync: false,
reverse: false,
shuffle: false,
callback: function () {}
},
autoStart: true,
inEffects: [],
outEffects: [ 'hinge' ],
callback: function () {},
type: 'char'
};

}(jQuery));

コメントを投稿

0 コメント