I recently wrote some Javascript to create a rotating headlines section, complete with fading animation, for a client’s site. It was based off the Hot News Headlines section on the front page of Apple’s website, and with the help of MooTools (with Moo.Fx), it was a simple task. Here’s what the rotating headlines look like at Apple.com:
Lets start. My HTML section looked something like this:
1 2 3 4 5 6 7 | <style> div.Headline { display: none; } </style> <div id="divHeadlines"> <div class="Headline"><a href="#">Link 1</a></div> <div class="Headline"><a href="#">Link 2</a></div> </div> |
And my Javascript took care of the rest. The basic idea is to show a headline, and then set a timeout to hide the current headline and show the next one, with all the transition animations handled by MooTools:
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <script type="text/javascript"> var arrHeadlines = null; // array to hold headline objects var intAniDuration = 1; // duration of transition animation (seconds) var intViewDuration = 5; // time before rotation (seconds) function Init() { if ($('divHeadlines')) { // get all headlines arrHeadlines = $('divHeadlines').getElements('div[class=Headline]'); // convert time to milliseconds intAniDuration = intAniDuration * 1000; intViewDuration = intViewDuration * 1000; if (arrHeadlines != null && arrHeadlines.length > 0) { // hide all for (var i = 0; i < arrHeadlines.length; i++) { var fx = new Fx.Styles(arrHeadlines[i], { duration:0, wait:false }); fx.set({ 'opacity': 0 }); } // show first link ShowHeadline(0); } } } function ShowHeadline(idx) { var oTargetDiv = arrHeadlines[idx]; oTargetDiv.style.display = "block"; // make div appear var fx = new Fx.Styles(oTargetDiv, { duration:intAniDuration, wait:false }); fx.start({ 'opacity': 1 }); // set opacity to visible // in X seconds time, hide this headline's div setTimeout("HideHeadline(" + idx + ")", intViewDuration) } function HideHeadline(idx) { // get index of next headline to show var newIdx = idx + 1; if (newIdx >= arrHeadlines.length) newIdx = 0; // reset index var oTargetDiv = arrHeadlines[idx]; var fx = new Fx.Styles(oTargetDiv, { duration:intAniDuration, wait:false, onComplete:function(){ oTargetDiv.style.display = "none"; ShowHeadline(newIdx); }/*end onComplete*/ }); fx.start({ 'opacity': 0 }); // set to fade out, on complete, show next headline } // call Init after everything loads Init(); </script> |
Make sure you place the JavaScript block at the bottom of your page (before the </body> tag). Comments and suggestions appreciated, especially if you know of a more elegant solution.
Do you have a demo of this in action?
Comment by Scott — December 4, 2008 @ 11:28 am
I could not get it to work. Can you show this in action, or give me detail on how to get it to work?
thank you
Comment by Bryan — February 5, 2009 @ 2:02 pm
Bryan,
Are you using MooTools as your JavaScript framework? The snippet here calls the MooTools functions.
Comment by David Chan — February 5, 2009 @ 2:17 pm
I think there is a bug in the code, it is not supported by IE… the display:block issue is a problem, does anyone have a fix for this please?
Comment by ziza — April 27, 2009 @ 8:16 am