script avec défilement vertical

**mdr_cedrick** · 19/01/2009, 09h28

Bonjour à tous

je post ici ne sachant pas trop où faire ma demande

je fais des recherches depuis ce matin et je ne trouve rien d'intéressant par rapport à ma recherche alors je viens vous demander si vous connaissez quelque chose dans ce genre.

j'ai des nouveautés (en réalité des screen de sites web) que je veux faire défiler verticalement (de bas en haut).
Or je ne veux pas un défilement continu. Une fois ma nouveauté apparue j'aimerai qu'elle se stop quelques instants pour qu'on puisse la regarder, puis elle disparait pour laisser la suivante arriver.
De plus lorsqu'une nouveauté est affichée, si l'on passe le curseur dessus j'aimerais qu'elle ne disparaisse pas tant qu'on a pas effectué le onmouseout

si vous connaissez ou avez déjà utilisé un script plus ou moins similaire je suis preneur

juste pour info j'utilise déjà jQuery pour d'autres chose mais ça n'utilise pas vraiment le comportement que je veux.

merci de votre aide

**marcha** · 19/01/2009, 09h42

Salut,

Voici un script qui doit être assez proche de ton besoin, je te laisse
regarder et poser des questions si tu as de la peine à l'adapter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#newsbox { width: 200px; height: 200px; border: 1px solid black; position: relative; overflow: hidden; }
#newslist { position: absolute; padding: 0 0.5em; }
</style>
<script language="javascript" type="text/javascript">
 
var pos;
var speed = 1;
var pos_initial;
 
function startAnim() {
	var e = document.getElementById('newsbox');
	pos_initial = e.clientHeight + 10;
	pos = pos_initial;
	setInterval('anim()', 20);
}
function anim() {
	var e = document.getElementById('newslist');
	e.style.visibility = 'visible';
	e.style.top = Math.floor(pos) + 'px';
	pos = pos - speed;
	if(pos < -e.clientHeight) pos = pos_initial;
}
window.onload = function() {
  var e = document.getElementById('newsbox');
  e.onmouseover = function() { speed = 0; };
  e.onmouseout = function() { speed = 1; };
  startAnim()
};
</script>
</head>
 
<body>
<div id='newsbox'>
  <div id='newslist' style='visibility: hidden'>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
  </div>
</div>
</body>
</html>

**mdr_cedrick** · 19/01/2009, 11h26

merci beaucoup marcha
c'est exactement le comportement que je recherche, à une chose près c'est que j'aimerai que quand "titre 1" arrive en haut du <div> il se stop quelques secondes de manière à voir la chose (à savoir que pour moi le texte sera remplacé par une image)

**marcha** · 19/01/2009, 11h34

Salut,

dans la fonction anim tu peux faire un test sur la variable pos
et modifier speed à 0 quand le décalage correspond à la hauteur
de ton image. puis tu lance un setTimeout sur une fonction qui
remettra speed à 1 après le délai souhaité

**mdr_cedrick** · 19/01/2009, 16h18

j'ai pu obtenir ce que je voulais grâce à ton aide

à la seule chose près que j'aimerai que chaque image se stop or je n'ai que la première
car j'ai l'impression que le contenu du div est considéré comme un tout et non pas comme des éléments séparés

**marcha** · 19/01/2009, 16h55

Salut,

Je crois que tu es sur la bonne voie. A mon avis
c'est juste pos % multiple

J'ai toujours une crainte sur l'utilisation du modulo
avec des nombre négatifs. Essaye éventuellement (-pos) % multiple
ou alors avec Math.abs()

**mdr_cedrick** · 19/01/2009, 17h03

j'ai réussi à résoudre mon soucis entre temps
c'est effectivement pos % multiple
le négatif est bien gérer donc c'est impec
j'ai maintenant le comportement que je voulais
sans jQuery qui plus est !

énorme merci !

**dalton31** · 11/03/2009, 17h43

Bonjour,

