Membuat Efek Transform On Scroll Dengan Javascript -

Hallo sahabat, kesempatan kali ini kita akan membahas tentang cara Membuat Efek Transform On Scroll Dengan Javascript. Dalam kasus ini ada tampilan curva/melengkung kemudian saat di scroll maka curva tersebut akan menjadi datar. Langsung saja kita lanjutkan membuatnya seperti langkah-langkah berikut:

Pertama coba sahabat siapkan gambar curva seperti tampilan berikut

Berikutnya sahabat buat struktur HTML berisi code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Efek Transform Scroll Menggunakan Javascript</title>
	
</head>
<body>
	<section>
	<span class="curva">
		<img src="pink.png" alt="curva">
	</span>
	</section>
	
</body>
</html>

Langkah selanjutnya tambahkan style CSS untuk penggunaan property css transform, silahkan sahabat ketikkan style css ini:

*{margin: 0;padding:0;}
		body{height: 165vh;background: #111;}
		section{
			position: absolute;
			width: 100%;
			height: calc(100% - 200px);
			background: #ff05b8;
		}
		
		section .curva{
			position: absolute;
			bottom: -200px;
			height: 200px;
			width: 100%;
			transform-origin: top;
		}
		section .curva img{
			width: 100%;
			height: 100%;
		}

simpan terlebih dahulu code yang sudah diketikkan, lalu jalankan pada browser masing-masing maka akan seperti tampilan berikut

Baiklah selanjutnya kita tambahkan script dari javascript agar tampilan terlihat efek yang diinginkan silahkan ketikkan script dibawah ini:

<script>
		var scroll = document.querySelector('.curva');
		window.addEventListener('scroll', function(){
			var value = 1 + window.scrollY/-500;
			scroll.style.transform = `scaleY(${value})`
		})
	</script>

JIka sudah simpan kembali buka browser lalu refresh dan coba scroll kebawah apabila benar maka akan seperti tampilan berikut:

saya rasa cukup dalam pembahasan kali ini, semoga dapat menambah referensi dalam belajar sahabat dan samapi jumpa dalam kesempatan lainnya.

terima kasih.

Membuat Efek Transform On Scroll Dengan Javascript

Kategori