How to add Text animation with vegas.js plugin

Question

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>

Answer 1

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.

Answer 2

Rather than editing the vegas.js or vegas.min.js dependency files:

Add another parameter to the slides such as text or overlayText, like so:

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

Make sure you create an element with a discernible id or class such as:

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

Now just add a walk function parameter to your slider, that has an html append function.

(full code):

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