twitter-like marquee fadeing + steamlessly ?

Question

anyone have an idea to make a marquee effect just like twitter ? its steamless ( doenst stop waiting for the loop ends ) + fadeing at the start and the end. thanks.

edit

ok edit, ive found one semi - steamless here http://jsbin.com/uyawi/3/edit but its still laggy + not really streamless maybe becouse the use of css?

Answer 1

Take a look at their code. They have placed two PNG images that fade from 100% opaque to 100% transparent. The two elements are placed inside their own <li>s at the end of a list of <li>s and inside a <ul>, and then positioned using CSS to float at either side of the <ul>.

I'd highly recommend using Firefox+Firebug or Safari/Chrome and the developer's toolbar. All these tools have a feature called "Inspect Element" which allow you to very quickly drill down to a specific element in the document and read its CSS.

[EDIT] I need to build a scroller in the next week or so, so I wrote something up today. My code is going to be integrated into Adobe Air, so I'm not doing any cross-browser checks. The CSS here likely will need to be tweaked. I first tried playing with Remy Sharp's Silky Smooth Marquee, but adding that code destroys and recreates most of the HTML making the transparent wings difficult to integrate. The code to build a scroller is not that hard, so I just rolled my own. The code below is in five parts:

1. The curtain image

For this to work, I temporarily borrowed Twitter's curtain image and saved it to my webroot at /images/left-right-fader.png. Their fader is for a specific color scheme, so I'll be replacing it with my own. Be a good citizen and make your own, too. The image in this case is 120px wide with the left curtain at the left edge and the right curtain at the [60,0] point. In other words, it is a single 120px-wide image that fades from 100% opacity at the left edge to 0% opacity in the middle to 100% opacity at the right edge. If you change the image dimensions, you will need also to change the CSS. The height does not matter because it tiles.

Extra-points: if you are targeting a Webkit or Firefox browser, you should be able to eliminate the image and use a regular HTML element (div/span) with a gradient background.

2. The CSS

body,div {border:none;padding:0;margin:0;}
div#marquee {
    position:relative;
    overflow:hidden;
    background-color:#000;
    color:#ddd;
}
div#marquee div.scrollingtext {
    position:relative;
    display:inline;
    white-space:nowrap;
}
div#marquee div.fader {
    width:60px;
    position:absolute;
    background:url(/images/left-right-fader.png) repeat-y scroll 0 0 transparent;
    top:0;
    left:0;
}
div#marquee div.fader.left {
    background-position:-60px 0;
    left:auto;
    right:0;
}

3. The Marquee 'class'

Usage:

var mMarquee = new Marquee(jTarget,strText,intWidth);

1. jTarget is a jQuery reference to an empty div where you want the scroller to appear (eg. if you want the marquee to show up in <div id="myMarqueeDiv"></div>, you would use $('div#myMarqueeDiv')
2. strText - the string you want to have scroll;
3. intWidth - how wide you want the scroller to be.

Right now, it returns a Marquee object with no public methods. It's simple enough to add some public methods (for example, as stop() method or restart() method).

Here is the code:

var Marquee = function(j,s,w) {
    var self = this;
    var jTarget = j;
    var strText = s;
    var intWidth = w;
    var intPaddingLeft = 60;
    var jText,intTextWidth;
    var update = function() {
        intPaddingLeft -= 2;
        if (intPaddingLeft < -intTextWidth) {
            intPaddingLeft += intTextWidth;
        }
        jText.css({'left':intPaddingLeft + 'px'});
    };
    var setup = function() {
        jText = $('<div class="scrollingtext"></div>').text(strText);
        jTarget
            .append(jText)
            .append($('<div class="fader"></div>').html('&nbsp;'))
            .append($('<div class="fader left"></div>').html('&nbsp;'));
        intTextWidth = $(jTarget).find('.scrollingtext').width();
        jTarget.width(intWidth);
        jText.text(strText + " " + strText);
        update();
    };
    setup();
    setInterval(update,30);
    return self;
};

4. The HTML

In this specific example, my body looks like this:

<body>
    <div id="marquee"></div>
</body>

5. Implementation code

strLoremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...";

jQuery(function($) {
    myMarquee = new Marquee($('div#marquee'),strLoremIpsum,500);
});

Answer 2

nice question waiting too :)

Answer 3

there are some new attributes available for marquees - onscrollstart and onscrollend (i think) - you could use these to toole the opacity of the contents. Or u could put a span around the marquee - make it position:relative then place 2 opposing fading pngs in the span (position:absolute;left:0 the other right:0) that will work real quick....