window.addEvent('domready', function(){ // morph instance var morph = new Fx.Morph('morph',{ transition: 'quart:out', duration: 500, link: 'chain', onStart: function(){ message.set('html','Starting Morph').highlight(); }, onComplete: function(){ message.set('html','Morph complete').highlight(); } }); // scroll instance var scroll = new Fx.Scroll('scroll',{ transition: 'elastic:out', duration: 2000, link: 'cancel', onStart: function(){ message.set('html','Scroll start').highlight(); }, onComplete: function(){ message.set('html','Scroll complete').highlight(); } }); // demos var message = $('message'); var morphUp = function(){ morph.start({ 'background-color': '#000', 'border-color': '#ccc', 'line-height': 40 }); }; var morphDown = function(){ morph.start({ 'background-color': '#e00', 'border-color': '#000', 'line-height': 120 }); }; $('morph_up').addEvent('click', morphUp); $('morph_down').addEvent('click', morphDown); var scrollDown = function(){ scroll.start(0, 300); }; var scrollUp = function(){ scroll.start(0, 100); }; $('scroll_down').addEvent('click', scrollDown); $('scroll_up').addEvent('click', scrollUp); });
<button id="morph_down">morphDown</button> <button id="morph_up">morphUp</button> <button id="scroll_down">scrollDown</button> <button id="scroll_up">scrollUp</button> <div id="message">Waiting</div> <hr/> <div id="morph">Fx.Morph</div> <div id="scroll"> <div id="scroll_inner"> <div style="background-color: #fff;">Fx.Scroll</div> <div style="background-color: #eee;">Fx.Scroll</div> <div style="background-color: #ddd;">Fx.Scroll</div> <div style="background-color: #ccc;">Fx.Scroll</div> <div style="background-color: #bbb;">Fx.Scroll</div> <div style="background-color: #aaa;">Fx.Scroll</div> <div style="background-color: #999;">Fx.Scroll</div> <div style="background-color: #888;">Fx.Scroll</div> <div style="background-color: #777;">Fx.Scroll</div> <div style="background-color: #666;">Fx.Scroll</div> </div> </div>
div#morph { height: 100px; background: #000; font-size: 20px; color: #fff; text-align: center; line-height: 40px; border: solid 4px #ccc; margin-bottom: 20px; } div#scroll { border: solid 1px; height: 150px; overflow: auto; } div#scroll_inner { text-align: center; } div#scroll_inner div { height: 60px; line-height: 70px; margin: 0; padding: 0; } // irrelevant body { font-family: helvetica, arial; }