Skip to content

Instantly share code, notes, and snippets.

@joerussbowman
Created May 1, 2010 02:21
Show Gist options
  • Save joerussbowman/385978 to your computer and use it in GitHub Desktop.
Save joerussbowman/385978 to your computer and use it in GitHub Desktop.
<script type="text/javascript">
YUI().use('anim', 'node', function(Y){
Y.one("#footer-newsticker").removeClass("hidden");
var tickernode = Y.one('#footer-newsticker')
/* This gets the max value of scrollLeft quickly, making for smooth
* animation with no delay before the fade and rest.
*/
tickernode.set('opacity', 0);
tickernode.set('scrollLeft', tickernode.get('offsetWidth'));
var maxScroll = tickernode.get('scrollLeft');
tickernode.set('scrollLeft', 0);
tickernode.set('opacity', 1);
/* Now set up the animation and events */
var ticker = new Y.Anim({
node: tickernode,
to:{
scroll: function(node) {
return [node.get('scrollLeft') + maxScroll, 0]
}
},
duration: Math.round(100)
}
);
var onEndRestart = function() {
this.detach();
this.on('end', onEndScroll);
this.setAttrs({
to:{
scroll: function(node) {
return [node.get('scrollLeft') + maxScroll, 0]
}
},
duration: Math.round(100)
});
this.get('node').set('to', { scroll: [tickernode.get('scrollLeft'), 0] });
this.run();
};
var onEndFade = function() {
this.detach();
this.on('end', onEndRestart);
this.get('node').set("scrollLeft", 0);
this.setAttrs({
to: { opacity: 1 },
duration: 1
});
this.run();
};
var onEndScroll = function() {
this.detach();
this.on('end', onEndFade);
this.setAttrs({
to: { opacity: 0 },
duration: 1
});
this.run();
};
var onHover = function() {
if (ticker.get('running')) {
ticker.pause();
} else {
ticker.run();
}
}
ticker.on('end', onEndScroll);
tickernode.on('mouseover', onHover);
tickernode.on('mouseout', onHover);
tickernode.set('to', { scroll: [tickernode.get('scrollLeft'), 0] });
ticker.run();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment