Animated Website Homepage Design | Creative Website Landing Page

If you want to download the source code then click here

This design is especially i do for model and artist i hope you love this design. this website functionality is beautiful and creative image slider which is i use in jquery slick slider plugin, wavy line animation with different type of color and this is the svg file, cool button hover effect using css before after css property, toggle menu hover effect, navigatino menu hover effect and much more cool functionality in this design. so you can download the source code and enjoy.

Below I’ve attached the basic structure of HTML But I have attached the necessary links in it like slick carousel plugin css and jquery link, jquery cdn link, all these links I have attached. so now you can copy the code and past your onw index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Title here</title>

	<!-- SLICK SLIDER CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
	<style>
		*{
			margin: 0;
			box-sizing: border-box;
			outline: none;
		}
		body{
			background-color: #342229;
			font-family: 'Space Grotesk', sans-serif;
			overflow-x: hidden;
		}
		
	</style>
</head>
<body>



<!-- JQUERY CDN LINK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- SLICK SLIDER LINK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<script>
	
</script>

</body>
</html>

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

Landing Page Design HTML and CSS Video Tutorial

Also i have added video tutorial you can watch how it works and learn it your self. below i have added the source code of html which is wrapper class inside header, slick slider class, and wave line class that’s it. also you can copy these code and past to your index.html file.

<div class="wrapper">
	<header>
		<div class="left">
			<div class="logo">
				<img src="images/logo.svg" alt="">
			</div>
			<div class="menu">
				<ul>
					<li><a href="#">Model</a></li>
					<li><a href="#">Country</a></li>
					<li><a href="#">Gallery</a></li>
					<li><a href="#">Insights</a></li>
				</ul>
			</div>
		</div>
		<div class="right">
			<div class="toggle">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</header>


	<div class="slider">
		<div class="slider-inner">
			<div class="item" data-text="Maxima">
				<img src="images/slide1.png" alt="">
				<div class="text">
					<h1>Maxima<br>fugit</h1>
				</div>
			</div>
			<div class="item" data-text="Elmer">
				<img src="images/slide2.png" alt="">
				<div class="text">
					<h1>Elmer<br>Schimdt</h1>
				</div>
			</div>
			<div class="item" data-text="Debitis">
				<img src="images/slide3.png" alt="">
				<div class="text">
					<h1>Debitis<br>omnis</h1>
				</div>
			</div>
		</div>

		<a href="#" class="btn">Explore</a>
	</div>

	<div class="wave-line">
		<div class="line line1"></div>
		<div class="line line2"></div>
		<div class="line line3"></div>
	</div>

</div>

As you can see below the style main wraper style, header, menu links with hover effect using css before property trnasform rotate and scale, after that toggle button and separate span style when user hover the toggle to react the separate span. next is slick slider which is i am customizing arrow, dors, animation, pagination everything, the next and final is wave line animation which is i am using svg file in background, keyframe animation for wave movement using background position. you can copy below the style in to your style.css file or index.html put style tag inside the header.

.wrapper{
	position: relative;
}
header{
	padding: 30px 130px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	width: 100%;
	z-index: 99;
}
header .left{
	display: flex;
	align-items: center;
}
header ul li{
	list-style: none;
	display: inline-block;
	margin: 0 25px;
}
header ul li a{
	position: relative;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
}
header ul li a:before{
	content: '';
	position: absolute;
	top: -100%;
	left: 40%;
	width: 1px;
	height: 60px;
	background-color: #fff;
	transform: rotate(46deg) scale(0);
	transition: all ease 0.5s;
}
header ul li a:hover:before{
	transform: rotate(46deg) scale(1);
}

.menu{
	position: relative;
	margin-left: 100px;
}
.menu:before{
	content: '';
	position: absolute;
	left: -70px;
	top: 48%;
	width: 100px;
	height: 1px;
	background-color: #fff;
}
.toggle{
	position: relative;
	display: inline-block;
	width: 28px;
	height: 17px;
}
.toggle span{
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #fff;
	right: 0;
	transition: all ease 0.5s;
}
.toggle span:nth-child(2){
	top: 7px;
	width: 60%;
}
.toggle span:nth-child(3){
	top: 14px;
	width: 30%;
}
.toggle:hover span{
	width: 100%;
}

