vendredi 19 septembre 2014

Texte défilant verticalement pour afficher des news

Chose promise...

Voici un texte défilant via un RSS feed. Ce n'est pas parfaitement au point encore et il y a certainement moyen de faire plus simple... En tous cas, c'est bel et bien possible. Il s'agit ici d'un RSS issu du National Hurricane Center (Centre National des Ouragans, Miami), mais cela pourrait évidemment se faire pour n'importe quel autre RSS de news. Ce texte défilant est en action sur mon blog météo http://nbbcmeteo.blogspot.com/. On peut aussi le faire avec un iframe mais c'est moins pratique car il faut sans cesse changer la hauteur de l'iframe dans le HTML.


  • Le RSS Feed est traité par feedroll.com. C'est un script qui permet d'afficher un flux RSS sur un site ou un blog
  • La balise <MARQUEE> est utilisée pour faire défiler le texte (voir plus bas)
  • Le container <DIV> permet d'avoir une présentation plus sympa avec des angles arrondis (voir plus bas)






Les différentes parties sont colorées en blanc pour le <DIV> (et <CENTER>), en jaune pour <MARQUEE>, vert pour <SPAN> et en noir pour le script issu de feedroll. Bien sûr, de nombreuses valeurs peuvent être modifiées (voir messages précédents).

<center>

<div style="background-color: #333333; border-radius: 6px; border: 1px solid #6F7376; color: white; height: 100%; padding-bottom: 0px; padding-left: -25px; padding-right: -25px; padding-top: 7px; text-align: center; width: 550px;">

<marquee bgcolor="#333333" direction="up" height="100px" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="1" style="text-align: justify;" width="550px">

<span style="font-size: small;">

<script charset="UTF-8" language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&amp;num=3&amp;desc=600&amp;tz=-4&amp;targ=y&amp;utf=y" type="text/javascript"></script><noscript><a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&num=3&desc=600&tz=-4&targ=y&utf=y&html=y">View RSS feed</a></noscript>

</span>
</marquee>
</div>
</center>

Aucun commentaire:

Enregistrer un commentaire