Bonjour.
Je ne connais ni l'un ni l'autre, mais je pense que ça se fait assez simplement avec jQuery.
Le principe serait en gros :
1. Tu stockes tes news (titre, contenu, etc.) dans un tableau
2. A intervalles de temps réguliers :
3. Tu ajoutes un nouvel élément
#news dans un bloc qui les contient toutes (qu'on va appeler par exemple
#news-container), avant tous les autres (pour qu'il apparaissent en haut de la liste), qui doit avoir, par défaut, une hauteur et une opacité nulles, et qui empêche le contenu qui dépasse d'être affiché, càd :
#news
{
height: 0;
opacity: 0;
overflow: hidden;
}
4. Tu appliques à ce nouvel élément un slideUp() pour décaler les news suivantes vers le bas, et tu appliques un fadeIn() pour le faire apparaître en tant que callBack, pour être sûr que ça ne s'applique qu'une fois que le slideUp() s'est terminé.
5. Tu supprimes le dernier fils de
#news-container qui est maintenant en dehors du champs de vision, puisqu'il ne sert plus à rien.
6. Tu recommences à l'étape 2.
Ah, et évidemment, il faut appliquer à
#news-container :
overflow: hidden;
Voilà. Je ne sais pas trop si ça va marcher, mais ça devrait. Sinon, j'imagine que ça te donne une bonne base pour te lancer, et que quelqu'un viendra me corriger s'il le faut.
--- édit -----
Ah, et pour le petit dégradé en bas des news, c'est un simple petit dégradé en png. On pourrait par exemple avoir quelque chose comme :
#mask
{
background: url('/Images/mask.png') repeat-x;
bottom: 0;
height: hauteur_de_l'imagepx;
position: absolute;
}
... ce qui impose évidemment d'ajouter la propriété suivante à
#news-container :
position: relative;
Modifié par phpdoesnotcare (12 May 2010 - 13:09)