Jumat, 24 Maret 2017

Membuat Backgroud Paralax

   No comments
Assalamualaikum Wr.Wb


1pendahuluan dan penjelasan
       Pada postingan kali saya akan berbagi tutorial membuat Backgroud Parallax,yaitu sebuah background yang posisinya akan fixed atau berhenti saat kita scrol halaman web ke bawah.Parallax background di biasanya banyak di gunakan untuk sebuah website one page yaitu website yang hanya memiliki satu halaman saja.Di sini saya membuat 2 file yang satu untuk file style.css dan yang satunya paralax.html,baiklah mari kita mulai.
2.Alat dan Bahan
  • PC atau Laptop
  • Sublime text
  • Gambar atau Foto
  • Browser
3,langkah pembuatan 
  • Style.css
tuliskan scipt di bawah untuk stylenya simpan dengan nama style.css.

 .container {
  max-width: 960px;
  margin: 0 auto;
}
section.section:last-child {
  margin-bottom: 0;
}
section.section h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.section p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.section p:last-child {
  margin-bottom: 0;
}
section.section.content {
  padding: 40px 0;
}
section.section.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.section.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  margin: 0 auto;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.section.parallax-1 {
  background-image: url("1.jpeg");
}
section.section.parallax-2 {
  background-image: url("2.jpeg");
}
section.section.parallax-3 {
  background-image: url("3.jpeg");
}

@media all and (min-width: 600px) {
  section.section h2 {
    font-size: 42px;
  }
  section.section p {
    font-size: 20px;
  }
  section.section.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.section.parallax h1 {
    font-size: 160px;
  }
}
  • Paralax
Untuk menampilkan paralax saya gunakan html,tuliskan script di bawah lalu simpan dengan paralax.html
<!DOCTYPE html>
<html>
<head>
  <title>Tutorial Parallax Scrolling</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin:0 auto;">
  <section class="section parallax parallax-1">
  <div class="container">
  </div>
</section>

<section class="section content">
  <div class="container">
    <h2>lorem1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>

<section class="section parallax parallax-2">
  <div class="container">
  </div>
</section>

<section class="section content">
  <div class="container">
    <h2>lorem 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>

<section class="section parallax parallax-3">
  <div class="container">
  </div>
</section>

<section class="section content">
  <div class="container">
    <h2>lorem 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>
</body>
</html>
Untuk tulisan berwarna biru di gunakan untuk memanggil style.css yang telah kita buat tadi.

Dan inilah hasilnya

sebelum di scroll

 
 Jika di scroll akan seperti ini



4.Kesimpulan
mungkin dari praktek di atas kita dapat membuat wesite yang cukup sederhana tapi terkesan hidup di dalam dunia website.

    Oke mungkin cukup sekian postingan kali ini semoga bermanfaat,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.
5.Refrensi: 
Wassalamualaikum Wr.Wb

0 komentar:

Posting Komentar