Habt ihr euch schon mal gefragt wie man es hinbekommt, dass wenn man auf der Maus nach unten scrollt man am Bildschirm aber seitwärts verschiebt (seitwärts-scrollt) und erst später wieder weiter nach unten kommt? So eine Art Zick Zack Scrolling?
Mit so einem Effekt kann man den Webseitenbesucher ziemlich überraschen.
Heute zeige ich euch wie es geht.
Video
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="sektion1">
<h2>hello</h2>
</div>
<div class="container">
<div class="elemente">
<h3>Apfel</h3>
<img src="https://placehold.co/500x300" alt="Platzhalterbild">
<h3>Brot</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, dolorem.</p>
<h3>Weizenmehl</h3>
<img src="https://placehold.co/500x300" alt="Platzhalterbild">
<h3>Eis</h3>
<h3>Karotte</h3>
<img src="https://placehold.co/500x300" alt="Platzhalterbild">
</div>
</div>
<div class="sektion3">
<h2>Hoffe es hat dir gefallen</h2>
</div> |
CSS
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 | html, body {
overflow-x: hidden;
width: 100vw;
}
body {
background-color: #f3f3f3;
}
.sektion1 {
background-color: #4deaff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-y: hidden;
}
.sektion3 {
background-color: #4d50ff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-y: hidden;
}
.elemente {
width: fit-content;
display:flex;
flex-wrap: nowrap;
}
.elemente h3 {
font-size: 30vw;
flex-shrink: 0;
padding-right:0.3em;
padding-left:0.3em;
color:#fff;
}
.pin-spacer {
background-color: #000;
}
p {
color: green;
width: 1500px;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
} |
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> |
Und dann kommt der GSAP 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 | gsap.registerPlugin(ScrollTrigger);
const elemente = document.querySelector(".elemente")
function getScrollMenge(){
let elementeBreite = elemente.scrollWidth;
return -(elementeBreite - window.innerWidth);
}
const breite = gsap.to(elemente, {
x: getScrollMenge,
duration: 3,
ease: "none",
});
ScrollTrigger.create({
trigger: ".container",
start: "top 20%",
end: () => `+=${getScrollMenge() * -1}`,
pin:true,
animation:breite,
scrub:1,
invalidateOnRefresh:true,
markers:true
}); |
0 Kommentare