Scroll felirat a főoldalra

A megoldás egyik(legegyszerűbb) formájának ajánlottam a marquee tagot.

Ha elolvasol végig, láthatod, hogy leírtam, hogy végül is lehet(ne) drupál téma is.
Szerintem a kötözködést befejezheted.

Tudom, hogy nem nekem írtad, de most speciel meg kell, hogy védjem Petiket, az általam linkelt jQuery plugin is ugyanúgy marquee-taget használ (tehát látni benne marquee-taget!), a hagyományoshoz hasonlóan, csak kicsit szebben testreszabható módon. :)

Itt a kódjából a lényeg:

.........
        <div class="demo">
            <h2>Vanilla</h2>
            <marquee behavior="scroll" direction="left" scrollamount="2" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
...
            <marquee scrollamount="2" behavior="alternate" direction="right" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
...
            <marquee loop="3" behavior="slide" direction="right" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
...
            <marquee behavior="scroll" direction="down" scrollamount="2" height="100" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
 
        </div>
 
        <div class="original">
            <h2>Without jQuery Progressive Enhancement</h2>
            <small>Note: scrollamount has been increased to match speed</small>
...
            <marquee behavior="scroll" scrollamount="3" direction="left" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
...
            <marquee scrollamount="6" behavior="alternate" direction="right" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
...
            <marquee loop="1" behavior="slide" direction="right" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
 
...
            <marquee behavior="scroll" direction="down" height="100" width="350"><p>START Lorem ipsum dolor sit amet END</p></marquee>
        </div>
    </div>

A demo osztállyal ellátott diven belül van a lényeg igazából, szóval ott is marquee-tag van.
A hozzá tartozó jQuery-kód:

        // basic version is: $('div.demo marquee').marquee() - but we're doing some sexy extras
 
        $('div.demo marquee').marquee('pointer').mouseover(function () {
            $(this).trigger('stop');
        }).mouseout(function () {
            $(this).trigger('start');
        }).mousemove(function (event) {
            if ($(this).data('drag') == true) {
                this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
            }
        }).mousedown(function (event) {
            $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
        }).mouseup(function () {
            $(this).data('drag', false);
        });

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Itt még fontos infókat írnak:

"As we abused the Internet back in the 90 with tags like <blink> and <marquee> the last 10 years have seen the gradual extinction of these proprietary tags until we did full circle and the marquee effect appears in CSS 3.

There’s actually a very strong business case and requirement for the marquee tag – since the only the alternative is often a hacky solution (I feel) that shifts the CSS left position which, depending on your browser, will begin to eat away at your CPU.

Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it’s built directly in to the browser). So let’s solve this with JavaScript."