Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

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

Read More


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

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *