Today we Will Learn How To Make Animated Website Using Html and Css Js With Mobile Responsive
Introduction:
Let’s create a TikTok-style animation site for showcasing different fruit juices using HTML, CSS, and JavaScript. This project will feature an interactive wheel of juice images that rotates to display different juice options.
HTML Structure:
The HTML sets up a main container with a navigation bar, content area, and two image wheels. The content area includes juice information and a set of clickable juice images. The two image wheels contain larger versions of the juice bottles and fruit backgrounds
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tiktok animation site</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<main>
<nav>
<img src="./images/logo.png" alt="logo" class="logo" />
<div class="menu-text">
<p>Home</p>
<p>Flavor</p>
<p>About</p>
</div>
<button>Shop online</button>
</nav>
<div class="content">
<div class="juice-text">
<h1>Orange Juice</h1>
<p class="juice-info">
Orange juice is a liquid extract of the orange tree fruit, produced
by squeezing or reaming oranges. It comes in several different
varieties, including blood orange, navel oranges, valencia orange,
clementine, and tangerine.
</p>
</div>
<div class="photos">
<div class="juice-wrapper activePhoto">
<img src="./images/juice1.png" alt="juice1" class="static-juice">
</div>
<div class="juice-wrapper">
<img src="./images/juice2.png" alt="juice2" class="static-juice">
</div>
<div class="juice-wrapper">
<img src="./images/juice3.png" alt="juice3" class="static-juice">
</div>
<div class="juice-wrapper ">
<img src="./images/juice4.png" alt="juice4" class="static-juice">
</div>
</div>
</div>
<div class="juice-wheel">
<img src="./images/juice1.png" alt="juice1" class="dynamic-juice-1" />
<img src="./images/juice2.png" alt="juice1" class="dynamic-juice-2" />
<img src="./images/juice3.png" alt="juice1" class="dynamic-juice-3" />
<img src="./images/juice4.png" alt="juice1" class="dynamic-juice-4" />
</div>
<div class="fruits-wheel">
<img src="./images/bgorange.png" alt="orange" class="dynamic-fruits-1">
<img src="./images/bgplumb.png" alt="plumb" class="dynamic-fruits-2">
<img src="./images/bgkiwi.png" alt="kiwi" class="dynamic-fruits-3">
<img src="./images/bgstrawberry.png" alt="strawberry" class="dynamic-fruits-4">
</div>
</main>
</body>
</html>CSS Styling:
The CSS styles the page for a visually appealing experience. It centers the main content, applies a gradient background, and styles the navigation and content areas. The juice wheels are positioned absolutely and rotated for a unique visual effect. Animations are used for smooth transitions and a fade-in effect for text changes.
CSS Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #191629;
}
main{
position: relative;
display: flex;
justify-content: space-between;
flex-direction: column;
width: 900px;
height: 550px;
border-radius: 20px;
overflow: hidden;
-webkit-box-shadow: -7px 10px 111px -33px rgba(0,0,0,0.75);
-moz-box-shadow: -7px 10px 111px -33px rgba(0,0,0,0.75);
box-shadow: -7px 10px 111px -33px rgba(0,0,0,0.75);
background: linear-gradient(90deg, rgba(167,162,244,1) 0%, rgba(112,112,143,1) 35%, rgba(166,149,13,1) 100%, rgba(0,212,255,1) 100%);
}
nav{
display: flex;
justify-content:space-between;
padding: 20px 30px;
align-items: center;
z-index: 1;
}
.logo{
width: 40px;
height: 40px;
}
.menu-text{
display: flex;
gap:50px;
font-weight: 600;
color:white;
}
.juice-text{
z-index: 1;
}
h1{
text-align: center;
color:white;
}
.juice-info{
text-align: center;
margin-top: 20px;
color: white;
}
button{
font-size: 18px;
padding: 10px 30px;
border-radius: 15px;
background-color: transparent;
border: 1px solid white;
color:white;
cursor: pointer;
}
.content{
display: flex;
flex-direction: column;
width: 50%;
gap:80px;
margin: 30px;
}
.juice-wrapper{
width: 90px;
height: 120px;
padding-bottom:10px ;
z-index: 1;
}
.static-juice{
width: 100%;
height: 100%;
cursor:pointer;
}
.photos{
display: flex;
margin-left: 20px;
}
.activePhoto{
border-bottom: 2px solid white;
}
.juice-wheel{
width: 500px;
height: 500px;
border-radius: 50%;
position: absolute;
right:-280px;
bottom:-300px;
transform: rotate(-45deg);
transition: transform 1s;
z-index: 1;
}
.juice-wheel img{
width: 320px;
}
.dynamic-juice-1{
position: absolute;
top:-350px;
right:90px;
}
.dynamic-juice-2{
position: absolute;
transform: rotate(90deg);
right:-290px;
top:30px;
}
.dynamic-juice-3{
position: absolute;
transform: rotate(180deg);
bottom:-350px;
right:83px;
}
.dynamic-juice-4{
position: absolute;
transform: rotate(-90deg);
top:30px;
left:-290px
}
.fruits-wheel{
width: 700px;
height: 700px;
border-radius: 50%;
position: absolute;
top:-600px;
left:-480px;
transform: rotate(-45deg);
transition: transform 1s;
z-index: 0;
}
.fruits-wheel img{
width: 650px;
opacity: 40%;
}
.dynamic-fruits-1{
position: absolute;
transform: rotate(90deg);
bottom: -500px;
left:10px;
}
.dynamic-fruits-2{
position: absolute;
transform: rotate(180deg);
bottom: 200px;
left:-580px;
}
.dynamic-fruits-3{
position: absolute;
transform: rotate(100deg);
top: -350px;
left:90px;
}
.dynamic-fruits-4{
position: absolute;
bottom: 120px;
right:-600px;
}
.fade-in {
animation: fadeIn 1.5s forwards;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
JavaScript Functionality:
The JavaScript handles the interactivity of the juice selection. When a juice image is clicked, it updates the background gradient, rotates the juice and fruit wheels, changes the juice name and description, and applies a fade-in animation to the text. The script uses an array of juice data to populate the information for each selection.
JS:
const juiceArray = document.querySelectorAll(".juice-wrapper");
const title = document.querySelector("h1");
const description = document.querySelector(".juice-info");
const juiceWheel = document.querySelector(".juice-wheel");
const fruitsWheel = document.querySelector(".fruits-wheel");
const juiceText = document.querySelector(".juice-text");
let currentJuice = juiceArray[0];
let deg = -45;
const juiceData = [
{
name: "Orange Juice",
descriptioN:
"Orange juice is a liquid extract of the orange tree fruit, produced by squeezing or reaming oranges. It comes in several different varieties, including blood orange, navel oranges, valencia orange, clementine, and tangerine.",
backgroundColor:
"linear-gradient(90deg, rgba(167,162,244,1) 0%, rgba(112,112,143,1) 35%, rgba(166,149,13,1) 100%, rgba(0,212,255,1) 100%)",
},
{
name: "Plum Juice",
descriptioN:
"A luscious elixir extracted from ripe plums. Bursting with rich flavor and natural sweetness, it delivers a refreshing and satisfying experience. Indulge in the succulent essence of plums while enjoying the numerous health benefits it offers.",
backgroundColor:
"linear-gradient(90deg, rgba(2,19,45,1) 4%, rgba(120,109,181,1) 49%, rgba(230,132,132,1) 100%, rgba(0,212,255,1) 100%)",
},
{
name: "Kiwi Juice",
descriptioN:
"A vibrant and tangy elixir extracted from ripe kiwis. Packed with essential nutrients, it offers a refreshing and invigorating experience. The perfect balance of sweetness and tanginess makes it a popular choice for a healthy and flavorful beverage.",
backgroundColor:
"linear-gradient(90deg, rgba(9,111,55,1) 0%, rgba(39,196,129,1) 49%, rgba(47,209,232,1) 100%, rgba(0,212,255,1) 100%)",
},
{
name: "Strawberry Juice",
descriptioN:
"Strawberry Juice is a refreshing fresh fruit juice that is full of vitamin C and antioxidants and lot of invigorating flavor. Apart from fresh and ripe strawberries, this recipe also uses lime juice to make it tantalizing.",
backgroundColor:
"linear-gradient(90deg, rgba(101,18,18,1) 0%, rgba(186,44,44,1) 49%, rgba(235,134,80,1) 100%, rgba(0,212,255,1) 100%)",
},
];
juiceArray.forEach((element, index) => {
element.addEventListener("click", () => {
document.querySelector("main").style.background =
juiceData[index].backgroundColor;
deg = deg - 90;
juiceWheel.style.transform = `rotate(${deg}deg)`;
fruitsWheel.style.transform = `rotate(${deg}deg)`;
title.innerHTML = juiceData[index].name;
description.innerHTML = juiceData[index].descriptioN;
currentJuice.classList.remove("activePhoto");
element.classList.add("activePhoto");
currentJuice = element;
juiceText.classList.add("fade-in");
setTimeout(() => {
juiceText.classList.remove("fade-in");
}, 1000);
});
});
This TikTok-style Juice Animation site combines HTML structure, CSS animations, and JavaScript functionality to create an engaging and interactive showcase of different fruit juices. It’s designed to be visually striking and user-friendly, allowing visitors to explore different juice options with smooth animations and transitions.
If Your Project is Not Working or Has Any Problem Don’t Worry, Just Click on Below Download Assets File And You Will Be Able To Get Full Control Of Our Projects , Then Customize And Use it For Your Coding Journey. Let the coding adventure begin!
