Heute zeige ich euch einen coolen Effekt, den ich lange gesucht habe. Und zwar wird es so ein Split Screen Effekt, wo eine Seite der Webseite irgenwann fixiert wird und der Rest ist weiter scrollbar.
Dieser Effekt ist perfekt wenn man etwas erklären möchte, oder viel Info unterhaltsam auf eine Webseite einbauen möchte.
Ich finde ihn voll cool – und dank GSAP ist es auch ein Effekt nicht nicht wirklich kompliziert ist.
Video
GSAP
Im Head müsst ihr die GSAP einbinden
1 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script> |
HTML
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 | <div class="start">
<h2>Split Screen Parallax GSAP Effekt</h2>
</div>
<div class="sektion">
<div class="sektion-titel">
Eric Mächler
</div>
<div class="seiten">
<div class="seite1">
<h3>Leben</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis laudantium magni aliquam, obcaecati exercitationem distinctio minus hic nobis qui quas incidunt sed atque pariatur, iure velit praesentium ipsum soluta fugit.</p>
</div>
<div class="seite2">
<h3>Beruf</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis laudantium magni aliquam, obcaecati exercitationem distinctio minus hic nobis qui quas incidunt sed atque pariatur, iure velit praesentium ipsum soluta fugit.</p>
</div>
<div class="seite3">
<h3>Hobby</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis laudantium magni aliquam, obcaecati exercitationem distinctio minus hic nobis qui quas incidunt sed atque pariatur, iure velit praesentium ipsum soluta fugit.</p>
</div>
</div>
</div>
<div class="ende">
<h2>WOW!</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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
body {
background-color: #f3f3f3;
}
.start {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
background-color: #6cf4fb;
}
.ende {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
background-color: #71ff67;
z-index: 99;
}
.sektion {
height: 300vh;
display: flex;
}
.sektion-titel {
width: 50%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
z-index: -10;
}
.seiten {
width: 50%;
}
.seite1 {
height: 100vh;
background-color: #87b1ff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.seite2 {
height: 100vh;
background-color: #5a94ff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.seite3 {
height: 100vh;
background-color: #2d75fa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h3 {
color: #fff;
}
p {
width: 80%;
color: #fff;
} |
GSAP
1 2 3 4 5 6 7 8 9 10 11 12 13 | gsap.registerPlugin(ScrollTrigger);
gsap.to(".seiten", {
//yPercent: -200,
ease: "none",
scrollTrigger: {
trigger: ".sektion",
start: "top top",
end: "bottom top",
scrub: true,
pin: ".sektion-titel",
}
}); |
0 Kommentare