Flying-in Effect – JavaScript & CSS

Oke gaes, lanjut lagi belajarnya ya. Kali ini kita akan membuat flying-in effect, tool-nya masih sama dengan yang sebelumnya yaitu kita akan menggunakan intersection observer. Seperti biasa kita siapkan code standar wajib : index.html, style.css dan app.js

<!– index.html –>

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<title>Reveal Element</title>
<link rel=“stylesheet” href=“style.css” />
</head>
<body>
<header class=“header”><h1>This is header</h1></header>
<section class=“section” id=“section–1”><h1>This is section 1</h1></section>
<section class=“section” id=“section–2”><h1>This is section 2</h1></section>
<section class=“section” id=“section–3”><h1>This is section 3</h1></section>
<script src=“app.js”></script>
</body>
</html>

// style.css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.section,
header {
height: 900px;
border-top: 1px solid #ddd;
transition: transform 1s, opacity 1s;
}

.section:nth-child(odd) {
background-color: aquamarine;
}

.section:nth-child(even) {
background-color: cadetblue;
}

.section–hidden {
opacity: 0;
transform: translateY(8rem);
}

h1 {
width: 100%;
text-align: center;
padding-top: 50px;
font-size: 100px;
}

Tampilan awalnya seperti ini ya

Nah kita ingin pada saat masuk section berikutnya ada semacam efek fly-in. Logic-nya kira-kira seperti ini :

Sembunyikan dulu section, kita sembunyikan pakai class .section–hidden di css
Tentukan target intersection antara section dan viewport
Kalau sudah kena targetnya, munculkan elemennya

Dapatkan target

// app.js

const allSections = document.querySelectorAll(‘.section‘);

const revealSection = (entries, observer) => {
const [entry] = entries;
console.log(entry);
}

const sectionObserver = new IntersectionObserver(revealSection, {
root: null,
threshold: 0.15
});

allSections.forEach(section=>{
sectionObserver.observe(section);
section.classList.add(‘section–hidden‘);
});

Coba jalankan dan inspect element, scroll halaman sampai intersection pertama terjadi, tentunya section tidak adakan terlihat karena kita sembunyikan. Dari console inspect element kita dapatkan informasi sebagai berikut :

target : section#section–1.section.section–hidden
clasName : “section section–hidden”
id : “section–1”

Munculkan elemennya
Kode lengkap app.js sebagai berikut

// app.js

const allSections = document.querySelectorAll(‘section‘);
const revealSection = (entries, observer) => {
const [entry] = entries;
console.log(entry);

// jika tidak terjadi intersection jangan lakukan apa-apa
if (!entry.isIntersecting) return;

// jika terjadi intersection class section–hidden dihilangkan
entry.target.classList.remove(‘section–hidden‘);

// supaya observer tidak diekseskusi terus menerus
observer.unobserve(entry.target);
};

const sectionObserver = new IntersectionObserver(revealSection, {
rot: null,
threshold: 0.1,
});

allSections.forEach((section) => {
sectionObserver.observe(section);
section.classList.add(‘section–hidden‘);
});

Hasilnya sebagai berikut :