Add files via upload

Lógica - 1Série do Ensino Médio/Vetores e Animação com SVG/assets/js/Cards.js

@@ -0,0 +1,21 @@
+class Cards {
+    constructor() {
+        this.posicaoSectionDicas = document.getElementById('section-dicas');
+        this.cardEsq = document.querySelector('.card-esq');
+        this.cardDir = document.querySelector('.card-dir');
+    }
+
+    scrollCards() {
+        window.requestAnimationFrame(this.calculoScroll.bind(this));
+    }
+
+    calculoScroll() {
+        const posicao = this.posicaoSectionDicas.getBoundingClientRect()['y'];
+        if (posicao >= 25) {
+            this.cardEsq.style.transform = `translate(${((-posicao) + 25)/10}%)`;
+            this.cardDir.style.transform = `translate(${(posicao - 25)/10}%)`;
+        }
+    }
+}
+
+export { Cards }

Lógica - 1Série do Ensino Médio/Vetores e Animação com SVG/assets/js/Footer.js

@@ -0,0 +1,18 @@
+class Footer {
+    constructor() {
+        this.filtroTurbulencia = document.getElementById("filtro-turbulencia")
+    }
+
+    efeitoOnda() {
+        TweenMax.to(this.filtroTurbulencia, 20, {
+            attr: {
+                baseFrequency: 0.03,
+            }, 
+            repeat: -1, 
+            yoyo: true
+        })
+
+    }
+}
+
+export { Footer }

Lógica - 1Série do Ensino Médio/Vetores e Animação com SVG/assets/js/Icones.js

@@ -0,0 +1,11 @@
+class Icones {
+    constructor() {
+        this.listaIcones = document.querySelectorAll('.icone');
+    }
+
+    animaIcones() {
+        TweenMax.to(this.listaIcones, 0.5, {scale: 0.95, repeat: -1, yoyo: true})
+    }
+}
+
+export { Icones }

Lógica - 1Série do Ensino Médio/Vetores e Animação com SVG/assets/js/script.js

@@ -0,0 +1,16 @@
+import { Cards } from './Cards.js'
+import { Icones } from './Icones.js'
+import { Footer } from './Footer.js'
+
+window.onload = () => {
+
+    const animaCards = new Cards();
+    document.addEventListener('scroll', animaCards.scrollCards.bind(animaCards));
+
+    const icones = new Icones();
+    icones.animaIcones();
+
+    const footer = new Footer();
+    footer.efeitoOnda();
+
+}

Lógica - 1Série do Ensino Médio/Vetores e Animação com SVG/assets/style.css

@@ -0,0 +1,90 @@
+body {
+  margin: 0;
+  background-color: #FFEAD4;
+  overflow-x: hidden;
+}
+
+.container-header {
+    width: 100vw;
+}
+
+.lett-header {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+    width: 80%;
+    margin-top: 10%;
+    fill: transparent;
+    animation: lett-preenchimento 0.5s ease-in-out forwards 4s; 
+}
+
+.lett-header path {
+    stroke-width: 2px;
+    stroke: #BE253F;
+    stroke-dasharray: 3000;
+    stroke-dashoffset: 3000;
+    animation: lett-tracado 5s ease-in-out forwards 1s; 
+}
+
+h1, h2 {
+    font-family: 'Pacifico', cursive;
+    color: #BE253F;
+    text-align: center;
+}
+
+h1 {
+    font-size: 3em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
+p {
+    font-family: 'Lato', sans-serif;
+    color: #484848;
+    font-size: 1em;
+}
+
+.container-cards {
+    width: 80%;
+    margin: auto;
+    display: flex;
+}
+
+.card {
+    background-color: white;
+    border-radius: 10px;
+    width: 50%;
+    padding: 20px;
+    margin: 20px;
+}
+
+.lett-footer {
+    width: 60%;
+    fill: #fff;
+    opacity: 0.7;
+    position: absolute;
+    left: 20%;
+    margin-top: 20%;
+}
+
+.container-footer {
+    position: relative;
+}
+
+.footer-infos {
+    text-align: center;
+}
+
+@keyframes lett-preenchimento {
+    to {
+        fill: #BE253F;
+    }
+}
+
+@keyframes lett-tracado {
+    to {
+        stroke-dashoffset: 0;
+    }
+}