Artikel kali ini akan membahas sebuah efek css yaitu Efek Reveal dengan menggunakan CSS, dengan memadukan properti position dan z-index.
Teknik yang nanti akan diperlihatkan berikut, adalah perpaduan antara css properti position dan z-index, untuk memahaminya teman-teman harus tahu konsep dan cara kerja dari kedua properti diatas.
langsung kita mulai saja,…
file index.html
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer - Reveal Effect</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div id="wrapper">
<div class="w-title">
<h2>scroll me</h2>
</div>
<div class="w-pointer">
<i class="fas fa-arrow-down"></i>
</div>
</div>
<div id="footer">
<h3>YELLOWWEB.ID</h3>
</div>
</body>
</html>untuk style css nya bisa digabungkan dengan teknik embededd atau eksternal, silahkan disesuaikan.
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&display=swap');
*{
padding: 0;
margin: 0;
}
#wrapper{
background-image: url("back.jpg");
background-position: top;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 700px;
z-index: 1;
position: relative;
top: 0;
left: 0;
margin-bottom: 100px;
}
#footer{
background-color: #000000;
height: 100px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: 0;
display: flex;
justify-content: center;
font-size: 30px;
}
#footer h3{
font-family: 'Poppins', sans-serif;
letter-spacing: 5px;
color: #ffc602;
padding-top: 20px;
text-shadow: 0 0 5px #ffffff,
0 0 10px #ffffff;
}
.w-title{
/*background-color: red;*/
display: flex;
justify-content: center;
align-items: center;
height: 300px;
padding-top: 200px;
}
h2{
font-size: 200px;
color: #ffc602;
font-family: 'Big Shoulders Stencil Text', cursive;
box-shadow: 0 0 20px #ffc602, inset 0 0 20px #ffc602, 0 0 20px #ffc602;
padding: 0 30px;
}
.w-pointer{
/*background-color: blue;*/
font-size: 100px;
align-content: center;
justify-content: center;
display: flex;
color: #ffffff;
}
Untuk videonya terbagi ke dalam 3 bagian (part)
Sumber: