omgitsalexl/noel-design-atelier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added parallax effects to the images

Browse Source
This commit is contained in:
omgitsalexl
2026-09-18 12:00:18 -07:00
parent 4bc91ad114
commit 2afa6664dc
1 changed files with 42 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+42 -20
View File
@@ -19,7 +19,6 @@
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollSmoother.min.js"></script>
</head> </head>
<body id="top"> <body id="top">
@@ -80,7 +79,7 @@
</a> </a>
</div> </div>
<figure class="homepage-hero-image-figure" data-speed="0.5"> <figure class="homepage-hero-image-figure" data-parallax="10">
<div <div
class="photography-frame photography-frame-tall" class="photography-frame photography-frame-tall"
role="img" role="img"
@@ -100,7 +99,7 @@
</header> </header>
<div class="philosophy-content-grid"> <div class="philosophy-content-grid">
<figure class="philosophy-image-figure"> <figure class="philosophy-image-figure" data-parallax="10">
<div <div
class="photography-frame photography-frame-portrait" class="photography-frame photography-frame-portrait"
role="img" role="img"
@@ -175,7 +174,7 @@
</a> </a>
</div> </div>
<figure class="approach-image-figure"> <figure class="approach-image-figure" data-parallax="10">
<div <div
class="photography-frame photography-frame-landscape" class="photography-frame photography-frame-landscape"
role="img" role="img"
@@ -244,7 +243,7 @@
</div> </div>
<div class="work-gallery-grid" aria-label="Imagined holiday settings"> <div class="work-gallery-grid" aria-label="Imagined holiday settings">
<figure class="work-gallery-primary-figure"> <figure class="work-gallery-primary-figure" data-parallax="10">
<div <div
class="photography-frame photography-frame-wide" class="photography-frame photography-frame-wide"
role="img" role="img"
@@ -261,7 +260,7 @@
</figcaption> </figcaption>
</figure> </figure>
<figure class="work-gallery-secondary-figure"> <figure class="work-gallery-secondary-figure" data-parallax="10">
<div <div
class="photography-frame photography-frame-portrait" class="photography-frame photography-frame-portrait"
role="img" role="img"
@@ -278,7 +277,7 @@
</figcaption> </figcaption>
</figure> </figure>
<figure class="work-gallery-detail-figure"> <figure class="work-gallery-detail-figure" data-parallax="10">
<div <div
class="photography-frame photography-frame-square" class="photography-frame photography-frame-square"
role="img" role="img"
@@ -314,7 +313,7 @@
</a> </a>
</div> </div>
<figure class="client-fit-image-figure"> <figure class="client-fit-image-figure" data-parallax="10">
<div <div
class="photography-frame photography-frame-landscape" class="photography-frame photography-frame-landscape"
role="img" role="img"
@@ -464,19 +463,42 @@
<script> <script>
document.addEventListener("DOMContentLoaded", (event) => { document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger,ScrollSmoother) gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".animate-header").forEach((header) => { gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(header, { gsap.utils.toArray(".animate-header").forEach((header) => {
scrollTrigger: { gsap.from(header, {
trigger: header, scrollTrigger: {
start: "top 80%", trigger: header,
toggleActions: "play none none none", start: "top 80%",
}, toggleActions: "play none none none",
y: 50, },
opacity: 0, y: 50,
duration: 1, opacity: 0,
ease: "power2.out", duration: 1,
ease: "power2.out",
});
});
gsap.utils.toArray("figure[data-parallax]").forEach((figure) => {
const motion = Number(figure.dataset.parallax);
if (!Number.isFinite(motion) || motion === 0) return;
const frame = figure.querySelector(".photography-frame");
gsap.fromTo(figure, {
y: () => frame.offsetHeight * motion / 200,
}, {
y: () => -frame.offsetHeight * motion / 200,
ease: "none",
scrollTrigger: {
trigger: figure,
start: "clamp(top bottom)",
end: "clamp(bottom top)",
scrub: true,
invalidateOnRefresh: true,
},
});
}); });
}); });
}); });