Merge pull request #9 from fbgrigolo/refazer-FA-scrolAnimacao

Refazer fa scrol animacao

FantasticAnimals/js/import.js

@@ -5,10 +5,10 @@ import Modal from './modules/modal.js';
 import Tooltip from './modules/tooltip.js';
 import fetchAnimais from './modules/fetch-animais.js';
 import fetchBitcoin from './modules/fetch-bitcoin.js';
+import ScrollAnima from './modules/scroll-anima.js';
 import initDropdownMenu from './modules/dropdown-menu.js';
 import initMenuMobile from './modules/menu-mobile.js';
 import initFuncionamento from './modules/funcionamento.js';
-import initAnimacaoScroll from './modules/scroll-animacao.js';
 
 const scrollSuave = new ScrollSuave('[data-js="menu"] a[href^="#"]');
 scrollSuave.init();
@@ -25,10 +25,12 @@ modal.init();
 const tooltip = new Tooltip("[data-tooltip]", );
 tooltip.init();
 
+const scrollAnima = new ScrollAnima('[data-js="scroll"]');
+scrollAnima.init();
+
 initDropdownMenu();
 initMenuMobile();
 initFuncionamento();
-initAnimacaoScroll();
 
 fetchAnimais('./js/animaisapi.json', '.numeros-grid');
 

FantasticAnimals/js/modules/scroll-anima.js

@@ -0,0 +1,48 @@
+// Anima as sections durante o scroll da página
+export default class ScrollAnima {
+  constructor(sections) {
+    this.sections = document.querySelectorAll(sections)
+    this.windowMetade = window.innerHeight * 0.6;
+
+    this.checkDistance = this.checkDistance.bind(this);
+  }
+
+  // Pega a distância de cada item em relação 
+  // ao topo do site
+  getDistance() {
+    this.distance = [...this.sections].map((section) => {
+      const offset = section.offsetTop;
+      return {
+        element: section,
+        offset: Math.floor(offset - this.windowMetade),
+      };
+    });
+  }
+
+  // Verifica a distância em cada objeto
+  // em relacação ao scroll do site
+  checkDistance() {
+    this.distance.forEach((item) => {
+      if (window.pageYOffset > item.offset) {
+        item.element.classList.add("ativo");
+      } else if (item.element.classList.contains('ativo')) {
+        item.element.classList.remove('ativo');
+      }
+    });
+  }
+
+  init() {
+    if (this.sections.length) {
+      this.getDistance();
+      this.checkDistance();
+      window.addEventListener("scroll", this.checkDistance);
+    }
+    return this;
+  }
+
+  // Remove o event de scroll
+  stop() {
+    window.removeEventListener("scroll", this.checkDistance);
+  }
+}
+