Meta Description" name="description" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Herbatur Cinematic</title>
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<style>
body {
margin:0;
font-family: 'Georgia', serif;
background:#0a0a0a;
color:white;
}
/* HERO */
.hero {
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:#000;
}
.hero h1 {
font-size:40px;
}
/* PIN SECTION */
.section {
height:100vh;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
}
/* PRODUCT IMAGE */
.product {
width:200px;
opacity:0;
}
</style>
</head>
<body>
<section class="hero">
<div>
<h1>HERBATUR</h1>
<p>The Art of Hair Restoration</p>
</div>
</section>
<section class="section" id="scene1">
<img class="product" src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519">
</section>
<section class="section" id="scene2">
<div>Strength. Nourishment. Shine.</div>
</section>
<section class="section" id="scene3">
<div>Crafted from Nature</div>
</section>
<script>
gsap.registerPlugin(ScrollTrigger);
/* HERO FADE */
gsap.from(".hero h1", {
opacity:0,
y:50,
duration:1.5
});
/* PIN + ZOOM PRODUCT (APPLE STYLE) */
gsap.to(".product", {
scrollTrigger: {
trigger: "#scene1",
start: "top top",
end: "+=100%",
scrub: true,
pin: true
},
scale: 1.5,
opacity:1
});
/* TEXT SCENE */
gsap.from("#scene2 div", {
scrollTrigger: {
trigger: "#scene2",
start: "top 80%",
scrub: true
},
y:100,
opacity:0
});
/* FINAL FADE */
gsap.from("#scene3 div", {
scrollTrigger: {
trigger: "#scene3",
start: "top 80%",
scrub: true
},
opacity:0
});
</script>
</body>
</html>6
3
5445KB
5510KB
221.0ms
288.0ms
286.0ms