Cara Membuat Efek Scrolling Dengan HTML CSS

Hallo sahabat semua, bagaimana kabarnya nih. Semoga selalu diberikan kesehatan dan selalu semangat belajar yaaa. Dalam kesempatan kali ini saya akan membahas bagaimana cara membuat efek scrolling menggunkan html css.Scrolling disini saat tampilan halaman web terlihat hanya sebagian contentnya sehingga harus kita scroll kesamping atau kebawah. Dalam kasus ini kita akan belajar membuat efek scrolling secara vertical.

Baiklah yang perlu kita persiapkan yaitu coba sahabat buat struktur HTML yang berisi code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Efek Scrolling Dengan HTML CSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<section></section>
	<section>
		<h1>Membuat Efek Scrolling</h1>
		<!-- dalam paragraph isi karakter lebih dari 500 kata -->
		<p>Lorem ipsum dolor sit amet,......... </section>
</body>
</html>

JIka sudah tentu jangan lupa berikan style css agar terlihat efek scrollnya seperti code berikut ini:

*{
	padding:0;
	margin: 0;
	box-sizing: border-box;
}
section {
	position: relative;
	padding: 100px;
	min-height: 50vh;
	background: #000000;
}
section h1{
	font-size: 45px;
	color:#ffffff;
}
section p{
	font-size: 20px;
	color:#ffffff;
}
.wrapper{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 50vh;
	background:#FFFFFF;
	mix-blend-mode: difference;
}

pada code style css diatas efek scroll disini bisa sahabat perhatikan adalah property mix-blend-mode merupakan seperti hasil pencampuran warna tertentu sesuai dengan value background pada class=wrapper. Jika sahabat sudah selesai mengetikkan code diatas. Silahkan buka pada browser masing-masing lalu lihat hasilnya apabila benar maka akan seperti tampilan berikut:

Demikian pembahasan kali ini tentang Cara Membuat Efek Scrolling Dengan HTML CSS. Sampai jumpa dalam pembahasan selanjutnya dan sampai jumpa.

terima kasih

Cara Membuat Efek Scrolling Dengan HTML CSS

Kategori