Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

by -18 views

Membuat 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:

Membuat Efek Animasi HTML Dan Canvas Yang Mungkin Anda Cari :


Dan beberapa efek animasi dengan menggunakan HTML dan CSS3

 

Membuat Efek Animasi Dengan 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;
}

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 

Download

About Author: labkom99

Gravatar Image
Labkom99 merupakan salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!