Hin und wieder eine coole Animation auf einer Webseite eingesetzt macht das ganze viel hübscher. Heute zeige ich euch wie ihr eine Liste mit einem Scroll-Effekt erweitern könnt. Mit diesem Effekt kann der User rauf und runter scrollen und dann sieht er irgendwann eine Liste. Damit wir diesen Effekt bauen können, verwenden wir die GSAP Bibliothek
Video
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div class="container"><div class="text">start</div></div>
<div class="container">
<ul class="einkaufsliste">
<li>Brot</li>
<li>Bier</li>
<li>Wein</li>
<li>Mayo</li>
<li>Rüebli</li>
<li>Zwiebeln</li>
<li>Hördöpfel</li>
<li>Fleischkäse</li>
<li>Mozzarella</li>
</ul>
</div>
<div class="container"><div class="text">ende</div></div> |
<div class="container"><div class="text">start</div></div>
<div class="container">
<ul class="einkaufsliste">
<li>Brot</li>
<li>Bier</li>
<li>Wein</li>
<li>Mayo</li>
<li>Rüebli</li>
<li>Zwiebeln</li>
<li>Hördöpfel</li>
<li>Fleischkäse</li>
<li>Mozzarella</li>
</ul>
</div>
<div class="container"><div class="text">ende</div></div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .text {
color: antiquewhite;
font-size: 40px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
}
.einkaufsliste li {
color: aliceblue;
font-size: 25px;
list-style: none;
opacity: 0;
transform: translate(-50px);
} |
.text {
color: antiquewhite;
font-size: 40px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
}.einkaufsliste li {
color: aliceblue;
font-size: 25px;
list-style: none;
opacity: 0;
transform: translate(-50px);
}
GSAP
Zuert müsst ihr natürlich noch zuerst GSAP und ScrollTrigger im Head verlinken
1
2
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
Und hier ist der Code mit dem Effekt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| gsap.registerPlugin(ScrollTrigger);
gsap.to(".einkaufsliste li", {
scrollTrigger: {
trigger: ".einkaufsliste li",
start: "center 60%",
end: "center 40%",
markers: true,
toggleActions: "restart none none reverse",
scrub: true /* true = scroll sonst zeit */
},
opacity: 1,
x: 0,
duration: 0.5,
stagger: 0.3
}); |
gsap.registerPlugin(ScrollTrigger);gsap.to(".einkaufsliste li", {
scrollTrigger: {
trigger: ".einkaufsliste li",
start: "center 60%",
end: "center 40%",
markers: true,
toggleActions: "restart none none reverse",
scrub: true /* true = scroll sonst zeit */
},
opacity: 1,
x: 0,
duration: 0.5,
stagger: 0.3
});
0 Kommentare