Array Slideshow Animation Tutorial JavaScript CSS3 HTML5



Lesson Code: http://www.developphp.com/view.php?tid=1380
Learn to program Array based animated slideshows that you can fully customize using HTML, CSS and JavaScript. You can extend the programming to place dynamic server side content into the array, then traverse over a dynamic array as a slideshow. This can also be done using CSS3 keyframes, but it takes more code to accomplish and you cannot use array content.

source

31 thoughts on “Array Slideshow Animation Tutorial JavaScript CSS3 HTML5”

  1. here is the code in this tutorial

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
    <title>Abdibogoreh</title>
    <style type="text/css">
    #wss{
    opacity:0;
    -webkit-transition:opacity 1.0s linear 0s;
    transition:opacity 1.0s linear 0s;
    }
    </style>
    <script type="text/javascript">
    var wss_i = 0;
    var wss_array = ["Cute","Happy","Playful", "Smart","Loyal"];
    var wss_elem;
    function wssNext(){
    wss_i++;
    wss_elem.style.opacity = 0;
    if(wss_i > (wss_array.length – 1)){
    wss_i = 0;
    }
    setTimeout('wssSlide()',1000);
    }

    function wssSlide(){
    wss_elem.innerHTML = wss_array[wss_i];
    wss_elem.style.opacity = 1;
    setTimeout('wssNext()',2000);
    }
    </script>
    </head>
    <body>
    My dog is <span id="wss"></span>

    <script>
    wss_elem = document.getElementById("wss"); wssSlide();
    </script>

    </body>
    </html>

  2. Hi!! Thanks for the amazing tutorial, I was wondering how I set up the javascript code if I want to link it externaly because is saying that the wss_elem is null….. 🙁

  3. Thanks a lot, can you make a tutorial on how to make more interactive slideshow, like 2 words comes together but in different timing grouped in one function, as image and text, Thanks again

  4. I have 4 different div and 4 button I want switch between dives by buttons [when I click on a button it show me one dive and hide all other div ] plies help….

  5. Great lesson. What if I wanted to combine auto slide with manual using one script. Adding left and right arrows for example so the user can manually move back and forward in the array?

  6. Hello Adam.
    Great tutorial. I wanted to use your ideas to build an image slideshow for my web site. I used php to populate an array with all of the images in a folder, then used your tutorial as a guide to display them. It works, sort of. I get the fade in/fade out effect, but I guess what I'm really looking for is more of a dissolve effect, from one image to another. Any chance you could create a tutorial for this? Thanks again and have a great day!

  7. great vid and thanks, to use a separate js file make sure link is in head section this allows browser to initialise variables but, leave line 32 where it is or at least after the span element. Now works with separate files, again thanks for amazing tut.

  8. I'm trying to get an image up but when I do it it shows the outline of the image but no image shows. I'm trying to add several pictures.
    ['<img src="building.jpg" width="350" height="450">',];

  9. You can use the key word call ( with) as well instead of having another script tag in the body. its just a suggestion. I'm enjoying learning from your vids. Great work mate!! Cheers :)<script>With(document.getElementByID("wss")) innerHTML = wss_array[wss_i];</script>

  10. Hi! THX for the tutorial, i made it and it was cool, I meet with an intresting thing. I make some komment and the animation work on a different way (the array was hide for 1 sec)
    "<style> 
    <!– type="text/css"> –>
    <!– wss=world slideshow –>
    #wss{
    opacity:0;
    -webkit-transition:opacity 1.0s linear 0s;
    transition:opacity 1.0s linear 0s;
    }
    </style>"
    What do u think, what is the cause? (Sry for my bad English! Have a nice day!)

Leave a Reply

Your email address will not be published. Required fields are marked *