Animated Website Homepage Design | Creative Website Landing Page

If you want to download the source code then click here

Zhenya is a visual and product designer portfolio website. first, you will see the intro animations, and the main title is slide-up lettering animations and the background image is not just the image, it is a slider after a few seconds it is changing the image. and also your cursor is not a normal cursor it is a customizable cursor I hope you, friends, like this layout.

First, you have to setup the HTML structure after that I will put its code below. You can copy it to your file.

<head>
<!-- Slick Carousel -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
</head>
<body>

<!-- html goes here -->


<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- GREENSOCK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<!-- LETTERING JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<!-- SLICK CAROUSEL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<script>
// SCRIPT WRITE HERE

</script>
</body>

Basic structure of HTML But I have attached the necessary links in it like slick carousel css, jquery, greensock plugin, lettering js plugin, slick carousel plugin, all these links I have attached.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Portfolio Landing Page Design</title>
	<!-- SLICK CAROUSEL -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
	<style type="text/css">

		/*FONTS*/
		@font-face {
		  font-family: "Messapia";
		  src: url("fonts/Messapia-Bold.woff2") format("woff2"),
		       url("[fonts/Messapia-Bold.woff") format("woff");
		}

		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			outline: none;
		}
		body{
			font-family: Messapia;
			background-color: #010101;
			overflow-x: hidden;
			cursor: none;
		}
		a{
			text-decoration: none;
		}

	</style>
</head>
<body>



<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- GREENSOCK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<!-- LETTERING JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
<!-- SLICK CAROUSEL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<script>
	
	// SCRIPT WRITE HERE

</script>

</body>
</html>

Above I have added the structure of HTML and the link of slick carousel css and js, jquery, greensock and lettering js plugin is also given above. If you copy the HTML structure, then you do not need to add the links because I have already added the HTML structure.

Below I have put a link to more useful videos, which you will get to learn a lot from them, then you guys must watch them and if you like them, then definitely write them.

You also might like this video

So now I will add the HTML structure of the layout below, in which I have taken a tag named main, and inside it, I have created the structure of the whole layout. and also added two extra dives named cursor and cursor-back because I’m customizing a cursor style. and the next part is the top menu, then the hero section content, and after that bottom menu.


<main>

	<div class="cursor"></div>
	<div class="cursor-back"></div>

	<div class="menu menu_top">
		<div class="logo">
			<a href="index.html"><span></span><img src="images/zhenya_logo.png" alt=""></a>
		</div>
		<div>
			<a href="#">Contact Us</a>
		</div>
	</div>

    <div class="hero_sec">
    	<div class="hero_sec_inner">
    		<h1><span>Animation</span><br>
    		<span>Visual &nbsp; Design</span><br>
    		<span>Product &nbsp; Design</span>
    		</h1>
    		<div class="slider">
    			<div class="item"><img src="images/img1.png" alt=""></div>
    			<div class="item"><img src="images/img2.png" alt=""></div>
    			<div class="item"><img src="images/img3.png" alt=""></div>
    		</div>
    	</div>
    </div>

	<div class="menu menu_bottom">
		<div><a href="#">About Me</a></div>
		<div><a href="#">Projects</a></div>
	</div>
</main>

As you can see above code, in this I have taken a div tag named main in root and a div named cursor class. After that, all the layout structure is written inside the main tag. So you can understand by copying it. Now I am adding the code of the CSS style below, which you can see below.

.menu_top,
.menu_bottom{
	display: flex;
	justify-content: space-between;
	position: fixed;
	top: 50px;
	left: 50px;
	width: calc(100% - 100px);
}
.menu_bottom{
	top: inherit;
	bottom: 50px;
}
.menu a{
	font-size: 18px;
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
}
.menu a:hover{
	animation: dotColor .4s linear infinite 0s;
}
@keyframes dotColor {
	20%{color: #cdff03;}
	40%{color: #ffffff;}
	60%{color: #00ffd2;}
	80%{color: #f0ff00;}
	100%{color: #8900ff;}
}

.logo a span{
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: #cdff03;
	border-radius: 50px;
	margin-right: 5px;
	animation: dot 4s linear infinite 0s;
}
@keyframes dot {
	20%{background-color: #cdff03;}
	40%{background-color: #ffffff;}
	60%{background-color: #00ffd2;}
	80%{background-color: #f0ff00;}
	100%{background-color: #8900ff;}
}

.hero_sec{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.hero_sec h1{
	font-size: 76px;
	text-transform: uppercase;
	color: #fff;
}
.hero_sec h1 span{
	display: inline-block;
}
.slider{
	position: absolute;
	z-index: -1;
	top: 15%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 400px;
}

/*CURSOR*/
.cursor{
	position: absolute;
	background-color: #fff;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	z-index: 10000;
	user-select: none;
	transition: all cubic-bezier(0,.98,0,.98) 0.3s;
}
.cursor-back{
	position: absolute;
	background-color: #f0ff00;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	z-index: 9999;
	transition: all cubic-bezier(.06,.64,.57,1.02) 0.3s;
	animation: dot 4s linear infinite 0s;
}

.cursor.active,
.cursor-back.active{
	transform: scale(0);
	transition: transform cubic-bezier(.06,.64,.57,1.02) 0.3s;
}

I have given the above css code, with the help of which the layout is being styled. You can see the property of css hover in it, then you can see the property of CSS keyframe animation. You can also see the property of Transform Rotate. So in this I have given the style of the header first. After that the menu has been styled. Then styled the hero section. After that, the style of the shape of the background is given which animation is happening in the background. Then in the last, add the style of the loader. That is, first the loader will appear, then your layout will appear.

And the last style is the customization of cursor. i have created two different div, one is the cursor and the second is the cursor back. The important CSS property in the cursor div is user-select: none, transition. and cursor-back property is a transition, animation(above I’ve added a keyframe animation of the dot). and after that active property is transform: scale(0), transition.

I hope you enjoyed this tutorial and you must have got to learn something new. So you must share it and subscribe to my LearnDesign youtube channel so that you can get the updates of my upcoming videos. thanks for your time.

blink hover effect custom cursor animation gsap split text animation portfolio website landing page design slick vertical slider Website Landing Page Design

Animated Portfolio Website Landing Page Design | GSAP Lettering Animation

You also might like this video

Website Landing Page Design With Morph Animation

Fashion website design inspiration vol 01

Related Articles