Belajar CSS Dasar Part 12 : Membuat Background Parallax Dengan CSS

A. Pengertian

Parallax, atau lebih tepatnya (bahasa Yunani: παραλλαγή (parallagé)) adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.

B. Latar Belakang

Membuat Website dengan Template One Page atau 1 Halaman Kebanyakan Developer Memasukan Background , jika background itu gambar dan tidak mempunyai efect , maka website tersebut akan terlihat Fakum . Oleh karena itu para Developer website , memberikan Parallax css di Website .

C. Maksud dan Tujuan
Membuat Website dengan css , pastinya anda kurang bagus jika kalian tidak kenal dengan Background Parallx , oleh karena itu agar website kita terlihat hidup ketika si pengguna melihat website kita .

D. Alat dan Bahan

1. Beberapa gambar
2. web browser
3. text editor    

E. Pembahasan
Sebelum Membuat Background parallax kita seharusnya Membentuk struktur dari pembuatan background parallax ini , dan file-filenya tetapi pemrograman yang kita buthkan adalah HTML dan CSS

Pertama kita membuat file HTMLnya , Buatlah file HTML dengan nama paralax1.php , di bawah ini adalah isi dari file paralax1.php :

<link rel="stylesheet" type="text/css" href="style.css">
<div class="section-body">
<div class="container">
<section class="module parallax parallax-1">
  <div class="container">
    <h1>Lorem</h1>
  </div>
</section>
<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>
<section class="module parallax parallax-2">
  <div class="container">
    <h1>Rise</h1>
  </div>
</section>
<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>
<section class="module parallax parallax-3">
  <div class="container">
    <h1>Calm</h1>
  </div>
</section>
<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>
</div>

Kemudian Kita akan Membuat file CSS nya , agar tampilanya terlihat lebih bagus jika kalian hanya membuat file htmlnya maka gambar dan efeknya tidak akan berjalan dengan baik , di sini saya menamakan style.css , di bawah ini adalah ini dari file style.css :

.bungkus{
  margin-top: -84px;
    background: rgba(50, 180, 185, 0.53) none repeat scroll 0% 0%;
    width: 100%;
    font-family: raleway;
    text-align: center;
    text-transform: uppercase;
    color: #FFF;
    height: 600px;
}
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("img/1.jpg");
}
section.module.parallax-2 {
  background-image: url("img/2.jpg");
}
section.module.parallax-3 {
  background-image: url("img/3.jpg");
}
@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}
.section-body{
  background-color: whitesmoke;
  width: 100%;
  text-align: center;
  padding: 3% 0%;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 0px;
}
@media (min-width: 900px){
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
 
}
html {
    font-family: "Lucida Sans", sans-serif;
}
@media screen and (max-width: 900px){
  .baris{
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid;
  }
}

Disini juga saya menambahkan sesuatu , jika di kecilkan di akan mengikuti layar screen kita  , perhatikan script di bawah ini :

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 0px;
}
@media (min-width: 900px){
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
 
}
html {
    font-family: "Lucida Sans", sans-serif;
}
@media screen and (max-width: 900px){
  .baris{
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid;
  }
}

di atas ini adalah untuk meresponsivkan suatu tampilan website dengan css ,

Sekarang lakukan Pengetesan untuk background parallaxnya , maka hasilnya akan seperti di bawah ini :

Effect dari background parallax ini jika kalian scrool website kalian dan untuk yang diatas taruh gambar kalian atau foto-foto terserah kalian .

F. Refrensi

• https://id.wikipedia.org/wiki/Paralaks