2010-05-06 8 views
2

Je suis à la recherche d'une solution pour une seule ligne de défilement de textes horizontaux avec un effet de fondu en javascript (jquery si possible). Comme un défilement de texte carrousel. Toutes les recherches de google m'ont donné des effets de défilement mais sans effet de fondu. Je sais que cela peut être fait en flash mais je l'évite s'il y a d'autres solutions.Texte défilant horizontal avec un effet de fondu?

Toute aide serait grandement appréciée.

Répondre

1

Une façon que vous pouvez faire est de créer un chapiteau et flottant une image semi-transparente à son bord:

Tout de ceux que vous avez trouvées sont très bien, ou utiliser celui-ci construit en jQuery: http://remysharp.com/demo/marquee.html

est ici une image Affaiblissement: http://www.collylogic.com/scripts/fade.png

est ici the source where you can see actually SEE the fading effect sur l'image ci-dessus

les avantages de cette façon de faire est que vous ne faites aucun traitement coûteux en Javascri pt. Vous avez également une plus grande variété de défilement à choisir sans avoir à vous soucier de quand et où se faner.

L'inconvénient est que les png semi-transparents ont besoin d'un hack pour fonctionner dans IE6. Mais étant donné que c'est juste un bonbon pour les yeux, j'imagine que ces quelques utilisateurs d'IE6 ne seront pas autant touchés.

3
<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> 
Questions connexes