Animated Website Homepage Design | Creative Website Landing Page

If you want to download the source code then click here

Hello friends, in this article i’m showing to photographer, model, and artist website landing page design, hero section or banner section. when you just hover over the link which is i’ve list the models name to show/fade image full screen, also the model name is display for big letters in bottom right hand side and hover out the link(you leave the mouse course to particuller link or model name) to hide the corresponding image and defualt background image is show automatically, so that is the whole functionality of the landing page, also i’ve added the video tutorial of this video for our learndesign youtube channel must visit at once.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Photography Folio Website Design</title>
	<!-- Google fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Italiana&display=swap" rel="stylesheet">
	<style>
		/* Your style write here */
	</style>
</head>
<body>

<!-- HTML code goes here -->


<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<!-- LETTERING JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
</body>
</html>

Basic structure of HTML But I have attached the necessary links in it like Google fonts, jquery, gsap greensock, lettering js, all these links I have attached.


<main>
	<div class="content">
		<div class="item">
			<a href="images/img1.png"><img src="images/img1.png" alt=""></a>
			<a href="images/img2.png"><img src="images/img2.png" alt=""></a>
			<a href="images/img3.png"><img src="images/img3.png" alt=""></a>
			<a href="images/img4.png"><img src="images/img4.png" alt=""></a>
			<a href="images/img5.png"><img src="images/img5.png" alt=""></a>
			<a href="images/img6.png"><img src="images/img6.png" alt=""></a>
			<a href="images/img7.png"><img src="images/img7.png" alt=""></a>
			<a href="images/img8.png"><img src="images/img8.png" alt=""></a>
			<a href="images/img9.png"><img src="images/img9.png" alt=""></a>
			<a href="images/img10.png"><img src="images/img10.png" alt=""></a>
			<a href="images/img11.png"><img src="images/img11.png" alt=""></a>
			<a href="images/img12.png"><img src="images/img12.png" alt=""></a>
			<a href="images/img13.png"><img src="images/img13.png" alt=""></a>
			<a href="images/img14.png"><img src="images/img14.png" alt=""></a>
			<a href="images/img15.png"><img src="images/img15.png" alt=""></a>
			<a href="images/img16.png"><img src="images/img16.png" alt=""></a>
			<a href="images/img17.png"><img src="images/img17.png" alt=""></a>
			<a href="images/img18.png"><img src="images/img18.png" alt=""></a>
			<a href="images/img19.png"><img src="images/img19.png" alt=""></a>
			<a href="images/img20.png"><img src="images/img20.png" alt=""></a>
			<a href="images/img21.png"><img src="images/img21.png" alt=""></a>
			<a href="images/img22.png"><img src="images/img22.png" alt=""></a>
			<a href="images/img23.png"><img src="images/img23.png" alt=""></a>
			<a href="images/img24.png"><img src="images/img24.png" alt=""></a>
			<a href="images/img25.png"><img src="images/img20.png" alt=""></a>
		</div>
	</div>
	
	<footer>
		<div class="logo">
			<a href="index.html"><img src="images/logo.png" alt=""></a>
		</div>
		<div class="menu">
			<ul>
				<li><a href="sunset.html">Sunset</a></li>
				<li><a class="active" href="index.html">Nature</a></li>
				<li><a href="beach.html">Beach</a></li>
				<li><a href="food.html">Food</a></li>
				<li><a href="#">Mountain</a></li>
				<li><a href="flowers.html">Flowers</a></li>
				<li><a href="#">Forest</a></li>
				<li><a href="#">Landscape</a></li>
				<li><a href="#">Space</a></li>
				<li><a href="#">Portrait</a></li>
			</ul>
		</div>
		<div class="right">
			<ul>
				<li><a class="link_about" href="#">About Us</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
	</footer>

	<div class="sec_about">
		<div class="sec_about_content">
			<h3>About Us</h3>
			<p>Lorem ipsum dolor sit amet massa finibus quam proin sociosqu. Adipiscing praesent penatibus torquent ante elementum lorem bibendum parturient. Nisi morbi vivamus ornare consequat cursus nascetur sit facilisis. Facilisis dignissim venenatis malesuada ultricies parturient vehicula lobortis platea quam rhoncus at.</p>
			<p>Lorem ipsum dolor sit amet dapibus interdum dictumst potenti ut consectetur vivamus. Viverra lectus sagittis himenaeos tortor augue consectetuer purus senectus neque congue. Accumsan ultricies semper vivamus tempor erat. Duis magna adipiscing amet ut consectetuer accumsan sit consequat integer purus platea. Taciti si fames integer gravida etiam vel nostra consequat amet suscipit elit. Pellentesque vel blandit nostra etiam quis curae sagittis posuere sed adipiscing. Vestibulum class eget mi lorem placerat. Fermentum velit viverra torquent ex integer augue nec. Est parturient in sagittis neque hac gravida convallis. Tortor ullamcorper imperdiet adipiscing donec nunc porttitor sed consequat. Potenti cursus vestibulum augue eu mollis nisl ipsum dictum facilisis mattis. Elit letius rutrum tortor diam mi class eros et vel senectus. Habitasse fusce semper tellus ridiculus facilisis eleifend gravida per. Laoreet pellentesque ipsum in fusce velit aliquam ligula condimentum.</p>
		</div>
	</div>
