Déplacement horizontal de div selon le scroll
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...
Animation CSS simple, exemples
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:
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:
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:
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:
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:
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:
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:
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
