Introduction :
The Fanta landing page project is an immersive and visually captivating web application designed to promote the Fanta beverage brand effectively. By leveraging modern web development technologies, including HTML, CSS, and JavaScript, this landing page provides an engaging user experience that aligns with the vibrant and refreshing image of Fanta.
Fanta, known for its bold flavors and lively branding, requires a web presence that reflects its energetic and fun persona. This landing page achieves that by integrating sophisticated animations and interactive elements that keep users engaged as they scroll through the site. The GreenSock Animation Platform (GSAP) is pivotal in this project, providing smooth, responsive animations that enhance the user experience. GSAP is renowned for its performance and flexibility, making it an ideal choice for creating complex animations with minimal code.
The primary objective of this project is to showcase the Fanta brand through dynamic visual storytelling. The design is centered around bold colors, eye-catching images, and fluid animations that embody the fun and lively spirit of Fanta. The layout is meticulously structured to guide users through different sections seamlessly, each providing unique information and calls to action.
Key sections of the landing page include a striking header with the Fanta logo, a main visual section featuring animated elements like oranges and leaves, a content section detailing the latest flavor updates, and a product showcase that highlights Fanta alongside other popular beverages like Coca-Cola and Pepsi. Each section is designed to stand out, yet fit cohesively within the overall aesthetic of the page.
The interactive elements are designed to respond to user input, primarily through scroll-triggered animations. This approach means that as users scroll down the page, different elements come to life with animations, creating a dynamic flow that keeps the user engaged. This method not only enhances the user experience but also reinforces the playful and energetic brand identity of Fanta.
In summary, the Fanta landing page is a meticulously crafted web application that combines advanced web technologies and creative design to deliver an engaging and interactive user experience. It aims to promote the Fanta brand effectively by utilizing modern animation techniques and responsive web design principles. This project stands as a testament to how thoughtful design and cutting-edge technology can come together to create a memorable digital experience.
Explanation :
HTML Structure:
- The HTML layout is designed to be semantic and accessible, consisting of a navigation bar, a main content section divided into three parts, and individual product cards.
- Key elements include:
- Navigation Bar (
nav): Contains links to different sections of the site, allowing for easy navigation. - Main Visual Section (
.one): Features the Fanta logo and various images related to the brand, including oranges and leaves, which are key visual elements associated with Fanta. - Content Section (
.two): Includes a heading and a detailed description of the latest flavor updates, providing users with engaging content about the brand’s offerings. - Product Showcase (
.three): Displays product cards for Coca-Cola, Fanta, and Pepsi, each with a buy button to encourage user interaction and potential sales.
- Navigation Bar (
CSS Styling:
- The use of custom fonts (Product Sans and Product Sans Bold) ensures consistent and appealing typography that aligns with the brand’s visual identity.
- Global styles are applied to ensure uniform margins, padding, and box-sizing across all elements, providing a cohesive look and feel.
- Specific styles are applied to different sections and elements to control their size, position, and appearance, ensuring that the design is visually appealing and functional.
- Keyframes and transitions are defined to create animations that are triggered by user actions, adding an interactive layer to the user experience.
JavaScript Logic:
- The GSAP library is used extensively for creating animations that respond to user scrolling, adding a dynamic element to the page.
- Two main GSAP timelines (
tlandtl2) are set up to define the animations that occur when specific sections of the page are scrolled into view.- First Timeline (
tl): Manages the animations for elements in the.onesection, such as the Fanta logo and associated images. These animations are triggered when the user scrolls to the.twosection. - Second Timeline (
tl2): Handles the animations for elements in the.threesection, such as the product cards and associated images. These animations are triggered when the user scrolls to the.threesection.
- First Timeline (
- Each timeline coordinates the movement and transformation of various elements, ensuring a smooth and cohesive visual experience.
Source Code:
HTML (index.html)
<title>Fanta website Landing Page</title>
<div id="main">
<nav>
<a href="#">Developergtm</a>
<div class="cntr-nav">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Shop</a>
<a href="#">Contact</a>
</div>
<i class="ri-menu-fill"></i>
</nav>
<div class="one">
<h1>FANTA</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="orange-cut" data-src="Assets/orange2.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="fanta" data-src="Assets/fanta.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="orange" data-src="Assets/orange.webp" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="leaf" data-src="Assets/leaf.webp" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="leaf2" data-src="Assets/leaf2.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="leaf3" data-src="Assets/coconoutleaf.png" alt="">
</div>
<div class="two">
<div class="lft-two">
</div>
<div class="rght-two">
<h1>Flavour Updated</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="card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="lemon lemon1" data-src="Assets/lemon.webp" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="cocacola" data-src="Assets/cocacola.png" alt="">
<h1>CocaCola</h1>
<button>Buy Now</button>
</div>
<div class="card">
<h1>Fanta</h1>
<button>Buy Now</button>
</div>
<div class="card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="lemon lemon2" data-src="Assets/lemon.webp" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" id="pepsi" data-src="Assets/pepsi.png" alt="">
<h1>Pepsi</h1>
<button>Buy Now</button>
</div>
</div>
</div>
CSS (style.css)
@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;
}
#main{
width: 100%;
height: 100vh;
background-color: orangered;
}
nav{
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 10vh;
padding: 0vw 10vw;
z-index: 99;
}
nav a, i{
font-size: 1vw;
text-decoration: none;
color: #fff;
}
.cntr-nav{
display: flex;
gap: 3vw;
}
nav i{
font-size: 1.5vw;
}
.one{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background:linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 94, 0));
}
.one h1{
font-size: 25vw;
font-family: Product Sans B;
color: #fff;
}
#fanta{
position: absolute;
width: 40%;
z-index: 2;
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
#orange-cut{
position: absolute;
top: 10%;
left: 32%;
width: 15%;
z-index: 1;
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
#orange{
position: absolute;
width: 20%;
z-index: 3;
top: 55%;
right: 30%;
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
#leaf{
top: 10%;
left: 0%;
transform: rotate(60deg);
position: absolute;
width: 18%;
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
#leaf2{
top: 70%;
left: 80%;
transform: rotate(-90deg);
position: absolute;
width: 12%;
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
#leaf3{
position: absolute;
width: 20%;
top: 10%;
right: 0%;
}
.two{
display: flex;
width: 100%;
height: 100vh;
background:#4d231c ;
}
.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: #fff;
font-size: 5vw;
}
.rght-two p{
font-size: 1vw;
color: #fff;
width: 80%;
}
.three{
display: flex;
align-items: center;
justify-content: center;
gap: 5vw;
width: 100%;
height: 100vh;
background:linear-gradient(150deg, rgb(255, 166, 0), rgb(255, 94, 0));
}
.card{
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2vh;
width: 25vw;
height: 70vh;
margin-top: 10vh;
border-radius: 20px;
background-color: #fff;
}
.card h1{
margin-top: 40vh;
font-size: 3vw;
}
.card button{
font-size: 1vw;
border-radius: 50px;
border: none;
color: #fff;
background-color: rgb(255, 149, 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: -30%;
position: absolute;
left: 50%;
width: 25vw;
transform: translate(-50%, 0%);
transition: all cubic-bezier(0.19, 1, 0.22, 1)0.5s;
}
JavaScript (script.js)
var tl = gsap.timeline({scrollTrigger:{
trigger: ".two",
start: "0% 95%",
end: "70% 50%",
scrub: true,
// markers: true,
}})
tl.to("#fanta",{
top: "120%",
left: "0%"
}, 'orange')
tl.to("#orange-cut",{
top:"160%",
left: "23%"
}, 'orange')
tl.to("#orange",{
width: "15%",
top:"160%",
right: "10%"
}, 'orange')
tl.to("#leaf",{
top:"110%",
rotate: "130deg",
left: "70%"
}, 'orange')
tl.to("#leaf2",{
top:"110%",
rotate: "130deg",
left: "0%"
}, 'orange')
var tl2 = gsap.timeline({scrollTrigger:{
trigger: ".three",
start: "0% 95%",
end: "20% 50%",
scrub: true,
// markers: true,
}})
tl2.from(".lemon1",{
rotate: "-90deg",
left: "-100%",
top: "110%"
}, 'ca')
tl2.from("#cocacola",{
rotate: "-90deg",
top: "110%",
left: "-100%",
}, 'ca')
tl2.from(".lemon2",{
rotate: "90deg",
left: "100%",
top: "110%"
}, 'ca')
tl2.from("#pepsi",{
rotate: "90deg",
top: "110%",
left: "100%",
}, 'ca')
tl2.to("#orange-cut",{
width:"18%",
left: "42%",
top: "204%"
}, 'ca')
tl2.to("#fanta",{
width:"35%",
top: "210%",
left: "33%",
}, 'ca')
OUTPUT:
