Bonsoir
Je désire appliquer un effet d'apparition d'images au scroll.J'ai préalablement appliqué un effet de rideau sur mes images qui s anime au lancement de la page
le problème est qu' en ajoutant l effet d'apparition au scroll avec le javascript rien ne marche plus ni l effet de rideau initial sur les images ni l'apparition au scroll
mon code html
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="container"> <div class="pic1 im"> <img src="img/Salade-nicoise.jpg" alt=""> </div> <div class="pic2 im"> <img src="img/Salade_comtoise.jpg" alt=""> </div> <div class="pic3 im"> <img src="img/chicken.jpg" alt=""> </div> <div class="pic4 im"> <img src="img/Agua-Fresca.jpg" alt=""> </div> <div class="pic5 im"> <img src="img/burger0.jpg" alt=""> </div> <div class="pic6 im"> <img src="img/fries.jpg" alt=""> </div> </div> <script src="script.js"></script> </body> </html>
mon code css:
Code css : 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 *,*::before,*::after{ box-sizing: border-box; margin: 0; padding: 0; } .pic1,.pic2,.pic4,.pic6{ width:400px; height: 400px; } .pic3,.pic5{ width: 450px; height: 700px; } .im img{ width: 100%; height: 100%; object-fit: cover; } .pic1{ grid-area: premiere; } .pic2{ grid-area: deuxieme; } .pic3{ grid-area: troisieme; } .pic4{ grid-area: quatrieme; } .pic6{ grid-area:cinquieme ; } .pic5{ grid-area: sixieme; } .container{ width: 90%; height: 600px; display: grid; grid-template-areas:"premiere . troisieme" "deuxieme . troisieme" " . . troisieme" " . . . " "quatrieme . sixieme" "cinquieme . sixieme" " . . sixieme"; row-gap: 29px; margin: 25px auto; opacity: 0; transition: opacity 0.2s ease-in-out; } .im{ position: relative; overflow: hidden; } .im::after{ content: ""; position: absolute; background-color:white; display: block; width: 100%; height: 100%; inset: 0; animation: rideauFadeIn 5s ease-in-out forwards; } @keyframes rideauFadeIn { 0%{ transform: translateY(0%); } 100%{ transform: translateY(-100%); } }
mon JS:
Code javascript : 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 const images = document.querySelectorAll(".container .im img") let options = { // root: null, rootMargin: "-10% 0px", threshold: 0.4 } function handleIntersect(entries){ console.log(entries); entries.forEach(entry => { if(entry.isIntersecting){ entry.target.style.opacity = 1; } }) } const observer = new IntersectionObserver(handleIntersect, options) images.forEach(image => { observer.observe(image) })
![]()
Partager