Create an Animated 3D Tree Loader with HTML, CSS, and JavaScript
Step-by-Step Guide to Creating a 3D Tree Loader with HTML, CSS, and JavaScript
Welcome to Day 37 of the #100DaysOfCode Challenge! Today, we'll be creating an engaging animated 3D tree using HTML, CSS, and JavaScript. This project is perfect for enhancing your web development skills and adding a dynamic visual element to your portfolio. Follow this step-by-step guide to build your own animated 3D tree from scratch.
Introduction
In this project, we'll create a 3D tree animation that rotates and features dynamic branches and a stylish design. The project utilizes HTML for structure, CSS for styling and animation, and JavaScript for generating the tree components. By the end of this tutorial, you'll have a fully functional and visually appealing 3D tree animation on your webpage.
Setting Up the HTML
First, let's create the basic HTML structure. We'll include meta tags for SEO optimization and link to our CSS and JavaScript files.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Primary Meta Tags -->
<title>Animated 3D Tree</title>
<meta name="title" content="Animated 3D Tree" />
<meta name="description"
content="Explore a captivating tree animation project with dynamic branches, stylish design, and responsive motion using HTML, CSS, and JavaScript." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.instagram.com/withaarzoo/" />
<meta property="og:title" content="Animated 3D Tree" />
<meta property="og:description"
content="Explore a captivating tree animation project with dynamic branches, stylish design, and responsive motion using HTML, CSS, and JavaScript." />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://twitter.com/withaarzoo" />
<meta property="twitter:title" content="Animated 3D Tree" />
<meta property="twitter:description"
content="Explore a captivating tree animation project with dynamic branches, stylish design, and responsive motion using HTML, CSS, and JavaScript." />
</head>
<body>
<div class="container">
<div class="tree" id="tree"></div>
</div>
<script src="script.js"></script>
</body>
</html>
In this code, we set up a basic HTML document with meta tags for SEO and social media sharing. The tree div will be the container for our 3D tree.
Styling with CSS
Next, let's style our tree and its components using CSS. We'll add animations and 3D effects to bring our tree to life.
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
.tree {
position: relative;
width: 50px;
height: 50px;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(30deg);
animation: treeAnimate 5s linear infinite;
}
@keyframes treeAnimate {
0% {
transform: rotateX(-20deg) rotateY(360deg);
}
100% {
transform: rotateX(-20deg) rotateY(0deg);
}
}
.tree div {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateY(calc(25px * var(--x))) translateZ(0px);
}
.tree div.branch span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #69c069, #77dd77);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
border-bottom: 5px solid #00000019;
transform-origin: bottom;
transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
}
.tree div.stem span {
position: absolute;
top: 110px;
left: calc(50% - 7.5px);
width: 15px;
height: 50%;
background: linear-gradient(90deg, #bb4622, #df7214);
border-bottom: 5px solid #00000019;
transform-origin: bottom;
transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
}
.shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
filter: blur(20px);
transform-style: preserve-3d;
transform: rotateX(90deg) translateZ(-65px);
}
In this CSS code, we style the body to center our tree and give it a gradient background. The .tree class sets up the 3D transformations and animations. The @keyframes treeAnimate defines a rotation animation for the tree. The .branch and .stem classes style the tree branches and stem, respectively.
Adding Animation with JavaScript
Now, let's add the JavaScript code to dynamically generate the branches and stem of our tree.
JavaScript Code
document.addEventListener("DOMContentLoaded", function () {
const treeContainer = document.getElementById("tree");
const branchCount = 4; // Number of branches
for (let i = 0; i < branchCount; i++) {
const branch = document.createElement("div");
branch.classList.add("branch");
branch.style.setProperty("--x", i);
for (let j = 0; j < 4; j++) {
const span = document.createElement("span");
span.style.setProperty("--i", j);
branch.appendChild(span);
}
treeContainer.appendChild(branch);
}
const stem = document.createElement("div");
stem.classList.add("stem");
for (let i = 0; i < 4; i++) {
const span = document.createElement("span");
span.style.setProperty("--i", i);
stem.appendChild(span);
}
treeContainer.appendChild(stem);
});
This JavaScript code waits for the DOM to load and then generates the branches and stem of the tree. It uses loops to create div elements with the appropriate classes and CSS variables to position them correctly.
Conclusion
Congratulations! You've successfully created an animated 3D tree using HTML, CSS, and JavaScript. This project showcases your ability to combine different web technologies to create dynamic and visually appealing effects. Feel free to experiment with the code to create even more intricate designs.
Download Full Source Code
You can download the full source code for this project here. For more projects and to contact me, visit bento.me/withaarzoo.
Happy coding, and keep pushing forward in your #100DaysOfCode Challenge!