Discussion :

[Miksimus]

Bonjour à tous,

Après quelques recherches sur ce forum je suis toujours bredouille,

En effet, je cherche à "faire arriver" horizontalement (par la droite par exemple) une (ou plusieurs) div à mon écran en fonction du scroll de ma page. Est-il possible en CSS de réaliser ceci, ou du javascript est-il forcément obligatoire (et si c'est le cas, comment faire ?, je suis novice en JS).

Merci pour votre aide...

[NoSmoking]

Bonjour,
en CSS pur non, il va te falloir un peu de JavaScript pour tester la position du scroll de la fenêtre et en fonction de celle-ci lancer le déplacement de tes éléments via CSS et/ou JavaScript.

[Miksimus]

OK merci pour cet info,

Et donc comment en css uniquement, je déplace la div ? Je joue sur le margin-left (ou right) ou y a-t-il un autre moyen ?

Merci

[Invité]

Bonjour,

en CSS pur non...

Quel mot n'as-tu pas compris ?


En CSS3, il existe néanmoins les transitions :

• Glossaire des propriétés CSS : VII. Propriétés de transformation et d'animation (CSS 3)
• Les transformations en CSS3
• Utiliser les transitions CSS

Mais ça ne dépendra pas du scroll.

[Miksimus]

Ha heu oui en effet tu avais déjà répondu à ma question :-D
Merci pour les liens, je vais potasser tout ça :-)

[NoSmoking]

En complément, voici un petit florilège, non exhaustif, de ce que l'on peut faire.

• Exemple au survol

L'animation consiste à faire apparaître l'image au survol de l'élément conteneur puis à faire disparaître celle-ci lorsque l'on quitte la zone.

L'animation est géré par le CSS avec l'utilisation du sélecteur #cadre:hover img et en utilisant la propriété transition affectée à l'image.

Code :

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

1
2
3
4
5
6
7
8
#cadre img {
  position: absolute;
  right: -100%;
  transition: all .5s;
}
#cadre:hover img {
  right: 0;
}

• Exemple sur action

L'animation consiste à faire apparaître l'image sur une action puis à la faire disparaître sur une autre action.

L'animation est déclenchée en ajoutant/supprimant une classe à l'image, ceci est géré en JavaScript en utilisant la méthode element.classList.toggle().

Code js :

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

1
2
3
4
// ajout/suppression de la class au click ou autre action
oBtn.addEventListener('click', function (e) {
  oImg.classList.toggle('visible');
});

L'animation proprement dite est gérée par le CSS.

Code :

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

1
2
3
#cadre img.visible {
  right: 0;
}

• Exemple va et vient sur action

L'animation consiste à faire apparaître puis disparaître l'image.

L'animation est déclenchée en ajoutant une classe à l'image, ceci est géré en JavaScript en utilisant la méthode element.classList.add() puis en la supprimant en fin d'animation.

Code js :

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

1
2
3
4
// ajout de la class au click ou autre action
oBtn.addEventListener('click', function (e) {
  oImg.classList.add('show-hide');
});

La suppression en fin d'animation se fait en plaçant un écouteur animationend sur l'image, et en utilisant la méthode element.classList.remove().

Code js :

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

1
2
3
4
// supprime la class en fin d'animation
oImg.addEventListener('animationend', function(e){
  this.classList.remove('show-hide');
});

L'animation proprement dite est gérée par le CSS en utilisant la propriété animation et une règle @keyframes.

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
#cadre img.show-hide {
  animation: show-hide 1s linear;
}
@keyframes show-hide {
  0% {
    right: -100%;
  }
  40% {
    right: 0;
  }
  60% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}

• Exemple pour voir

Code html :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Animation CSS simple</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana,sans-serif;
  background: #FFF;
}
#main {
  margin: auto;
  max-width: 60em;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
section {
  margin: 0 1em 2em;
}
button {
  min-width: 10em;
  font: inherit;
  cursor: pointer;
}
button.on:before {
  content: "Affiche ";
}
button.off:before {
  content: "Masque ";
}
[id^=cadre] {
  position: relative;
  width: 12.5em;
  height: 12em;
  border: 1px solid #ccc;
  overflow: hidden;
}
[id^=cadre] img {
  position: absolute;
  right: -100%;
  transition: all .5s;
}
#cadre-1:hover img,
#cadre-2 img.visible {
  right: 0;
}
#cadre-3 img.show-hide {
  animation: show-hide 1s linear;
}
@keyframes show-hide {
  0% {
    right: -100%;
  }
  40% {
    right: 0;
  }
  60% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
code {
  color : #00F;
  color: #217ac0;
  font: inherit;
}
</style>
</head>
<body>
<div id="main">
  <h1>Animation CSS simple</h1>
  <section>
    <h2>Exemple au survol</h2>
    <div id="cadre-1">
      <img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif" alt="">
    </div>
  </section>
 
  <section>
    <h2>Exemple sur action</h2>
    <div id="cadre-2">
      <img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif" alt="">
    </div>
    <p><button class="on">image</button></p>
  </section>
 
  <section>
    <h2>Exemple va et vient sur action</h2>
    <div id="cadre-3">
      <img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif" alt="">
    </div>
    <p><button>show-hide</button></p>
  </section>
</div>
<script>
var oBtns = document.querySelectorAll('button');
var oImgs = document.querySelectorAll('img');
// ajout/suppression de la class au click ou autre
oBtns[0].addEventListener('click', function () {
  this.classList.toggle('on');
  this.classList.toggle('off');
  oImgs[1].classList.toggle('visible');
});
// ajout de la class au click ou autre action
oBtns[1].addEventListener('click', function (e) {
  oImgs[2].classList.add('show-hide');
});
// supprime la class en fin d'animation
oImgs[2].addEventListener('animationend', function (e) {
  this.classList.remove('show-hide');
});
</script>
</body>
</html>

Ton cas se situerait plutôt sur l'exemple 2.

[EDIT] Correction lien sur image

A lire : Cours et tutoriels pour apprendre CSS