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.

 

Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

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:



Dan beberapa efek animasi dengan menggunakan HTML dan CSS3




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 :

Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery



Dan untuk kode lengkapnya bisa didapatkan disini 

Komentar