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');
});