If you are a beginner or a pro. This article is for everyone who want to make his/her CSS animations on outstanding level. If you want to amaze people with your CSS skills, you must read this article. In this, you’ll learn to create smooth animations to navigate through product lists. You’ll create the design using flex box first and then use different classes to add animations to the element. You’ll also use JS in making this. In total, this will be a lot fun to create.
So, without wasting more time, let's start. To see project demo or for better understanding of code, you can watch the tutorial below.
Video Tutorial
I appreciate if you can support me by subscribing my youtube channel.
Code
So, before starting you should know our folder structure.
Download Images from here.
So, okay. Let's start coding.
Left side.
Hmm! So shall we start with left side of our header. To make that first write HTML basic template, give it a title, along with that link style.css and app.js file to it. Once you are done with all of that. Code this inside body tag.
<div class="left-side">
<span class="logo">fashion</span>
<div class="sm-product">
<h1 class="product-index">01</h1>
<div class="sm-product-img-container">
<img src="img/img1.jpg" class="sm-product-img" alt="">
</div>
<p class="sm-product-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut mollitia adipisci aspernatur</p>
</div>
<div class="social-link">
<img src="img/facebook.png" class="social-link-img" alt="">
<img src="img/instagram.png" class="social-link-img" alt="">
</div>
</div>
Well, we have to use some CSS to make this look like the goad design. So, let's style it.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'roboto', sans-serif;
}
body{
width: 100%;
height: 100vh;
position: relative;
display: flex;
}
.left-side{
width: 15vw;
height: 100%;
border-right: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
align-items: center;
}
.logo{
text-transform: uppercase;
font-weight: 700;
font-size: 2vw;
position: absolute;
top: 4vw;
left: -1.5vw;
transform: rotate(-90deg);
user-select: none;
}
.sm-product{
width: 100%;
height: auto;
}
.product-index{
font-size: 2vw;
text-align: center;
}
.sm-product-img-container{
position: relative;
margin: .5vw 0;
height: 15vw;
overflow: hidden;
}
.sm-product-img{
width: 100%;
height: 15vw;
object-fit: cover;
}
.sm-product-des{
text-align: right;
padding: 0 .5vw;
line-height: 1.5vw;
font-size: 1vw;
color: rgba(0, 0, 0, 0.5);
}
.social-link{
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
.social-link-img{
width: 1.6vw;
height: 1.6vw;
margin: .5vw;
cursor: pointer;
}
Output
Hmm! Isn't it looking awesome. I really loved it. Okay, let's move on to right side now.
Right Side
Oh! so we have to make the right side. Hmmm! to make it. code this HTML after left-side element. " For better explanation please watch the video tutorial "
<div class="right-side">
<img src="img/img1.jpg" class="backdrop-img" alt="">
<div class="content">
<div class="product-detail">
<h1 class="product-name">yellow tracksuit</h1>
<p class="product-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sunt assumenda doloribus, fugiat provident nemo.</p>
<a href="#" class="buy-btn">buy now</a>
<button class="nxt-btn"><img src="img/arrow.png" alt=""></button>
</div>
<div class="product-img-container">
<img src="img/img1.jpg" class="product-img" alt="">
</div>
</div>
</div>
Again we have style this, but before that add Roboto and Sirin Stencil google font inside head tag.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Sirin+Stencil&display=swap" rel="stylesheet">
Okay, we can style the right-side.
.right-side{
width: 85vw;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.backdrop-img{
width: 25vw;
height: 100%;
position: absolute;
top: 0;
right: 0;
object-fit: cover;
filter: blur(.5vw);
user-select: none;
}
.content{
width: 80%;
display: flex;
align-items: center;
position: relative;
}
.product-detail{
width: 60%;
}
.product-name{
font-size: 8vw;
text-transform: capitalize;
font-family: 'Roboto', sans-serif;
font-family: 'Sirin Stencil', cursive;
font-weight: 300;
line-height: 9vw;
}
.product-des{
margin: 4vw 0;
width: 90%;
font-size: 1.2vw;
line-height: 2vw;
color: rgba(0, 0, 0, 0.5);
}
.buy-btn{
text-decoration: none;
color: #000;
text-transform: capitalize;
font-size: 1.2vw;
}
.nxt-btn{
border: none;
background: none;
display: flex;
margin-left: auto;
margin-top: -1.2vw;
margin-right: 1vw;
cursor: pointer;
justify-content: center;
user-select: none;
}
.nxt-btn img{
width: 60%;
}
.product-img-container{
width: 40%;
height: 40vw;
position: relative;
overflow: hidden;
}
.product-img{
width: 100%;
height: 100%;
object-fit: cover;
}
Output
Okay. So we are done with the styles. And I guess we have more than 50% done. So, why wasting time, let's create animations now.
Animations
So, in our site or section, we have 3 animations.
- Fade animation - which plays on load.
- Black div Slide animation - which plays when changing the product.
- Fade animation - which plays when changing the product.
Okay, let's start. at the very top. Create this overlay element.
<div class="overlay"></div>
This overlay element, will be on top of all the element with "white" background. And its slowly fade out on loading.
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
opacity: 1;
z-index: 9;
animation: fade-out 2s forwards 1;
pointer-events: none;
}
@keyframes fade-out{
to{ opacity: 0 }
}
I hope this will make it work. Fir black div slide animation, we need slide class. We'll toggle this class from JS. So use this class to make a ::before element.
.slide::before{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #000;
animation: slide-left 1s linear 1;
}
@keyframes slide-left{
to{ left: 100% }
}
Okay so, this will make that animation but its important we only have to add this slide class to these 2 element.
<div class="sm-product-img-container slide">
///
<div class="product-img-container slide">
You can check the animation for now by just manually adding slide class to above element. But after done with checks, make sure to remove the slide class.
And the last, fade effect. Again for this we'll use fade class and toggle this with JS
.fade{
pointer-events: none;
animation: fade 1s forwards 1;
}
@keyframes fade{
0%, 100% { opacity: 1 }
45%, 60% { opacity: 0 }
}
We have a little break in the animation because changing text takes some time, and we don't want to see change process.
App.js
Great work so far. Now, we just have to toggle all the classes from JS and change the products. So before start, I'll recommend you download the app.js from the above download images link. In that file, you'll find a productData array. This array contains the data related to our product.
Okay so, let's start by selecting all the elements in JS first.
const nxtBtn = document.querySelector('.nxt-btn');
let smImgContainer = document.querySelector('.sm-product-img-container');
let smImg = document.querySelector('.sm-product-img');
let productIndex = document.querySelector('.product-index');
let smProductDes = document.querySelector('.sm-product-des');
let productImgContainer = document.querySelector('.product-img-container');
let productImg = document.querySelector('.product-img');
let backdropImg = document.querySelector('.backdrop-img');
let productDetail = document.querySelector('.product-detail');
let productName = document.querySelector('.product-name');
let productDes = document.querySelector('.product-des');
let currentProduct = 0;
Thats a lot of elements. Isn't it. currentProduct variable will track the current product while use navigate through them.
Now add click event to nxtBtn
nxtBtn.addEventListener('click', () => {
if(currentProduct >= productData.length - 1){
currentProduct = 0;
} else{
currentProduct++;
}
productIndex.innerHTML = productData[currentProduct].index;
smProductDes.innerHTML = productData[currentProduct].des.slice(0, 80);
smImgContainer.classList.add('slide');
productImgContainer.classList.add('slide');
backdropImg.classList.add('fade');
productDetail.classList.add('fade');
setTimeout(() => { // in the mid of animation, changing the contents
productName.innerHTML = productData[currentProduct].name;
productDes.innerHTML = productData[currentProduct].des;
smImg.src = productImg.src = backdropImg.src = `img/${productData[currentProduct].image}`;
}, 500);
setTimeout(() => { // removing all animation classes
smImgContainer.classList.remove('slide');
productImgContainer.classList.remove('slide');
backdropImg.classList.remove('fade');
productDetail.classList.remove('fade');
}, 1000);
})
The above code is very simple, at first if/else condition checking for currentProduct to change its value. after that I am setting the element's innerHTMl and adding animations classes to them. By using setTimeout I am changing the content after 500ms and removing the animation classes after 1000ms.
So, that's it. Great work guys. We are done with the header.
I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.
Articles you may find Useful
I really appreciate if you can subscribe my youtube channel. I create awesome web contents.
By the way, from Jan 2022 I am starting a CSS advance topic series on my youtube channel where I'll teach about CSS flex box/grid/positions and all other concepts. I'll teach you to create how to breakdown any complex web design. At the end of each video, I'll also give you 1-2 web design to code yourself. And you can then submit you creating on my instagram. I am sure after the series you can code any web design like me. So, if you are interested make sure to subscribe my channel 😉
Source Code
Thanks for reading
Top comments (1)
Thank you!