Flying-in Effect - JavaScript & CSS
Published: 2024-06-12 13:04:55

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

```html
<!-- 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>

```

```css
// 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

![file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o30sm6xjy16hrp9wwim.gif)

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

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

**Dapatkan target**

```javascript
// 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 :

![file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pi35qr9atytq5cvvnli.png)

![file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq9vy97euhzprcqn4snm.png)

target : section#section--1.section.section--hidden
clasName : "section section--hidden"
id : "section--1"

**Munculkan elemennya**
Kode lengkap app.js sebagai berikut

```javascript
// 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 :

![file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujq036ftregbe2rg6ahk.gif)