<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1/bundled/lenis.min.css”>
<link rel=”stylesheet” href=”style.css”>
<title>Animated Fanta website | @coding.stella</title>
</head>
<style>
@font-face {
font-family: Product Sans;
src: url(Fonts/Product\ Sans\ Regular.ttf);
}
@font-face {
font-family: Product Sans B;
src: url(Fonts/Product\ Sans\ Bold.ttf);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Product Sans;
}
html , body{
height: 100%;
width: 100%;
}
body::-webkit-scrollbar {
display: none;
}
/* Performance optimizations for smooth animations */
#fanta, #cocacola, #pepsi, .lemon, #orange-cut, #orange, #leaf, #leaf2 {
will-change: transform;
backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.card img {
will-change: transform;
backface-visibility: hidden;
}
.one{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background:rgb(250 247 240 / 1.0);
}
.one h1{
font-size: 14vw;
font-family: Product Sans B;
color: #002b49;
}
#fanta{
position: absolute;
width: 40%;
left: 50%;
transform: rotate(44deg) translateX(30%);
z-index: 2;
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
.two{
display: flex;
width: 100%;
height: 100vh;
background:#ffffff ;
}
.lft-two, .rght-two{
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
gap: 5vh;
width: 50%;
height: 100%;
}
.lft-two svg{
margin-top: 50vh;
width: 90%;
transform: rotateX(50deg);
}
.rght-two h1{
color: #000;
font-size: 5vw;
}
.rght-two p{
font-size: 1vw;
color: #000;
width: 80%;
}
.three{
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
height: 100vh;
background:rgb(250 247 240 / 1.0);
}
.three {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
perspective: 1200px;
}
.card {
width: 180px;
height: 300px;
background: white;
border-radius: 20px;
box-shadow: 0 0 10px rgba(255,255,255,0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.5s ease, opacity 0.5s ease;
position: relative;
}
.card h1 {
font-size: 18px;
margin-bottom: 10px;
}
.card button {
padding: 8px 16px;
border: none;
background: gold;
color: black;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
/* .card:nth-child(1) {
transform: rotateY(40deg) scale(0.9);
opacity: 1;
}
.card:nth-child(2) {
transform: rotateY(20deg) scale(0.95);
opacity: 1;
}
.card:nth-child(3) {
transform: rotateY(0deg) scale(1.05);
z-index: 1;
}
.card:nth-child(4) {
transform: rotateY(-20deg) scale(0.95);
opacity: 1;
}
.card:nth-child(5) {
transform: rotateY(-40deg) scale(0.9);
opacity: 1;
} */
.card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2vh;
width: 25vw;
height: 81vh;
margin-top: 10vh;
border-radius: 20px;
background-color: #fff;
}
.card h1{
margin-top: 52vh;
font-size: 28px;
}
.card button{
font-size: 1vw;
border-radius: 50px;
border: none;
color: #fff;
background-color: rgb(0, 0, 0);
padding: 1vw 2vw;
}
#cocacola{
top: -15%;
position: absolute;
width: 60%;
left: 50%;
transform: translate(-50%, 0%);
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
#pepsi{
top: -15%;
position: absolute;
width: 85%;
left: 50%;
transform: translate(-50%, 0%);
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
.lemon{
top: 0%;
position: absolute;
left: 50%;
width: 25vw;
transform: translate(-50%, 0%);
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
img.cover-page-img {
position: absolute;
width: 40%;
z-index: 2;
transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
}
.heading-content p {
font-size: 20px;
width: 35%;
}
.infographic {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 120px 6%; */
/* background: #fff; */
}
/* CENTER PRODUCT */
.product {
position: relative;
width: 380px;
height: 380px;
display: flex;
align-items: center;
justify-content: center;
}
.product .circle {
position: absolute;
width: 380px;
height: 380px;
background: #f1f8f6;
border-radius: 50%;
z-index: 1;
}
.product img {
position: relative;
z-index: 2;
max-height: 520px;
}
/* LEFT & RIGHT PANELS */
.info {
width: 30%;
display: flex;
flex-direction: column;
gap: 70px;
}
.item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.info.right .item {
flex-direction: row-reverse;
text-align: right;
}
.item img {
width: 75px;
flex-shrink: 0;
}
.item h3 {
font-size: 22px;
font-weight: 700;
color: #263238;
}
.item p {
margin-top: 8px;
font-size: 15px;
line-height: 1.7;
color: #777;
}
/* MOBILE */
@media (max-width: 900px) {
.infographic {
flex-direction: column;
gap: 60px;
}
.info {
width: 100%;
text-align: center;
}
.item {
justify-content: center;
}
.info.right .item {
flex-direction: row;
}
.product {
width: 280px;
height: 280px;
}
.product .circle {
width: 280px;
height: 280px;
}
}
</style>
<body>
<section class=”home-surround-spray”>
<div id=”main”>
<div class=”one”>
<div class=”heading-content”>
<h1>
The future
of <br>
Ramahara</h1>
<p>Intelligent skin and hair products that refuse to take aging seriously.
Find out exactly what you need.</p>
</div>
<!– <img id=”fanta” class=”cover-page-img” src=”AEROME COVER PAGE.png” alt=””> –>
<img id=”fanta” src=”ramahara-img.png” alt=”” loading=”eager”>
</div>
<div class=”two”>
<div class=”lft-two”>
</div>
<div class=”rght-two”>
<h1>How to Use</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, excepturi sed, itaque placeat id natus soluta veniam obcaecati qui a laborum laboriosam dolorem illum labore sit, voluptates commodi neque dolores tempore temporibus deleniti? Nobis, ratione hic error quis cum neque nulla laudantium nostrum sit nihil dolorum quisquam enim quaerat, eaque ex sequi, harum totam quia non! Labore, neque! Amet voluptatem illo similique recusandae! Ex quaerat quibusdam asperiores, ducimus tempore magni labore. Tenetur voluptas, quos ex repellendus provident mollitia laboriosam adipisci alias a impedit, cum accusamus rerum delectus eaque facilis veniam quia laborum incidunt ea assumenda! Eos magni aspernatur quod distinctio.</p>
</div>
</div>
<div class=”three”>
<div class=”infographic”>
<!– LEFT –>
<div class=”info left”>
<div class=”item”>
<img src=”face-cleanser.png”>
<div>
<h3>Gentle Deep Cleansing</h3>
<p>Removes dirt, excess oil and impurities without drying your skin.</p>
</div>
</div>
<div class=”item”>
<img src=”beauty.png”>
<div>
<h3>Acne & Pore Control</h3>
<p>Unclogs pores and helps prevent breakouts for clearer skin.</p>
</div>
</div>
<div class=”item”>
<img src=”woman.png”>
<div>
<h3>Smooth Texture</h3>
<p>Refines rough skin and supports an even, soft complexion.</p>
</div>
</div>
</div>
<!– CENTER –>
<div class=”product”>
<!– <div class=”circle”></div>
<img src=”product.png” alt=”Skin Luminance Cleanser”> –>
</div>
<!– RIGHT –>
<div class=”info right”>
<div class=”item”>
<img src=”glow.png”>
<div>
<h3>Radiant Skin Glow</h3>
<p>Boosts natural brightness for healthy-looking skin.</p>
</div>
</div>
<div class=”item”>
<img src=”skin-cell.png”>
<div>
<h3>Calm & Balanced</h3>
<p>Soothes redness and restores skin comfort.</p>
</div>
</div>
<div class=”item”>
<img src=”skin-care.png”>
<div>
<h3>Fresh Clean Finish</h3>
<p>Leaves skin feeling refreshed, soft and purified.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js” integrity=”sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js” integrity=”sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>
<script src=”https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1/bundled/lenis.min.js”></script>
<script src=”script.js”></script>
<script>
// Preload images to prevent lag
const images = [
‘Untitled design (6).png’,
‘Jasmine Allure.png’,
‘Nargis Dream.png’,
‘Apple Cinnamon.png’,
‘Blooming Cherry.png’
];
images.forEach(src => {
const img = new Image();
img.src = src;
});
// Initialize Lenis for smoother and faster scrolling
const lenis = new Lenis({
duration: 0.6,
easing: (t) => Math.min(1, 1.001 – Math.pow(2, -10 * t)),
direction: ‘vertical’,
gestureDirection: ‘vertical’,
smooth: true,
mouseMultiplier: 1.2,
smoothTouch: false,
touchMultiplier: 2,
infinite: false,
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// Integrate Lenis with GSAP ScrollTrigger
lenis.on(‘scroll’, ScrollTrigger.update);
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
// Refresh ScrollTrigger after a short delay to ensure smooth integration
gsap.delayedCall(0.1, () => {
ScrollTrigger.refresh();
});
// Existing GSAP animations with adjusted scrub for balance between speed and smoothness
var tl = gsap.timeline({scrollTrigger:{
trigger: “.two”,
start: “0% 95%”,
end: “50% 50%”,
scrub: true,
anticipatePin: 1,
// markers: true,
}})
tl.to(“#fanta”,{
top: “90%”,
left: “-5%”,
rotation: 0,
xPercent: 0,
ease: “none”,
}, ‘orange’)
tl.to(“#orange-cut”,{
top:”160%”,
left: “23%”,
ease: “none”
}, ‘orange’)
tl.to(“#orange”,{
width: “15%”,
top:”160%”,
right: “10%”,
ease: “none”
}, ‘orange’)
tl.to(“#leaf”,{
top:”110%”,
rotate: “130deg”,
left: “70%”,
ease: “none”
}, ‘orange’)
tl.to(“#leaf2”,{
top:”110%”,
rotate: “130deg”,
left: “0%”,
ease: “none”
}, ‘orange’)
var tl2 = gsap.timeline({scrollTrigger:{
trigger: “.three”,
start: “0% 95%”,
end: “15% 50%”,
scrub: true,
anticipatePin: 1,
}})
tl2.from(“#cocacola”,{
rotate: “-90deg”,
top: “110%”,
left: “-100%”,
ease: “none”
}, ‘ca’)
tl2.from(“#pepsi”,{
rotate: “90deg”,
top: “110%”,
left: “100%”,
ease: “none”
}, ‘ca’)
tl2.to(“#orange-cut”,{
width:”18%”,
left: “42%”,
top: “204%”,
ease: “none”
}, ‘ca’)
tl2.to(“#fanta”,{
width:”40%”,
top: “190%”,
left: “22%”,
ease: “none”
}, ‘ca’)
</script>
</body>
</html>