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

问题描述

我正在使用vegas.js插件( http://vegas.jaysalvat.com/documentation )为我的网站.我想用这些图像显示一些文本.如何添加带有图像的动画文本.

在主体中初始化vegas.js:

I am using vegas.js plugin (http://vegas.jaysalvat.com/documentation)for my website. I want to display some texts with those images. how can i add some animated texts with images.

initialize vegas.js in body:

<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>

推荐答案

我自己修复了此问题.
我的解决方法是:

Just fixed this myself.
My solution is this:

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>')"

并且您的脚本应更改为此:

And your script should be changed to this:

<script>
    $(".right-container").vegas({
       slides: [
           { src: "/img/slider1.jpg", overlaytext: "text 1" },
           { src: "/img/slider1.jpg", overlaytext: "text 2" }
       ]
    });
</script>

这是为了在每个图像上获取一些文本，然后您需要根据需要设置其样式.

This is to get some text with each image, then you will need to style it to your needs.

这篇关于如何使用vegas.js插件添加文本动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！