diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/Cards.js" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/Cards.js" new file mode 100644 index 0000000..75a5648 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o 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 } \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/Footer.js" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/Footer.js" new file mode 100644 index 0000000..9a10c23 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o 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 } \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/Icones.js" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/Icones.js" new file mode 100644 index 0000000..be77f5a --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o 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 } \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/script.js" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/js/script.js" new file mode 100644 index 0000000..bab9b84 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o 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(); + +} \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/style.css" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/style.css" new file mode 100644 index 0000000..e0aeb40 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o 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; + } +} \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/coqueiro.svg" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/coqueiro.svg" new file mode 100644 index 0000000..3b47ead --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/coqueiro.svg" @@ -0,0 +1 @@ +coqueiro \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/filtro.svg" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/filtro.svg" new file mode 100644 index 0000000..ba3c000 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/filtro.svg" @@ -0,0 +1 @@ +filtro \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/lett-footer.svg" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/lett-footer.svg" new file mode 100644 index 0000000..7a19234 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/lett-footer.svg" @@ -0,0 +1 @@ +lett-footer \ No newline at end of file diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/lett-titulo.svg" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/lett-titulo.svg" new file mode 100644 index 0000000..5b47578 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/lett-titulo.svg" @@ -0,0 +1,16 @@ + + lett-titulo + + + + + + + + + + + + + + diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/praia-caiaques.svg" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/praia-caiaques.svg" new file mode 100644 index 0000000..4ea3ecc --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/praia-caiaques.svg" @@ -0,0 +1,1796 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + praia-caiaques + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/praia-footer.svg" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/praia-footer.svg" new file mode 100644 index 0000000..efa510f --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/assets/vectors/praia-footer.svg" @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + praia-footer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/index.html" "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/index.html" new file mode 100644 index 0000000..288e213 --- /dev/null +++ "b/L\303\263gica - 1S\303\251rie do Ensino M\303\251dio/Vetores e Anima\303\247\303\243o com SVG/index.html" @@ -0,0 +1,70 @@ + + + + + + + Document + + + + +
+ + + lett-titulo + + + + + + + + + + + + + + +
+ +
+

O verão chegou, se liga nessas dicas!

+ +
+
+ coqueiro +

Cuidado com a insolação

+

Evite permanecer sob o sol nos horários mais quentes do dia (entre 10 e 16 horas), beba mais líquidos do que sua sede sinaliza, evitando bebidas alcoólicas (elas provocam perda de líquidos), use roupas leves e claras, de algodão, consuma alimentos leves, como frutas e verduras.

+
+
+ filtro +

Importância do filtro solar

+

O uso do protetor solar é extremamente importante, ele ajuda a combater o câncer de pele, que pode ser causado pelo longo período de exposição ao sol. Além de evitar a insolação, queimaduras, manchas, envelhecimento precoce, flacidez, lesões, entre outras complicações.

+
+
+
+ +
+ lett-footer + + + + + + + + + + + +
+

crédito vetores: www.Vecteezy.com

+
+
+ + + + + \ No newline at end of file