Parallax adalah perpindahan atau perbedaan posisi semu dari suatu benda yang dilihat melalui dua garis pandang yang berbeda, dan diukur dengan sudut atau setengah sudut kemiringan antara dua garis tersebut.

Pada artikel kali ini Konsep Koding akan berbagi tutorial dan informasi mengenai bagaimana caranya membuat efek Parallax pada web menggunakan HTML dan CSS. 

Tutorial Membuat Animasi Parallax HTML CSS
Tutorial Membuat Animasi Parallax HTML CSS


Tutorial Membuat Animasi Parallax HTML CSS


Disini kita akan membuat 2 buah file yaitu index.html  dan style.css sebagai style untuk tampilan Parallax kita,

1. Buat folder dan buat file index.html  dengan kode seperti di bawah ini :

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Parallax</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<html>
    <head>
   
    </head>
    <body>
        <div id="box1">
            <h1>Hello World</h1>
        </div>
        <div id="box2">
            <h1>Hello World</h1>
        </div>
        <div id="box3">
            <h1>Hello World</h1>
        </div>
    </body>
</html>
<!-- partial -->
  
</body>
</html>

2. Kemudian dalam folder tersebut buat sebuah file style.css seperti di bawah ini :

body{
            margin: 0;
            padding: 0;
        }    
        #box1{
            height: 100vh;
            width: 100%;
            background-image: url(https://github.com/DaftCreation/Paralex/blob/master/i2.jpg?raw=true);
            background-size: cover;
            display: table;
            background-attachment: fixed;
        }
        #box2{
            height: 100vh;
            width: 100%;
            background-image: url(https://github.com/DaftCreation/Paralex/blob/master/i1.jpg?raw=true);
            background-size: cover;
            display: table;
            background-attachment: fixed;
        }
        #box3{
            height: 100vh;
            width: 100%;
            background-image: url(https://github.com/DaftCreation/Paralex/blob/master/i3.jpg?raw=true);
            background-size: cover;
            display: table;
            background-attachment: fixed;
        }
        h1{
            font-family: arial black;
            font-size: 50px;
            color:white;
            margin: 0px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

3. Kemudian save dan buka di browser anda, maka tampilannya akan seperti pada gambar di bawah ini :




Sekian semoga artikel HTML series ini dapat bermanfaat dan membantu kamu.