.slider{
	position: relative;
}
.slider .item{
	position: relative;
	text-align: center;
	height: 100vh;
}
.slider .item:before{
	content: attr(data-text);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: Butler;
	font-size: 300px;
	text-transform: uppercase;
	letter-spacing: 50px;
	opacity: .1;
	z-index: -1;
}

.slider .item img{
	margin: 140px auto 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	transition: all ease 0.6s;
}
.slider h1{
	font-size: 70px;
	letter-spacing: 1px;
	color: #fff;
	font-weight: normal;
	text-transform: uppercase;
	transition: all ease 0.5s;
}
.slider .text{
	position: absolute;
	width: 100%;
	bottom: 30px;
}
.slider .slick-arrow{
	position: absolute;
	top: inherit;
	bottom: 15px;
	width: 70px;
	height: 70px;
	border: 1px solid #fff;
	border-radius: 50%;
	z-index: 9;
}
.slider .slick-next{
	right: inherit;
	left: 220px;
}
.slider .slick-prev{
	left: 130px;
}
.slider .slick-arrow.slick-disabled,
.slider .slick-arrow.slick-disabled:before{
	opacity: .3;
}
.slider .slick-next:before,
.slider .slick-prev:before{
	content: '';
	position: absolute;
	background: url(images/arrow-next.svg);
	background-size: 10px;
	width: 10px;
	height: 16px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.slider .slick-prev:before{
	background: url(images/arrow-prev.svg);
	background-size: 10px;
}

.btn{
	width: 250px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	background-color: #f2ca2c;
	color: #000;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
	transition: all ease 0.5s;
	overflow: hidden;
}
.btn:before{
	content: '';
	position: absolute;
	top: -100%;
	left: -100%;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: -1;
	transition: all ease 0.5s;
}
.btn:hover{
	color: #fff;
}
.btn:hover:before{
	top: 0;
	left: 0;
}


.wave-line{
	width: 100%;
	position: absolute;
	top: 43%;
	left: 0;
	transform: translateY(-50%);
	z-index: -1;
}
.wave-line .line{
	position: absolute;
	width: 100%;
	height: 130px;
}
.wave-line .line1{
	background: url(images/line1.svg) repeat-x;
	background-size: contain;
	animation: lineOne 30s linear infinite;
}
.wave-line .line2{
	background: url(images/line2.svg) repeat-x;
	background-size: contain;
	animation: lineTwo 30s linear infinite;
}
.wave-line .line3{
	background: url(images/line3.svg) repeat-x;
	background-size: contain;
	animation: lineThree 30s linear infinite;
}

@keyframes lineOne {
	50%{
		background-position: -150% 0;
	}
}
@keyframes lineTwo {
	50%{
		background-position: -100% 0;
	}
}
@keyframes lineThree {
	50%{
		background-position: 150% 0;
	}
}

As you can see below the code i have added jquery code you can copy the code to your index .html file inside script tag. first i’ll added the document ready function inside slick slider call to slider-inner class and some options like slicktoshow, swipe, fade, speed etc., then two events i have used in slick slider which is beforeChange and afterChange.in this event i have write the slider customization code you can see below the code.

$(document).ready(function(){	

$('.slider-inner').slick({
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  swipe: false,
  fade: true,
  speed: 1500
});

$('.slider-inner').on('beforeChange', function(){
	$("slider-inner .item img").css("clip-path", "polygon(0 0, 100% 0, 100% 0%, 0 0%)");
	setTimeout(function(){
		$(".slider-inner .item img").css("clip-path", "polygon(0 0, 100% 0, 100% 0%, 0 0%)");
	}, 100);

	$(".slider-inner h1").css("transform", "scale(0)");
});

$('.slider-inner').on('afterChange', function(){
	$("slider-inner .item img").css("clip-path", "polygon(0 0, 100% 0, 100% 100%, 0 100%)");
	setTimeout(function(){
		$(".slider-inner .item img").css("clip-path", "polygon(0 0, 100% 0, 100% 100%, 0 100%)");
	}, 100);

	$(".slider-inner h1").css("transform", "scale(1)");
});
});

I hope you like this article and also i have added the video tutorial on our youtube channel 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.

landing page design modern landing page design slick slider wavy line animation

Landing Page Design with Animation With Slick Slider Using HTML & CSS, Wavy Line Animation

You also might like this video

Landing Page Design HTML and CSS Video Tutorial

Photographer Portfolio Website, Image Showcase Website Design

Navigation Bar with Submenu Dropdown in Hover Using HTML and CSS Only | Simple Navbar Menu

Related Articles