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
+31 -9
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/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollSmoother.min.js"></script>
</head>
<body id="top">
@@ -80,7 +79,7 @@
</a>
</div>
<figure class="homepage-hero-image-figure" data-speed="0.5">
<figure class="homepage-hero-image-figure" data-parallax="10">
<div
class="photography-frame photography-frame-tall"
role="img"
@@ -100,7 +99,7 @@
</header>
<div class="philosophy-content-grid">
<figure class="philosophy-image-figure">
<figure class="philosophy-image-figure" data-parallax="10">
<div
class="photography-frame photography-frame-portrait"
role="img"
@@ -175,7 +174,7 @@
</a>
</div>
<figure class="approach-image-figure">
<figure class="approach-image-figure" data-parallax="10">
<div
class="photography-frame photography-frame-landscape"
role="img"
@@ -244,7 +243,7 @@
</div>
<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
class="photography-frame photography-frame-wide"
role="img"
@@ -261,7 +260,7 @@
</figcaption>
</figure>
<figure class="work-gallery-secondary-figure">
<figure class="work-gallery-secondary-figure" data-parallax="10">
<div
class="photography-frame photography-frame-portrait"
role="img"
@@ -278,7 +277,7 @@
</figcaption>
</figure>
<figure class="work-gallery-detail-figure">
<figure class="work-gallery-detail-figure" data-parallax="10">
<div
class="photography-frame photography-frame-square"
role="img"
@@ -314,7 +313,7 @@
</a>
</div>
<figure class="client-fit-image-figure">
<figure class="client-fit-image-figure" data-parallax="10">
<div
class="photography-frame photography-frame-landscape"
role="img"
@@ -464,8 +463,9 @@
<script>
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger,ScrollSmoother)
gsap.registerPlugin(ScrollTrigger);
gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
gsap.utils.toArray(".animate-header").forEach((header) => {
gsap.from(header, {
scrollTrigger: {
@@ -479,6 +479,28 @@
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,
},
});
});
});
});
</script>
</html>