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:
- 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
- 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>
*: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%; }
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;
}
$(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 src="js/jquery-2.1.1.min.js"></script>

Posting Komentar