In today’s digital age, where attention spans are limited, we are creating an animated website using HTML CSS and javascript, animated website can be a powerful tool to captivate visitors and create a memorable online experience.
Combining the fundamental technologies of HTML, CSS, and JavaScript allows you to design a visually stunning and interactive website that stands out from the competition.
Before designing your animated website, have a clear vision of what you want to achieve. Define the purpose of your website and its target audience. Determine the message you want to convey and the emotions you wish to evoke through animations.
Map out the layout of your website on paper or using design tools. Sketch wireframes to visualize the arrangement of elements and their interactions. Consider the flow of information, user navigation, and the position of animated components.
Select a color scheme that aligns with your website’s theme and brand identity. Consider the psychological impact of colors and how they can enhance your animations.
Animated Website using HTML CSS and JavaScript
Create or gather the graphics and assets you’ll use in your animated website. Use vector graphics, icons, images, and other visual elements that complement the overall design and align with your brand.
Start building your website by creating the HTML structure. Use semantic elements like headers, navbars, main content sections, and footers to organize your content logically. This will improve accessibility and SEO.
Apply CSS styles to bring your website to life visually. Define fonts, colors, backgrounds, margins, and paddings to ensure a consistent and aesthetically pleasing design. Utilize CSS media queries for responsive design across different devices.
Familiarize yourself with CSS animations and transitions. Learn how to use keyframes to create smooth animations for elements like buttons, links, and images. Experiment with different timing functions and durations.
Introduce JavaScript to add interactivity to your website. Learn the basics of DOM manipulation to handle user interactions, such as clicks, hovers, and form submissions.
Explore animation libraries like GreenSock (GSAP) or Animate. css to create more complex and impressive animations with ease. Learn how to integrate these libraries into your website for smoother performance.
Take your animations to the next level by incorporating scroll animations. Use JavaScript libraries or code snippets to trigger animations as users scroll through your website. This adds depth and interest to your design.
Implement interactive elements, such as buttons, sliders, and menus, using JavaScript event listeners. Make sure they respond to user input and enhance the overall user experience.
Optimize your website for performance by reducing file sizes, compressing images, and minifying CSS and JavaScript files. Employ lazy loading techniques to load assets only when needed, improving loading times.
Before launching your animated website, thoroughly test it on different browsers and devices to ensure cross-browser compatibility and responsiveness. Identify and fix any bugs or issues to deliver a seamless user experience.
An animated website requires regular updates to keep it fresh and engaging. Continuously monitor user feedback and website analytics to improve performance and user satisfaction.
How to Make Animated Website Using HTML and CSS
I hope you’ve learned a lot of new things from my video tutorial, after that you can check out the animated website using HTML CSS and JavaScript source code.
You May Also Like:
- How to Create a Coming Soon Website in HTML CSS and JavaScript
- How to Make a Portfolio Website Using HTML and CSS
- How to Make a Website Using HTML and CSS
- Simple Website Using HTML and CSS with Source Code
- How to Upload HTML Website on Cpanel
The source codes are very helpful and important to understand each element, property, etc that I’ve used inside the project, you will get ideas from it. let’s look at that the source codes below.
<header class="header center">
<div class="header-text">
<h1 class="heading">Around the World</h1>
<p class="header-paragraph">
Traveling it leaves you speechless, than turns you into a
storytellter
</p>
</div>
<img
src="./images/air-balloon.png"
alt="header image"
class="header-img"
/>
<div class="logo">
<h1>
<span class="center">t</span>
<span class="center">h</span>
<span class="center">e</span>
<span class="center">r</span>
<span class="center">o</span>
<span class="center">a</span>
<span class="center">d</span>
</h1>
</div>
</header>Once you used above mentioned codes that represent the header section structure, then we need to use CSS to design it.
.header {
width: 100%;
height: calc(100vh - 7rem);
background: linear-gradient(rgba(18, 113, 255, 0.5), rgba(18, 113, 255, 0.3)),
url("../images/header-bg.jpg") center no-repeat;
background-size: cover;
position: relative;
perspective: 100rem;
}
.header-text {
text-align: center;
letter-spacing: 0.1rem;
text-shadow: 0.3rem 0.5rem var(--gray-color);
}
.heading {
font-size: 8rem;
color: var(--white-color);
text-transform: uppercase;
}
.header-paragraph {
font-size: 3rem;
color: var(--white-color);
max-width: 70rem;
margin: auto;
}
.logo {
position: absolute;
top: 4rem;
right: 4rem;
font-family: "Poppins";
font-weight: 600;
}
.logo h1 {
display: flex;
}
.logo h1 span {
font-size: 2rem;
font-weight: 700;
color: var(---primary-color);
text-transform: uppercase;
background: var(--white-color);
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1) {
animation: drop-letters 5s 0.1s infinite;
}
.logo h1 span:nth-child(2) {
animation: drop-letters 5s 0.2s infinite;
}
.logo h1 span:nth-child(3) {
animation: drop-letters 5s 0.3s infinite;
}
.logo h1 span:nth-child(4) {
animation: drop-letters 5s 0.4s infinite;
}
.logo h1 span:nth-child(5) {
animation: drop-letters 5s 0.5s infinite;
}
.logo h1 span:nth-child(6) {
animation: drop-letters 5s 0.6s infinite;
}
.logo h1 span:nth-child(7) {
animation: drop-letters 5s 0.7s infinite;
}
@keyframes drop-letters {
0% {
transform: translateY(0);
}
10% {
transform: translateY(0);
}
15% {
transform: translateY(-100%);
}
20% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
.header-img {
width: 35%;
/* transform: translateZ(40rem); */
animation: image-float 150s infinite;
}
@keyframes image-float {
0% {
transform: translateZ(40rem);
opacity: 1;
}
40% {
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70% {
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.8;
}
80% {
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
100% {
transform: translateZ(40rem);
opacity: 1;
}
}That’s great you’ve successfully made the header section, let’s build a Popular tour section let’s look at that the HTML and CSS files.
<section class="pupular-tours">
<h1 class="popular-tours-headings">The Most Popular Tours</h1>
<div class="cards-wrapper">
<div class="card">
<!-- front side -->
<div class="front-side">
<img src="./images/forest.jpg" alt="fores" class="card-image" />
<h1 class="tour-name">The Wild Forest</h1>
<ul class="card-list">
<li class="card-list-item">7 Days tour</li>
<li class="card-list-item">up to 20 people</li>
<li class="card-list-item">4 tour guide</li>
<li class="card-list-item">sleep guide</li>
<li class="card-list-item">difficult: medium</li>
</ul>
<button type="button" class="navigation-button">
price > >
</button>
</div>
<!-- back side -->
<div class="back-side center">
<button type="button" class="navigation-button">
< < Back
</button>
<h3 class="tour-price">$399</h3>
<button class="card-button">Booking</button>
</div>
</div>
<div class="card">
<!-- front side -->
<div class="front-side">
<img src="./images/river.jpg" alt="fores" class="card-image" />
<h1 class="tour-name">Along the river</h1>
<ul class="card-list">
<li class="card-list-item">9 Days tour</li>
<li class="card-list-item">up to 30 people</li>
<li class="card-list-item">7 tour guide</li>
<li class="card-list-item">sleep guide private tens</li>
<li class="card-list-item">difficult: hard</li>
</ul>
<button type="button" class="navigation-button">
price > >
</button>
</div>
<!-- back side -->
<div class="back-side center">
<button type="button" class="navigation-button">
< < Back
</button>
<h3 class="tour-price">$399</h3>
<button class="card-button">Booking</button>
</div>
</div>
<div class="card">
<!-- front side -->
<div class="front-side">
<img src="./images/sea.jpg" alt="fores" class="card-image" />
<h1 class="tour-name">The Wilid Forest</h1>
<ul class="card-list">
<li class="card-list-item">5 Days tour</li>
<li class="card-list-item">up to 40 people</li>
<li class="card-list-item">8 tour guide</li>
<li class="card-list-item">sleep in hotel</li>
<li class="card-list-item">difficult: hard</li>
</ul>
<button type="button" class="navigation-button">
price > >
</button>
</div>
<!-- back side -->
<div class="back-side center">
<button type="button" class="navigation-button">
< < Back
</button>
<h3 class="tour-price">$399</h3>
<button class="card-button">Booking</button>
</div>
</div>
</div>
</section>Once you done the structure of HTML, then you need to use CSS to design that, let’s see the CSS
/*------------popular start----------------*/
.pupular-tours {
padding: 5rem 0 10rem 0;
}
.popular-tours-headings {
font-size: 8rem;
text-align: center;
margin-bottom: 8rem;
color: var(---primary-color);
text-shadow: 0 0.1rem 0.2rem var(---primary-color);
}
.cards-wrapper {
display: flex;
justify-content: space-evenly;
}
.card {
width: 35rem;
position: relative;
perspective: 150rem;
}
.card-image {
width: 100%;
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side {
text-align: center;
background: var(--white-color);
border-radius: 0.3rem;
position: relative;
z-index: 10;
opacity: 0.9;
transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s;
}
.change > .front-side {
transform: translateZ(-5rem) translateX(3rem);
box-shadow: 0 2rem 4rem #777;
opacity: 0.5;
z-index: 0;
}
.tour-name {
font-size: 2.5rem;
font-weight: 600;
text-transform: uppercase;
position: absolute;
top: 30%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 1rem #000;
}
.card-list {
width: 80%;
margin: auto;
padding: 2rem 0 0 3rem 0;
}
.card-list-item {
font-size: 1.6rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(---primary-color);
padding-bottom: 1.5rem;
}
.back-side {
position: absolute;
top: 0;
background: var(---primary-color);
width: 100%;
height: 100%;
border-radius: 0.3rem;
box-shadow: 0 2rem 4rem #777;
flex-direction: column;
transform: translateZ(-5rem) translateX(3rem);
opacity: 0.5s;
}
.change > .back-side {
transform: translateZ(0) translateX(0);
opacity: 0.9;
box-shadow: 0 0.5rem 4rem;
}
.tour-price {
font-size: 5rem;
font-weight: 300;
color: var(--white-color);
margin-bottom: 3rem;
}
.card-button {
color: var(---primary-color);
background: var(--white-color);
border: none;
font-size: 2.5rem;
padding: 1rem 2rem;
letter-spacing: 0.2rem;
border-radius: 5rem;
cursor: pointer;
}
.navigation-button {
position: absolute;
top: 0.5rem;
left: 0.5rem;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.8);
color: var(--light-grey-color);
border-radius: 0.3rem;
border: none;
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2rem;
cursor: pointer;
}
/*------------popular close----------------*/Inside that has features such as displaying the beck end card when you click on the button on the top left corner, so, you need to below JS code to display and hide the card.
Array.from(document.querySelectorAll(".navigation-button")).forEach((item) => {
item.onclick = () => {
item.parentElement.parentElement.classList.toggle("change");
};
});Let’s look at the stories section, that have a video background and curved images, and we need to use HTML and CSS.
<section class="stories">
<div class="video-container">
<video
src="./images/video.mp4"
type="video/mp4"
autoplay
muted
loop
class="bg-video"
></video>
</div>
<div class="stories-wrapper">
<div class="story-bg">
<div class="story">
<img src="./images/story-img-1.jpg" alt="" class="story-image" />
<div class="story-text">
<h1 class="story-heading">
THese we the best days of this year
</h1>
<p class="story-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perferendis aliquid architecto deserunt ea, voluptatibus
commodi. Atque, facilis consectetur? Minima, sequi dolores
ipsam qui facere quos id eligendi reiciendis perferendis
labore sapiente saepe, quasi minus nostrum provident hic nam
dignissimos earum.
</p>
</div>
</div>
</div>
<div class="story-bg">
<div class="story">
<img src="./images/story-img-2.jpg" alt="" class="story-image" />
<div class="story-text">
<h1 class="story-heading">I enjoyed this greate tour</h1>
<p class="story-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perferendis aliquid architecto deserunt ea, voluptatibus
commodi. Atque, facilis consectetur? Minima, sequi dolores
ipsam qui facere quos id eligendi reiciendis perferendis
labore sapiente saepe, quasi minus nostrum provident hic nam
dignissimos earum.
</p>
</div>
</div>
</div>
</div>
</section>Once you used the above-mentioned codes, then you will be able to use CSS to design it. Let’s see the CSS codes
/*------------story start----------------*/
.stories {
padding: 10rem 0;
position: relative;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
}
.bg-video {
object-fit: cover;
width: 100%;
height: 100%;
}
.stories-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.story-bg {
background-color: rgba(238, 238, 238, 0.85);
padding: 5rem;
margin: 5rem;
width: 70%;
box-shadow: 0 2rem 5rem rgba(51, 51, 51, 0.4);
transform: skewX(20deg);
border-right: 0.7rem solid var(---primary-color);
}
.story {
transform: skewX(-20deg);
display: flex;
}
.story-image {
width: 20rem;
height: 20rem;
border-radius: 50%;
object-fit: cover;
margin-right: 5rem;
}
.story-text {
letter-spacing: 0.1rem;
}
.story-heading {
font-size: 2.5rem;
text-transform: uppercase;
color: var(--gray-color);
margin-bottom: 1rem;
}
.story-paragraph {
font-size: 1.8rem;
line-height: 1.8;
color: var(--light-grey-color);
}
/*------------story close----------------*/That’s for the story codes, so we’ve successfully made three sections, Let’s build a second last section such as Contact Us.
<!-- ---------------contact start --------------->
<section class="contact">
<h1 class="contact-heading">Contact us</h1>
<form action="#" class="contact-form">
<div class="input-group">
<label for="#">Full Name*</label>
<input
type="text"
class="contact-input"
placeholder="Enter Your Name"
/>
</div>
<div class="input-groups">
<div class="input-group">
<label for="#">Email*</label>
<input
type="email"
class="contact-input"
placeholder="Enter Your Email"
/>
</div>
<div class="input-group">
<label for="#">Phone*</label>
<input
type="text"
class="contact-input"
placeholder="Enter Your Phone"
/>
</div>
</div>
<div class="input-group">
<label for="#">Message*</label>
<textarea
name="#"
id=""
cols="30"
rows="10"
class="form-textarea"
></textarea>
</div>
<button type="submit" class="form-btn">Submit</button>
</form>
</section>
<!-- ---------------contact close --------------->After making the structure of the HTML page, then you need to CSS to design it.
/*------------contact start----------------*/
.contact {
padding: 15rem 0 20rem 0;
text-align: center;
background: url("../images/contact-us-bg.png") center no-repeat;
background-size: cover;
animation: contact-bg 35s infinite;
}
.contact-heading {
font-size: 7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5rem;
color: var(--white-color);
text-shadow: 0 1rem 2rem #000;
margin-bottom: 8rem;
}
.contact-form {
width: 70rem;
height: 50rem;
background: rgba(255, 255, 255, 0.95);
margin: auto;
flex-direction: column;
border-radius: 0.5rem;
box-shadow: 0 1rem 3rem #000;
padding: 5rem;
}
.input-group {
width: 100%;
display: flex;
flex-direction: column;
margin: 1rem 0;
position: relative;
}
.input-groups {
width: 100%;
display: flex;
justify-content: space-between;
}
.input-groups .input-group {
width: 48.5%;
}
.input-group input,
.input-group textarea {
padding: 3rem 1rem 1rem 1rem;
background: var(--secondary-color);
border: 0.1rem solid var(--secondary-color);
font-size: 1.4rem;
color: var(--light-grey-color);
letter-spacing: 0.1rem;
border-spacing: 0.1rem;
border-radius: 0.5rem;
resize: none;
}
.input-group input:focus,
.input-group text:focus {
border: 0.11rem solid #ccc;
}
.input-group label {
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: var(--gray-color);
position: absolute;
top: 1rem;
left: 1rem;
}
.form-btn {
width: 100%;
padding: 1rem;
letter-spacing: 0.1rem;
margin-top: 1rem;
background-color: var(--light-grey-color);
color: var(--white-color);
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: all 0.4s;
}
.form-btn:hover {
background: var(--gray-color);
}
@keyframes contact-bg {
0% {
background-color: #3d3d3d;
}
25% {
background-color: #ced8e4;
}
50% {
background-color: #1e81f3;
}
75% {
background-color: #ff7842;
}
75% {
background-color: #3d3d3d;
}
}Finally, we need to design the footer section, inside that we will display the menus with cool effects.
<!-- ---------------footer start --------------->
<footer class="footer">
<div class="footer-list">
<a href="#" class="footer-link">Home</a>
<a href="#" class="footer-link">Tours</a>
<a href="#" class="footer-link">About us</a>
<a href="#" class="footer-link">Offer</a>
<a href="#" class="footer-link">Contact</a>
</div>
<p class="footer-paragraph">
Copyright © OnlineITtuts Tutorials All Right Reserved :)
</p>
</footer>
<!-- ---------------footer close --------------->Let’s see the CSS of the footer section, we will use cool properties such as transform to rotate the element when we hover the mouse on the particular link.
/*------------footer start----------------*/
.footer {
background: var(--gray-color);
padding: 4rem 0 2rem 0;
}
.footer-list {
display: flex;
justify-content: center;
}
.footer-link {
font-size: 2rem;
color: var(--white-color);
margin: 0 2rem;
background: var(--gray-color);
padding: 0.3rem 3rem;
letter-spacing: 0.3rem;
transition: all 0.3s ease-in-out;
}
.footer-link:hover {
transform: rotate(-10deg);
box-shadow: 0 2rem 3rem #000;
}
.footer-paragraph {
text-align: center;
font-size: 1.5rem;
letter-spacing: 0.2rem;
margin-top: 5rem;
}
/*------------footer close----------------*/That’s it for all sections, but finally, you need to display the menus on the header section, those menus are very important to display the each link on the top of the page.
<!-- navbar start -->
<div class="open-navbar-icon navbar-icon center">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="navbar-wrapper">
<nav class="navbar">
<div class="close-navbar-icon navbar-icon center">
<div class="line line-1"></div>
<div class="line line-2"></div>
</div>
<div class="nav-list">
<a href="#" class="nav-link center">Home</a>
<a href="#" class="nav-link center">Tours</a>
<a href="#" class="nav-link center">About</a>
<a href="#" class="nav-link center">Offer</a>
<a href="#" class="nav-link center">Contact</a>
</div>
</nav>
</div>
<!-- navbar close -->Then we need to CSS and JavaScript as well to display the different types of colors and also animations.
/*------------navbar start----------------*/
.navbar-icon {
width: 5.5rem;
height: 5.5rem;
background: var(--white-color);
border-radius: 50%;
cursor: pointer;
flex-direction: column;
}
.open-navbar-icon {
position: fixed;
top: 6.5rem;
left: 6.5rem;
z-index: 200;
}
.navbar-icon .line {
height: 0.2rem;
width: 3.5rem;
background: var(--light-grey-color);
}
.open-navbar-icon .line {
margin: 0.3rem 0;
}
.navbar-wrapper {
/* display: none; */
width: 100vw;
height: 100vh;
/* background: rgba(255, 255, 255, 0.7); */
position: fixed;
left: 0;
/* bottom: 0; */
z-index: 300;
padding: 3.5rem 5.2rem 3.5rem 3.5rem;
bottom: -100%;
opacity: 0;
transition: bottom 0.5s, opacity 0.2s;
}
.change .navbar-wrapper {
opacity: 1;
bottom: 0;
transition: bottom 0.7s, opacity 0.2s 0.25s;
}
.navbar {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)),
url("../images/navbar-bg.jpg") center no-repeat;
background-size: cover;
overflow-y: hidden;
}
.close-navbar-icon {
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 300;
}
.line-1 {
transform: rotate(40deg);
}
.line-2 {
transform: rotate(-40deg);
}
.nav-list {
display: flex;
height: 100%;
}
.nav-link {
font-size: 3rem;
font-weight: 700;
color: var(--white-color);
text-transform: uppercase;
width: 100%;
opacity: 0.8;
transition: all 0.3s ease-in;
position: relative;
top: -100%;
}
.change .nav-link {
top: 0;
}
.nav-link:hover {
opacity: 1;
}
.change .nav-link:nth-child(1) {
transition: top 1s 0.4s, opacity 0.3s, color 0.3s;
}
.change .nav-link:nth-child(2) {
transition: top 1s 0.6s, opacity 0.3s, color 0.3s;
}
.change .nav-link:nth-child(3) {
transition: top 1s 0.8s, opacity 0.3s, color 0.3s;
}
.change .nav-link:nth-child(4) {
transition: top 1s 1s, opacity 0.3s, color 0.3s;
}
.change .nav-link:nth-child(5) {
transition: top 1s 1.2s, opacity 0.3s, color 0.3s;
}
/*------------close start----------------*/finally, you need to use JS to display the menus and hide it also JS is help use to display the different type of colors as well.
const container = document.querySelector(".container");
const color = ["#6495ed", "#7fffd4", "#ffa07a", "#f08080", "#afeeee"];
// add event lister inside the menus
document.querySelector(".open-navbar-icon").addEventListener("click", () => {
container.classList.add("change");
});
// add event lister inside the menus
document.querySelector(".close-navbar-icon").addEventListener("click", () => {
container.classList.remove("change");
});
// display colors inside the navbar
let i = 0;
Array.from(document.querySelectorAll(".nav-link")).forEach((item) => {
item.style.cssText = `background-color: ${color[i++]}`;
});
Array.from(document.querySelectorAll(".navigation-button")).forEach((item) => {
item.onclick = () => {
item.parentElement.parentElement.classList.toggle("change");
};
});Above I’ve mentioned each code step by step to make an animated website using HTML CSS and JavaScript. Also, have a video tutorial, you need to watch the complete video tutorial.
Then if you face any problem during the codes, you can check out the codes here.
Conclusion:
Creating an animated website from scratch requires creativity, planning, and a solid understanding of HTML, CSS, and JavaScript. By following this step-by-step guide, you can design an impressive and interactive website that captivates your visitors and enhances their overall experience.
Regular updates and maintenance will ensure that your website remains relevant and effective in the fast-paced digital world.