Ce script me conviendrait parfaitement.
Cependant, il faut attendre que l'intégralité du texte ait fini de défiler et disparaisse par le haut avant que le début du texte ne réaparaisse par le bas.
Comme j'envisage une zone de défilement relativement haute, j'aurais souhaité un enchaînement plus rapide.
J'ai modifié les valeurs de la ligne if(pos < -e.clientHeight) pos = pos_initial;
mais cela ne me satisfait pas complètement.
Y'a t'il un moyen d'obtenir un enchaînement sans aucun blanc ?

Merci par avance de votre aide.

Cordialement,

Cédric

**marcha** · 12/03/2009, 08h40

Salut dalton31, et bienvenu sur le forum.

Pour éviter le blanc, c'est possible, mais ça se complique. Il faut travailler
avec deux blocs (clones) placé l'un en dessous de l'autre.

quand un bloc a complètement disparu, il faut le déplacer en dessous de
celui qui est en cours d'affichage et ainsi de suite.

**zyongh** · 17/03/2009, 20h40

Super l'exemple, dommage qu'il ne fonctionne pas sous Firefox. Je ne pas Opera sur le PC que je squatte donc je n'ai pas pu tester.

En tout cas sous IE, c'est cool.

**SanjeeOnP** · 16/06/2009, 12h57

Bonjour,

Envoyé par mdr_cedrick

merci beaucoup marcha
c'est exactement le comportement que je recherche, à une chose près c'est que j'aimerai que quand "titre 1" arrive en haut du <div> il se stop quelques secondes de manière à voir la chose (à savoir que pour moi le texte sera remplacé par une image)

Je cherche à avoir la même chose.
Je débute en jquery et je n'arrive pas à retranscrire vos conseils en JS.
Quelqu'un peut m'aider?

Merci

**artkap** · 17/03/2010, 17h19

J'aurais la même demande que Dalton :
Y aurais-t-il un moyen d'obtenir un enchaînement sans aucun blanc ?

Merci.

**marcha** · 18/03/2010, 08h37

Salut,

oui, mais il faut 2 copies du contenu défilant.
quand la copie 1 a entièrement disparu de la zone
visible (la copie 2 est donc visible) il faut déplacer
la copie 1 après la copie 2 dans le DOM.

faire de même avec la copie 2 une fois qu'elle n'est
plus visible, etc...

**danielhagnoul** · 18/03/2010, 09h43

Bonjour.

Marcha avait déjà donné la même réponse dans le message nº 9 : http://www.developpez.net/forums/m4102601-9/

**bourvil** · 21/03/2010, 17h30

Moi aussi j'aimerais bien reussir a faire un defillement sans espace, j'ai essayer de faire ce que propose marcha mais c un peu confus.
Pouvez vous eclaircir tout ca?

merci d'avance

**marcha** · 22/03/2010, 08h48

Salut,

Lors d'un défilement il faut placer le bloc à défiler après
la zone visible, le faire défiler jusqu'à ce qu'il la traverse
et en ressorte, puis le repositionner après et recommencer
comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Le bloc formant "un seul morceau" on est obligé de laisser une zone
vide pour lui permettre d'être totalement ressorti avant de le déplacer
à nouveau dans sa position initiale.

Pour éviter la zone vide, on clone le bloc pour en faire un jumeau que
l'on place après lui:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
         [  ]1234512345
         [ 1]234512345         
         [12]34512345
        1[23]4512345
       12[34]512345
      123[45]12345
     1234[51]2345
    12345[12]345
         [12]34512345 * une fois le premier bloc complètement sorti, on le déplace

voilà, j'espère que c'est plus clair ainsi :-)

EDIT: on part du principe que la taille de la zone visible est inférieur à la taille du bloc que
l'on fait défiler (sinon il pourrait être nécessaire de faire plusieurs clones)

**piwaille_pym** · 14/12/2010, 12h02

Bonjour,
merci pour ton explication Marcha,
J'ai bien compris le fonctionnement, cependant tu ne dit pas comment faire pour cloner une div ?

**marcha** · 14/12/2010, 13h50

Salut,

avec cloneNode

**kamal111** · 15/12/2011, 17h28

bonjour mdr_cedrick
pouvez vous mettre le code complet modifié
j'ai besoin de la meme chose que toi et j'ai pas réussi a stopper le texte pour quelque instant
merci d'avance

script avec défilement vertical

jQuery

Discussions similaires

Partager

Partager