我正在使用 vegas.js 插件( http://vegas.jaysalvat.com/documentation )
为我的网站。我想用这些图像显示一些文本。如何添加一些带有图像的动画文本。
在 body 中初始化 vegas.js:
<script>
$("#fullScreenSlide").vegas({
preload : true,/*load then show image*/
autoplay: true,
loop: true,
shuffle: false,
cover: true,
transition: 'fade', /*animation-effect*/
transitionDuration: 5000, /*animation duration*/
delay: 12000, /*slide duration*/
slides: [
{ src: "images/1.jpg" },
{ src: "images/2.jpg" },
{ src: "images/3.jpg" },
{ src: "images/4.jpg" }
],
overlay: 'vegas/overlays/01.png' /*overlay background*/
});
</script>
最佳答案
刚刚自己解决了这个问题。
我的解决方案是这样的:
vegas.js - Add "overlaytext = this._options('overlaytext')," on row 344<br />
vegas.js - Edit row 450 "$inner = $('<div class="vegas-slide-inner"></div>')" to the following "$inner = $('<div class="vegas-slide-inner">' + overlaytext + '</div>')"
你的脚本应该改成这样:
<script>
$(".right-container").vegas({
slides: [
{ src: "/img/slider1.jpg", overlaytext: "text 1" },
{ src: "/img/slider1.jpg", overlaytext: "text 2" }
]
});
</script>
这是为了在每个图像上获取一些文本,然后您需要根据需要对其进行样式设置。
关于jquery - 如何使用 vegas.js 插件添加文本动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40727198/