Scrolling horizontal text over marker with fading effect?
I am looking for a one line solution. A line of horizontal Marquee text with a fade effect using javascript (jquery if possible). Like scrolling carousel text. All google searches gave me scrolling, but no fading effect.
I know it can be done in Flash, but I avoid it if there are other solutions.
Any help would be greatly appreciated.
One way to do this is to create a marquee and float a semi-transparent image around the edge:
Any of the ones you found are fine, or use this inline jQuery: http://remysharp.com/demo/marquee.html
Here's a fading image: http://www.collylogic.com/scripts/fade.png
Here's the source you can see actually SEE the fade effect in the above image
The advantages of this way are that you don't do any expensive processing in javascript. You also have a wider selection of scrolling to choose from without worrying about when and where it will fade out.
The downside is that semi-transparent pngs require a hack to work in IE6. But since this is just eye candy, I would guess that these few IE6 users won't be much affected.
<html>
<head>
<style>
#marquee{
position: absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function marqueePlay(){
$("#marquee").animate(
{
left: $(window).width() - $("#marquee").width(),
opacity: 0
}, 10000, function(){
$("#marquee").css("left", 0);
$("#marquee").css("opacity", 1);
marqueePlay();
}
);
}
marqueePlay();
});
</script>
</head>
<body>
<div id="marquee">Weee...Weee...Duh!</div>
</body>
</html>