Teknik Reveal Effect CSS

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Sticky Footer - Reveal Effect&lt;/title&gt;
	&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"&gt;
	
&lt;/head&gt;
&lt;body&gt;

	&lt;div id="wrapper"&gt;
		&lt;div class="w-title"&gt;
			&lt;h2&gt;scroll me&lt;/h2&gt;
		&lt;/div&gt;
		&lt;div class="w-pointer"&gt;
			&lt;i class="fas fa-arrow-down"&gt;&lt;/i&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id="footer"&gt;
		&lt;h3&gt;YELLOWWEB.ID&lt;/h3&gt;
	&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Sticky Footer - Reveal Effect</title>

</head>

<body>

<h2>scroll me</h2>

</div>

</div>

<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&amp;display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,900&amp;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;
		}

@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)