Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

Membuat efek Parallax Scrolling khusus untuk membedakan visual background dengan jquery scroll dan mode HTML CSS dan SVG. Efek spesial ini menggunakan css mix-blend-mode untuk mencampur background dan teks dan menggunakan jquery untuk membuat efek visual perbedaan saat di scroll. Efeknya sangat keren untuk digunakan pada lending page anda.

 

Alat / Bahan Baku

Notepad

Tools pemrograman HTML lain

Perhatian 

Banyak efek animasi yang labkom99 tulis sebelumnnya sehingga dapat digunakan juga untuk mempercantik lending page anda. Berikut efek animasi yang mungkin adan ingin pelajari:

Membuat Efek Animasi HTML Dan Canvas Yang Mungkin Anda Cari :

• Belajar HTML5 dan Canvas Membuat Animasi Lingkaran
• Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
• Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
• Membuat Animasi Teks Dengan HTML5 Dan Canvas
• Membuat Animasi Kursor Mouse Dengan HTML Dan Canvas
• Membuat Efek Background Lampu Neon Dengan HTML5 Dan Canvas

Dan beberapa efek animasi dengan menggunakan HTML dan CSS3

Membuat Efek Animasi Dengan HTML Dan CSS3

• Belajar HTML + CSS: Membuat Berbagai Bentuk Shape Dengan HTML dan CSS3
• Membuat Efek Animasi Lampu Neon Pada Tesk Dengan HTML Dan CSS3
• 30 Efek Animasi Mouse Hover Tombol Button Keren Dengan HTML Dan CSS3
• Membuat Efek Animasi Teks 3D Keren Dengan HTML Dan CSS3
• Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3
• Membuat Efek Animasi Tesk Kartun Dengan HTML CSS3 Dan Google Font
• Membuat Efek Mouse Hover Pada Gambar Dengan HTML Dan CSS3
• Membuat Efek Animasi Tombol Button Keren Dengan HTML Dan CSS3
• Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3
• Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3
• Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail
• Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG
• Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS

Metode / Langkah

Untuk Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery di butuhan tag HTML seperti pada di bawah ini:

 

Kode HTML

<div class="overlay">
<div class="parallax">
  <h1>labkom99<span>Membuat Parallax Scrolling</span></h1>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
</div>
</div>

Kode diatas Adalah untuk membuat tulisan keterangan dan membuat efek overlay ketika mouse di scroll.

Kode CSS

*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 62.5%;
}

::-webkit-scrollbar {
  width: 0;
}

header {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c6d9d3;
}
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
header .overlay h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 9rem;
  text-shadow: 25px -15px rgba(25, 42, 46, 0.04);
  color: #142124;
  mix-blend-mode: overlay;
}
header .overlay h1 span {
  margin-top: -2em;
  padding-top: 0.5em;
  display: block;
  letter-spacing: 5px;
  font-size: 1.25rem;
}
header .parallax {
  position: relative;
  width: 100%;
  height: 100%;
}
header .parallax div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

Css tersebut digunakan untuk mendesain tempilan pada parallax 

Kode SVG

header .parallax .one {
  background-image: url("svg/labkom99-1.svg");
  z-index: 4;
}
header .parallax .two {
  background-image: url("svg/labkom99-2.svg");
  z-index: 3;
}
header .parallax .three {
  background-image: url("svg/labkom99-3.svg");
  z-index: 2;
}
header .parallax .four {
  background-image: url("svg/labkom99-4.svg");
  z-index: 1;
}
header .parallax .five {
  background-image: url("svg/labkom99-5.svg");
  z-index: 0;
}

SVG inilah yang di gunakan untuk membuat background gambar pada parallax. 

Kode jQuery

$(window).scroll(function () {
  const
  a = $(this).scrollTop(),
  b = 800;
  $("h1").css({
    backgroundPosition: "center " + a / 2 + "px" });

  $(".parallax").css({
    top: a / 1.6 + "px",
    opacity: 1 - a / b });

});

// parallax scrolling

document.addEventListener("scroll", () => {
  const
  top = window.pageYOffset,
  one = document.querySelector(".one"),
  two = document.querySelector(".two"),
  three = document.querySelector(".three"),
  four = document.querySelector(".four"),
  five = document.querySelector(".five");

  one.style.bottom = -(top * 0.1) + "px";
  two.style.bottom = -(top * 0.2) + "px";
  three.style.bottom = -(top * 0.3) + "px";
  four.style.bottom = -(top * 0.4) + "px";
  five.style.bottom = -(top * 0.5) + "px";
});

Script tersebut digunakan untuk membuat efek parallax ketika halaman lending page di scroll ke bawah 

Tambahkan Juga Script Berikut Ini :

<script src="js/jquery-2.1.1.min.js"></script>

Untuk hasilnya bisa dilihat pada gambar di bawah ini :

Dan untuk kode lengkapnya bisa didapatkan disini 

Download