如何使用 vegas.js 插件添加文字动画

Question

我正在使用 vegas.js 插件 (http://vegas.jaysalvat.com/documentation) 对于我的网站。我想用这些图像显示一些文本。我怎样才能添加一些带有图像的动画文本。

在正文中初始化 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>

Answer 1

我自己解决了这个问题。
我的解决方案是：

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>

这是为每张图片获取一些文本，然后您需要根据需要设置样式。

Answer 2

而不是编辑 vegas.js 或 vegas.min.js 依赖文件：

向幻灯片添加另一个参数，例如 text 或 overlayText，如下所示：

{ src: "/images/1.jpg", text: "Text for slider 1." },
{ src: "/images/2.jpg", text: "Text for slider 2." }

确保您创建的元素具有可识别的 id 或 class，例如：

<div id="vegasSliderInner"></div>

现在只需将 walk 函数参数添加到您的滑块，它具有 html 追加函数。

（完整代码）：

<script>
    $("#fullScreenSlider").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*/
        overlay: 'vegas/overlays/01.png' /*overlay background*/

        slides: [
            { src: "/images/1.jpg", text: "Text for slider 1." },
            { src: "/images/2.jpg", text: "Text for slider 2." },
            { src: "/images/3.jpg", text: "Text for slider 3." },
            { src: "/images/4.jpg", text: "Text for slider 4." }
        ],

        walk: function (index, slideSettings) {
            $('#vegasSliderInner').html(slideSettings.text);
        }
    });
</script>

如何使用 vegas.js 插件添加文字动画

How to add Text animation with vegas.js plugin

jquery

slide