</main>

Above I have added the structure of HTML. first, you will see the main div tag, inside the section tag the class name is hero_sec. inside the first HTML code is the menu item for the model link list which is using a ul(unordered list) li(list item) HTML tag and anchor link the href is item1, item2, item3, etc., and the anchor tag class name is item. second preference is item image group. inside the item image, total 9 model i’ve listed so i create a 9 div groups. i define a name and id both, id’s item1, item2, item3 same a menu anchore href value, then class name is img. then another div i have of item_image_text inside the h3 tag for using model name. so that’s the whole structure of HTML.

Below I have placed 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 visit our learndesign youtube channel.

You also might like this video

script.js

$(document).ready(function() {

	$('.item').magnificPopup({
		delegate: 'a',
		type:'image',
		gallery: {
			enabled: true,
		},
		zoom: {
			enabled: true,
			easing: 'ease-in-out',
		}
	});
		
	
	$(".link_about").on('click', function(){
		$(".sec_about").fadeToggle().css("display", "flex");
	});

});

As you can see from the above code, first you will see the document ready function in jquery then inside the function i write the magnific popup function call because i use image popup function plugin when user click the image, the image is enlarge with a specific size we all set. the next is on click function that i use for toggle fade effect and also add the css property(display flex) when the user click about link then open the overlay and show the about content.

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
body{
    font-family: 'Inter', sans-serif;
}
.content .item{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.content .item a{
    width: 20%;
    display: flex;
}
.content .item a img{
    width: 100%;
    transition: all ease 0.5s;
}
.content .item a img:hover{
    filter: brightness(50%);
}
footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    display: flex;
    justify-content: space-between;
    padding: 18px 30px;
    z-index: 999;
}
footer ul li{
    list-style: none;
    display: inline-flex;
    margin: 0 15px;
}
footer ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    position: relative;
}
footer ul li a:before,
footer ul li a.active:before{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #fff;
    transition: all ease 0.5s;
}
footer ul li a:hover:before,
footer ul li a.active:before{
    width: 100%;
}

.sec_about{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(20, 19, 19, 90%);
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
.sec_about_content{
    max-width: 900px;
    color: #fff;
    text-align: center;
}
.sec_about h3{
    font-size: 52px;
    font-weight: normal;
    margin-bottom: 30px;
}
.sec_about p{
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 15px;
}

Above I have added the css code you can copy that code and put your index.html file inside style tag or separete .style.css file. first you’ll see the normalize css for document and body, after that you can see the content style, footer and about section style. that’s the overall design style structure.

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.

Photographer Portfolio Website, Image Showcase Website Design

You also might like this video

Photographer Portfolio Website Landing Page Design, Fade Image On Hover Effect

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

Related Articles