我正在使用Uikit框架在我的网站上运行图像幻灯片。我想使用textillate plugin为出现在每张幻灯片上的每个文本设置动画。这样,当出现第一张幻灯片并且每次更改幻灯片时,滑块上的文本都将变为动画。 可以使用以下方式调用Uikit滑块:
var slideshow = UIkit.slideshow('#home-slideshow');
以下将调用文本动画:
$(function () {
$('.tlt').textillate();
})
所以我使用以下代码组合了代码:
jQuery(function($) {
// Initialize homepage slideshow
var slideshow = UIkit.slideshow('#home-slideshow', {
autoplay: true,
autoplay-interval: 7000
});
// Variable with element that fire event
var $slideItem = $('#home-slideshow ul li');
$slideItem.on('itemshow', function() {
$('.tlt').textillate({
//initialDelay: 1500,
// in animation settings
in: {
effect: 'flipInX', // set the effect name
delayScale: 1.5, // set the delay factor applied to each consecutive character
delay: 100, // set the delay between each character
shuffle: false, // randomize the character sequence
sync: false, // set to true to animate all the characters at the same time
},
loop: false,
type: 'char'
});
});
})
但是,它不能很好地工作。文本动画在第一张幻灯片上触发,但是当幻灯片更改时,将不再应用该动画。 Uikit活动的幻灯片列表在此处-https://getuikit.com/docs/slideshow#javascript。我不是这方面的专家。我只尝试遵循文档。任何帮助将不胜感激。