jquery - 如何使用 vegas.js 插件添加文本动画

Question

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

Answer 1

而不是编辑 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>

现在只需向 slider 添加一个 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>