Tendone di scorrimento testo orizzontale con un effetto di dissolvenza?

StackOverflow https://stackoverflow.com/questions/2782154

  •  03-10-2019
  •  | 
  •  

Domanda

Sto cercando una soluzione per una singola linea Marquee testo orizzontale scorrimento con un effetto di dissolvenza utilizzando JavaScript (jQuery se possibile). Come scorrere un testo giostra. Tutte le ricerche di Google mi ha dato lo scorrimento effetti, ma senza alcun effetto di dissolvenza.

So che questo può essere fatto in flash, ma Im evitando, se ci sono altre soluzioni.

Qualsiasi aiuto sarebbe molto apprezzato.

È stato utile?

Soluzione

Un modo per farlo è creando un perimetro e galleggianti un'immagine semitrasparente corrispondenza del suo bordo:

Qualcuno di quelli che hai trovato vanno bene oppure usa questo costruito in jQuery: http: // remysharp.com/demo/marquee.html

Ecco un immagine dissolvenza: http://www.collylogic.com/scripts/fade. png

Ecco la fonte dove si può vedere in realtà vedere l'effetto dissolvenza sull'immagine qui sopra

I vantaggi di fare in questo modo è che non stai facendo alcun trattamento costoso in javascript. Hai anche una più ampia varietà di scorrimento tra cui scegliere, senza doversi preoccupare di quando o dove a sbiadire.

Lo svantaggio è che pngs semitrasparenti bisogno di un trucco per lavorare in IE6. Ma dal momento che è solo piacere per gli occhi, mi immagino quei pochi utenti di IE6 non saranno influenzati più di tanto.

Altri suggerimenti

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top