Intersection Observer : Coder une Apparition au Scroll Performante

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:

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:

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:

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)
})

Pi�ce jointe 637352