我正在使用 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/

10-13 00:20