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>
<section class="hero_sec">
<ul class="item_name">
<li><a href="item1" class="item">Jane Cooper</a></li>
<li><a href="item2" class="item">Arlene Mccoy</a></li>
<li><a href="item3" class="item">Wade Warren</a></li>
<li><a href="item4" class="item">Kathryn Murphy</a></li>
<li><a href="item5" class="item">Floyd Miles</a></li>
<li><a href="item6" class="item">Bessie Cooper</a></li>
<li><a href="item7" class="item">Ronald Richards</a></li>
<li><a href="item8" class="item">Leslie Alexander</a></li>
<li><a href="item9" class="item">Ralph Edwards</a></li>
</ul>
<div class="item_image">
<div id="item1" class="img">
<img src="images/img1.jpg" alt="">
<div class="item_image_text">
<h3>Jane Cooper</h3>
</div>
</div>
<div id="item2" class="img">
<img src="images/img2.jpg" alt="">
<div class="item_image_text">
<h3>Arlene Mccoy</h3>
</div>
</div>
<div id="item3" class="img">
<img src="images/img3.jpg" alt="">
<div class="item_image_text">
<h3>Wade Warren</h3>
</div>
</div>
<div id="item4" class="img">
<img src="images/img4.jpg" alt="">
<div class="item_image_text">
<h3>Kathryn Murphy</h3>
</div>
</div>
<div id="item5" class="img">
<img src="images/img5.jpg" alt="">
<div class="item_image_text">
<h3>Floyd Miles</h3>
</div>
</div>
<div id="item6" class="img">
<img src="images/img6.jpg" alt="">
<div class="item_image_text">
<h3>Bessie Cooper</h3>
</div>
</div>
<div id="item7" class="img">
<img src="images/img7.jpg" alt="">
<div class="item_image_text">
<h3>Ronald Richards</h3>
</div>
</div>
<div id="item8" class="img">
<img src="images/img8.jpg" alt="">
<div class="item_image_text">
<h3>Leslie Alexander</h3>
</div>
</div>
<div id="item9" class="img">
<img src="images/img9.jpg" alt="">
<div class="item_image_text">
<h3>Ralph Edwards</h3>
</div>
</div>
</div>
</section>
</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
- Scroll To Top Button (Back To Top) Using Simple JAVASCRIPT | Click to Scroll Top | CSS Smooth Scroll
- Profile Card UI Design Using HTML & CSS | CSS Flip Hover Effect & Dark Light Mode | Figma UI Design
- Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class
- Menu Hover Effect | Infinite Wavy Border Animation Using Only HTML, CSS ANIMATION
- Testimonial Carousel With Slick Carousel, Review Slider | HTML,CSS & JQUERY TUTORIAL
$(document).ready(function(){
$(".item_image_text h3").lettering();
$(".item_image_text h3 span").css("opacity", "0");
$(".item_image .img").hide().removeClass("imgActive");
// hover condition
$(".item_name li a").hover(function(){
// if
$(".item_name li a").removeClass("active");
$(this).addClass("active");
var activeLinkId = $(this).attr("href");
console.log(activeLinkId);
$(".item_image .img").hide().removeClass("imgActive");
$(".item_image .img#"+activeLinkId).show().addClass("imgActive");
$(".item_image_text h3 span").css("opacity", "1");
// gsap animation
var tl = gsap.timeline();
tl.from(".img.imgActive .item_image_text h3 span", {
y: 30,
x: 50,
opacity: 0,
stagger: .1
});
}, function(){
// else
});
});As you can see from the above code, first you’ll see the lettering plugin call, because we need a every word in separate in specific span for the lettering animation. the next is default setting of css opacity 0 and imgActive class remove. after that create a hover function, inside the function adding all the hovering functionality and also added the gsap code for lettering animation, you can see above the code.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
font-family: 'Italiana', serif;
background-color: #000000;
overflow-x: hidden;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
.item_name{
position: absolute;
left: 100px;
top: 100px;
z-index: 99;
}
.item_name a{
color: #fff;
font-size: 36px;
line-height: 66px;
font-weight: normal;
opacity: 0.3;
transition: all ease 0.5s;
}
.item_name a:hover{
opacity: 1;
}
.item_name a.active{
opacity: 1;
cursor: pointer;
}
.item_image .img.imgActive img{
animation: imgActive 2.4s ease 0s;
}
@keyframes imgActive {
from{
opacity: 0;
transform: translateY(-100px);
}
}
.item_image_text{
position: absolute;
bottom: 60px;
right: 60px;
}
.item_image_text h3{
color: #fff;
font-size: 88px;
}
.item_image_text h3 span{
display: inline-table;
}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, image active class css for smooth image showing using css keyframe property, and last is image text style for bigger font. 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.
