Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Array Slideshow Animation Tutorial

Published :
Author :
Adam Khoury
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 and HTML elements, but it takes more code to accomplish and you cannot use arrays. Lesson Code: <!DOCTYPE html> <html> <head> <style> #wss{ opacity:0; -webkit-transition:opacity 1.0s linear 0s; transition:opacity 1.0s linear 0s; } </style> <script> var wss_i = 0; var wss_array = ["Cute","Happy","<u>Playful</u>","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> <h1>My dog is <span id="wss"></span></h1> <script>wss_elem = document.getElementById("wss"); wssSlide(); </script> </body> </html>