Well recently i had to design a list rotator and use mootools to create the effect. Did some thinking and got a simple logic to do so . Remove the first element, get the list and append the data of the first element to the list. Well so it rotates and the effect looks cool. Here is a working demo of the script and yeah the HTML, CSS and JavaScript has been written below.
Demo Here
The HTML
<ul id="rotate">
<li>"Courage is the discovery that you may not win, and trying when you know you can lose."</li>
<li>If you only do what you know you can do- you never do very much.</li>
<li>There are no failures - just experiences and your reactions to them.</li>
<li>Being deeply loved by someone gives you strength, while loving someone deeply gives you courage.</li>
<li>Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you.</li>
<li>It's kind of fun to do the impossible.</li>
<li>Live as if you were to die tomorrow. Learn as if you were to live forever.</li>
<li>Design is not the narrow application of formal skills, it is a way of thinking</li>
<li>Good design goes to heaven; bad design goes everywhere</li>
<li>Designers are meant to be loved, not to be understood</li>
</ul>
The Css
#rotate{width:400px; height:320px; overflow:hidden;}
#rotate li{display:block; padding:10px 20px; margin:5px; border-bottom:1px dotted #ccc; list-style-type:none; height:50px; overflow:hidden; font-size:14px;}
The Javasccript
window.addEvent('domready', function() {
function rotateList(){
first=document.getElement("ul#rotate > li");
text = first.get('html');
first.set('morph', {duration:1000 , transition: 'linear'});
first.morph({opacity:0,height:0,marginTop:0,marginBottom:0,paddingTop:0,paddingBottom:0,"background-color":"#FFD"});
(function(){first.dispose()}).delay(1000);
var newli=document.createElement("li");
newli.innerHTML=text;
document.getElementById("rotate").appendChild(newli);
}
interval = setInterval(rotateList, 5000);
});
Well and if we want the list to rotate the other way round, remove the last element and add it to the top . We can take a look at the js snippet below.
JavaScript for the list to rotate other ways
function rotateList(){
first=$$("#rotate li");
lastli=first[first.length-1];
text=lastli.innerHTML;
lastli.dispose();
var newli=document.createElement("li");
newli.innerHTML=text;
newli.set('styles',{
opacity:0,
height:0,
marginTop:0,
marginBottom:0,
paddingTop:0,
paddingBottom:0
});
var inserted = document.getElementById("rotate").insertBefore(newli, first[0]);
inserted.morph({height:30,marginTop:5,marginBottom:5,paddingTop:0,paddingBottom:10});
(function(){inserted.fade('in')}).delay(500);
}
interval = setInterval(rotateList, 2000);
Click here to check the Demo
Well and if u are interested in some more javascript awesomeness check out the following posts:
Right Click menu, Awesomeness
Nifty navigation effect using jQuery and CSS
Any issues use the comment box below
