APAKAH PARALLAX ITU?

Paralaks sering didefinisikan sebagai "pergerakan yang tampak" dari sebuah objek terhadap latar belakang yang jauh akibat pergeseran perspektif sebagaimana dapat dilihat pada gambar 1.
Ketika dilihat dari titik pandang A, objek tampak berada di depan kotak biru. 
Ketika titik pandang diubah ke titik pandang B, objek tampak bergerak ke depan kotak merah. Fenomena ini biasa dimanfaatkan dalam untuk menentukan jarak benda-benda langit.

Potografi juga mengenal istilah parallax ini. Namun ternyata web-desain juga mengenal istilah ini kita sedang mencoba membuatnya, hanya saja sayangnya efek parallax mungkin tidak bekerja pada screen hape namun biasanya berkerja dengan baik pada tampilan laptop/PC.







geser keatas atau kebawah untuk melihat efek jika menggunakan laptop.


Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.




Kodenya sbb:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {

/* The image used */

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggoszW1lerOfZDsDQpGIxAUjR3zzOccegMaeBkIxtwduZyxO7jpWsg51fsWlbKou6A73KujLULYomusljctJp6-EsR34ULcD6olVvjmqXUhFbXusq5Ud4ZjjTOw5ca1YPfyStplWUpdTHZ/s1600/20181123_214033_rmedited.jpgg");

/* Set a specific height */

min-height: 500px;

/* Create the parallax scrolling effect */

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

</style>

</head>

<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"></div>

<div style="height:500px;background-color:grey;font-size:16px">

Scroll turun dan naik untuk melihat efeknya.

Div disini untuk membuat scrolling bekerja

Tip: cobalah hilangkan background atau latar untuk menghilangkan efek.

</div>

</body>

</html>


Cara mencobanya masuk ke dasbor blog, pilih postingan baru > lalu pilih mode HTML kopi dan pastekan kode diatas ke halaman postingan HTML tadi dan Preview

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Oh jadi tau sekarang apa sebenarnya arti Parallax yang rada mirip bunyi dengan Paralize [ teringat lagunya Agnes Monica 😁 ]

    Jadi artinya pergerakan yang tampak dari sudut pandang berbeda.

    BalasHapus
    Balasan
    1. Untuk astronomi kayaknya gitu deh hehehe

      Hapus
Lebih baru Lebih lama

Formulir Kontak