Close Menu
    JavaScript

    How to create Animated Fanta Website using HTML CSS and JS

    Coding StellaBy No Comments6 Mins Read

    Let’s create an Animated Fanta Website using HTML, CSS, and JavaScript! 🍊✨
    This vibrant, scroll-based website features bold visuals, smooth animations, and a juicy Fanta vibe that grabs attention.

    We’ll use:

    • HTML to structure the layout – hero section, product display, and content blocks.
    • CSS for colorful themes, fonts, images, and transitions that bring the brand to life.
    • JavaScript for interactive animations, scroll effects, and responsiveness.

    Whether you’re just getting started or want to build a stylish landing page, this project is a fun and modern way to practice web design.

    HTML :

    This is a fun and visually engaging Fanta-themed animated website made using HTML, CSS, and JavaScript (with GSAP for animations). It has a modern layout with a logo, navigation menu, large Fanta visuals, animated fruits and leaves, and a section highlighting different drinks like CocaCola, Fanta, and Pepsi with “Buy Now” buttons. The site is styled using an external CSS file and animated with the GSAP library for smooth scroll effects and transitions.

    <!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="style.css">
    <title>Animated Fanta website | @coding.stella</title>
</head>
<body>
    <div id="main">
        <nav>
            <a href="#">Logo</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 id="orange-cut" src="Assets/orange2.png" alt="">
            <img id="fanta" src="Assets/fanta.png" alt="">
            <img id="orange" src="Assets/orange.webp" alt="">
            <img id="leaf" src="Assets/leaf.webp" alt="">
            <img id="leaf2" src="Assets/leaf2.png" alt="">
            <img id="leaf3" src="Assets/coconoutleaf.png" alt="">
        </div>
        <div class="two">
            <div class="lft-two">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#e04428" d="M41.5,-59.5C49.8,-51.1,49.7,-33.6,50.7,-19.2C51.7,-4.7,53.8,6.7,52.4,18.9C51.1,31.1,46.3,44.1,36.9,52.9C27.6,61.8,13.8,66.5,-2.5,70C-18.8,73.4,-37.7,75.6,-52.5,68.5C-67.3,61.5,-78.2,45.2,-84.5,27.1C-90.9,9,-92.7,-10.8,-80.5,-19.3C-68.3,-27.8,-42.1,-24.8,-26.3,-30.8C-10.6,-36.8,-5.3,-51.7,5.7,-59.5C16.6,-67.3,33.2,-68,41.5,-59.5Z" transform="translate(100 100)" />
                  </svg>
            </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 class="lemon lemon1" src="Assets/lemon.webp" alt="">
                <img id="cocacola" 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 class="lemon lemon2" src="Assets/lemon.webp" alt="">
                <img id="pepsi" src="Assets/pepsi.png" alt="">
                <h1>Pepsi</h1>
                <button>Buy Now</button>
            </div>
        </div>
    </div>


    <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="script.js"></script>
</body>
</html>

    CSS :

    This CSS file styles the Animated Fanta Website, giving it a modern, colorful, and interactive look. It uses custom fonts (Product Sans), hides scrollbars, and sets full-screen sections with vibrant gradients. The navigation bar is fixed at the top, and sections like .one, .two, and .three are full-height, flex-centered, and animated. Positioned images (like Fanta bottle, orange, and leaves) layer creatively for animation effects, and the product cards (CocaCola, Fanta, Pepsi) have smooth transitions, rounded corners, and “Buy Now” buttons with stylish designs. The layout is fully responsive using vw, vh, and flexbox.

    @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:

    This JavaScript uses GSAP with ScrollTrigger to animate elements as the user scrolls. It defines two timelines:

    1. First Timeline (tl): Triggers when section .two comes into view. It animates the Fanta bottle, orange slice, orange fruit, and leaves by moving and rotating them downward to match the scroll, creating a flowing transition between sections.
    2. Second Timeline (tl2): Triggers when section .three appears. It animates lemons, CocaCola, and Pepsi images entering from the sides with rotation, while also moving and resizing the orange and Fanta images to new positions.

    This creates a smooth, interactive scroll experience where elements animate dynamically into place.

    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')

    Creating an Animated Fanta Website with HTML, CSS, and JS is a fun project that blends design and animation. Perfect to level up your front-end skills while building something fresh and engaging! 🍹💻

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply