Adicionando scroll animation

css/animScroll.css

@@ -0,0 +1,31 @@
+/*
+Autor: Jorge Marcelo
+Data de Criação: 06/09/2023
+Github: https://github.com/Jorge-Marcelo
+Linkedin: https://www.linkedin.com/in/jorge-marcelo-067a5017b/
+Instagram: https://www.instagram.com/10_stronger/
+Threads: https://www.threads.net/@10_stronger
+*/ 
+
+/*Definindo animação*/
+[scroll-anim]{
+opacity: 0;
+transition: all 0.7s ease;
+animation-delay: 2s;
+}
+
+[scroll-anim].animation{
+transform: translate3d(0px, -50px, 0px);
+opacity: 1;
+}
+
+/*Direção da animação*/
+[scroll-anim="top"]{
+transform: translate3d(0px, -50px,0px);
+margin-top: 60px;
+}
+
+
+
+
+

css/footer.css

@@ -1,3 +1,12 @@
+/*Autor: Jorge Marcelo
+Data de Criação: 05/09/2023
+Github: https://github.com/Jorge-Marcelo
+Linkedin: https://www.linkedin.com/in/jorge-marcelo-067a5017b/
+Instagram: https://www.instagram.com/10_stronger/
+Threads: https://www.threads.net/@10_stronger
+*/
+
+/*Configuração do rodape*/
 footer{
 display: flex;
 flex-direction: column;
@@ -9,6 +18,7 @@ border-image-slice: 1;
 border-image-source: linear-gradient(to left, #ff0000, #ff8800);
 }
 
+/*Texto com animação de gradiente*/
 h2{
 font-family: 'Oswald', sans-serif;
 font-size: 1.8em;
@@ -35,8 +45,7 @@ background-position: 400%; /*Posição final*/
 }
 }
 
-
-
+/*Botões de redes sociais*/
 .social{
 margin: 0 7px;
 width: 50px; 

css/index.css

@@ -11,6 +11,7 @@ Threads: https://www.threads.net/@10_stronger
 *{
 margin: 0;
 padding: 0;
+transition: all 0.5s ease;
 }
 
 /*Configuração do corpo do documento*/

index.html

@@ -24,6 +24,8 @@
 <link rel='stylesheet' type='text/css' media='screen' href='css/sliderBosses.css'>
 <link rel='stylesheet' type='text/css' media='screen' href='css/modalEstagios.css'>
 <link rel='stylesheet' type='text/css' media='screen' href='css/footer.css'>
+<link rel='stylesheet' type='text/css' media='screen' href='css/animScroll.css'>
+<link rel="shortcut icon" href="assets/img/header/mobile.png" type="image/x-icon" />
 
 
 <!--Aadicionando fontes do Google fonts-->
@@ -61,7 +63,7 @@
 <li><a href="#viloes"><img src="assets/img/nav/icon-star.png"class="star">Vilões</a></li>
 <li><a href="#estagios"><img src="assets/img/nav/icon-star.png"class="star">Estágios</a></li>
 <li><a href="#DLC"><img src="assets/img/nav/icon-star.png"class="star">Mr. X Nightmare</a></li>
-<li><a href=""><img src="assets/img/nav/icon-star.png"class="star">Creditos</a></li>
+<li><a href="#creditos"><img src="assets/img/nav/icon-star.png"class="star">Creditos</a></li>
 </ul>
 </nav>
 </header>
@@ -74,24 +76,25 @@
 <img src="assets/img/header/efect.png" id="img-mobile-efect">
 </figure>
 
-<p>EM DESENVOLVIMENTO 90%</p>
+<p>EM DESENVOLVIMENTO 95%</p>
 
 <section id="sobre">
 <article>
 <h1 class="itens-title">Sobre o Jogo</h1>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 Streets of Rage 4, conhecido no Japão e na Ásia como Bare Knuckle IV, é um jogo 
 eletrônico do gênero beat 'em up desenvolvido pela Lizardcube e Guard Crush Games,
 </p>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 como o quarto título da série Streets of Rage, e publicado pela DotEmu em associação 
 com a Sega Games. É a sequência de Streets of Rage 3, do Mega Drive.
 </p>
 
-<figure>
-<img src="assets/img/body/Inicial/img1.png" class="img1">
+<figure class="scroll-anim">
+<article>
+<img src="assets/img/body/Inicial/img1.png" class="img1 scroll-anim" scroll-anim="top">
 </figure>
 </article>
 </section>
@@ -101,31 +104,31 @@ <h1 class="itens-title">Sobre o Jogo</h1>
 
 <h1 class="itens-title">Jogabilidade</h1>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 Continuando com o estilo da jogabilidade de lançamentos anteriores, 
 Streets of Rage 4 é um beat 'em-up de rolagem lateral no qual os 
 jogadores lutam contra ondas de inimigos usando uma série de ataques e 
 movimentos especiais. 
 </p>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 A novidade da fórmula de jogo é a capacidade de 
 recuperar a saúde gasta usando um ataque especial, executando sucessivos 
 ataques de acompanhamento. Os jogadores também são capazes de manipular 
 os adversários uns contra os outros e paredes para combos estendidos.
 </p>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 É possível coletar estrelas, permitindo que os jogadores realizem super 
 movimentos poderosos.Os recursos desbloqueáveis incluem personagens de jogos 
 anteriores, apresentados em estilo de 16 bits, e faixas de música retrô de 
 Streets of Rage e Streets of Rage 2.
 </p>
 
-<figure>
+<figure class="scroll-anim" scroll-anim="top">
 <img src="assets/img/body/Jogabilidade/Img2.png" class="img2">
 <img src="assets/img/body/Jogabilidade/img3.jpg" class="img2">
-<img src="assets/img/body/Jogabilidade/img4.jpg" class="img2">
+<img src="assets/img/body/Jogabilidade/img4.jpg" class="img2 ">
 </figure>
 </article>
 </section>
@@ -135,7 +138,7 @@ <h1 class="itens-title">Jogabilidade</h1>
 <article>
 <h1 class="itens-title">Sistema de Combate</h1>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 Streets of Rage 4 continua o estilo das entradas anteriores da série. 
 Os jogadores avançam da esquerda para a direita em cada fase, derrotando 
 os inimigos à medida que avançam. Os jogadores podem pegar itens de cura 
@@ -155,7 +158,7 @@ <h1 class="itens-title">Sistema de Combate</h1>
 para realizar arremessos mais poderosos.
 </p>
 
-<figure>
+<figure class="scroll-anim" scroll-anim="top">
 <img src="assets/img/body/Combate/img1.png" class="img2">
 <img src="assets/img/body/Combate/img2.png" class="img2">
 <img src="assets/img/body/Combate/Img3.png" class="img2">
@@ -167,27 +170,27 @@ <h1 class="itens-title">Sistema de Combate</h1>
 
 <section id="historia">
 <article>
-<h1 class="itens-title">Historia</h1>
+<h1 class="itens-title scroll-anim" scroll-anim="top">Historia</h1>
 
-<p>
+<p class=""scroll-anim" scroll-anim="top">
 O jogo se passa 10 anos após os eventos de Streets of Rage 3, com os 
 personagens recorrentes Axel Stone, Blaze Fielding e Adam Hunter,
 ao lado de dois novos personagens, a filha de Adam, Cherry, e um 
 aprendiz musculoso, melhorado ciberneticamente, do Dr. Gilbert Zan, 
 chamado Floyd Iraia
 </p>
 
-<figure>
+<figure class="scroll-anim" scroll-anim="top">
 <img src="assets/img/body/Jogabilidade/img5.jpg" class="img2">
 <img src="assets/img/body/Jogabilidade/img6.jpg" class="img2">
 <img src="assets/img/body/Jogabilidade/img7.jpg" class="img2">
 </figure>
 </article>
 </section>
 
-<h1 class="itens-title" id="personagens">Personagens</h1>
+<h1 class="itens-title scroll-anim" id="personagens">Personagens</h1>
 
-<section>
+<section class="scroll-anim" scroll-anim="top">
 <article class="container-slider">
 
 <figure class="slides">
@@ -256,7 +259,7 @@ <h1 class="itens-title" id="personagens">Personagens</h1>
 
 <section id="inimigos">
 <article>
-<h1 class="itens-title">Inimigos</h1>
+<h1 class="itens-title scroll-anim" scroll-anim="top">Inimigos</h1>
 
 <p>
 Semelhante à trilogia Genesis, cada inimigo e chefe possui variantes, 
@@ -265,8 +268,7 @@ <h1 class="itens-title">Inimigos</h1>
 Certos ataques têm tempos de espera dependendo do inimigo e da variante.
 </p>
 
-
-<article  class="container-carrossel">
+<article  class="container-carrossel scroll-anim" scroll-anim="top">
 <button id="anterior" onclick="anterior()">&#10094;</button>
 <button id="proximo" onclick="proximo()">&#10095;</button>
 <figcaption id="legenda"></figcaption>
@@ -294,11 +296,13 @@ <h1 class="itens-title">Inimigos</h1>
 </section>
 
 
+
+
 <section id="chefes">
 <article>
-<h1 class="itens-title">Chefes</h1>
+<h1 class="itens-title  scroll-anim" scroll-anim="top">Chefes</h1>
 
-<section class="sliderBossesContainer">
+<section class="sliderBossesContainer scroll-anim" scroll-anim="top">
 <figure class="slidesBosses">
 <img src="assets/img/body/Chefes/1.png">
 <figcaption>Diva</figcaption>
@@ -370,9 +374,9 @@ <h1 class="itens-title">Chefes</h1>
 <img class="modal-content" id="modalImg">
 </article>
 <article>
-<h1 class="itens-title">Estágios</h1>
+<h1 class="itens-title" scroll-anim scroll-anim="top">Estágios</h1>
 <p>Selecione uma imagem para visualizar</p>
-<figure>
+<figure  class="scroll-anim" scroll-anim="top">
 <img src="assets/img/body/Estagios/1.png" class="miniModal img1">
 <img src="assets/img/body/Estagios/2.png" class="miniModal img1">
 <img src="assets/img/body/Estagios/3.png" class="miniModal img1">
@@ -391,21 +395,21 @@ <h1 class="itens-title">Estágios</h1>
 
 <section id="viloes">
 <article>
-<h1 class="itens-title">Vilões</h1>
+<h1 class="itens-title" scroll-anim" scroll-anim="top">Vilões</h1>
 <p>
 Um novo sindicato do crime, liderado pelos gêmeos Y, 
 filhos de Mr. X (chefão da trilogia original) apareceu 
 e começou a tocar o terror, corrompendo até mesmo a polícia.
 </p>
-<img src="assets/img/body/Vilões/Vilões.png" class="img1">
+<img src="assets/img/body/Vilões/Vilões.png" class="img1 scroll-anim" scroll-anim="top">
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 Mr Y ou Misutā Wai  é um dos principais vilões de Streets of Rage 4 . 
 Ele é filho do Sr. X e da Mulher Sem Nome e irmão gêmeo da Sra. 
 Y , e um dos líderes do novo Sindicato Y.
 </p>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 Tal como o seu pai, ele é ambicioso, confiante, 
 astuto e sabe usar a sua vasta riqueza para 
 manipular os outros. No entanto, devido ser muito novo, 
@@ -414,29 +418,29 @@ <h1 class="itens-title">Vilões</h1>
 </p>
 
 
-<img src="assets/img/body/Vilões/MRY.png" class="img1">
+<img src="assets/img/body/Vilões/MRY.png" class="img1 scroll-anim" scroll-anim="top">
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 MS Y Misu Wai  é um dos principais vilões de Streets of Rage 4 . 
 Ela é filha do Sr. X e da Mulher Sem N
 </p>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 Ao contrário da personalidade controlada do Sr. Y, a Sra. 
 Y é barulhenta, orgulhosa e arrogante, alegando sua 
 superioridade sobre os outros. No entanto, ela é fria e 
 letal em combate, com habilidades de esgrima incomparáveis.
 </p>
 
-<img src="assets/img/body/Vilões/MSY.png" class="img1">
+<img src="assets/img/body/Vilões/MSY.png" class="img1 scroll-anim" scroll-anim="top">
 </article>
 </section>
 
-<section id="DLC">
+<section>
 <article>
 <h1 class="itens-title">Mr. X Nightmare</h1>
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 Mr. X Nightmare adiciona três novos personagens jogáveis, 
 um novo personagem secreto, enquanto os personagens anteriores 
 receberam novos movimentos, junto com novos captadores de armas, 
@@ -449,10 +453,10 @@ <h1 class="itens-title">Mr. X Nightmare</h1>
 e mudanças de equilíbrio.
 </p>
 
-<img src="assets/img/body/DLC/DLC1.png" class="img1">
+<img src="assets/img/body/DLC/DLC1.png" class="img1" scroll-anim scroll-anim="top">
 
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 O Modo de Treinamento permite ao jogador praticar contra 
 oponentes fictícios ou jogar várias lições para aprender combos. 
 Os jogadores têm controle sobre a colocação e os itens do inimigo. 
@@ -461,14 +465,14 @@ <h1 class="itens-title">Mr. X Nightmare</h1>
 exclusivos do Modo Sobrevivência.
 </p>
 
-<figure>
+<figure class="scroll-anim" scroll-anim="top"> 
 <img src="assets/img/body/Treino/1.png" class="img2">
 <img src="assets/img/body/Treino/2.png" class="img2">
 <img src="assets/img/body/Treino/3.png" class="img2">
 </figure>
 
 
-<p>
+<p class="scroll-anim" scroll-anim="top">
 O Modo de Sobrevivência é configurado como um treinamento 
 simulado de realidade virtual criado pelo Dr. Zan , 
 usando dados do cérebro do Sr. Neste modo, o jogador 
@@ -481,7 +485,7 @@ <h1 class="itens-title">Mr. X Nightmare</h1>
 em sua pontuação, o que desbloqueará movimentos alternativos.
 </p>
 
-<figure>
+<figure class="scroll-anim" scroll-anim="top"> 
 <img src="assets/img/body/Sobrevivencia/1.png" class="img2">
 <img src="assets/img/body/Sobrevivencia/2.png" class="img2">
 <img src="assets/img/body/Sobrevivencia/3.png" class="img2">
@@ -492,11 +496,11 @@ <h1 class="itens-title">Mr. X Nightmare</h1>
 </main>
 
 
-<footer>
+<footer id="creditos">
 
 <h2>Made By: Jorge Marcelo</h2>
 
-<table>
+<table >
 <tr>
 <td>
 <button class="social" id="github">
@@ -531,5 +535,6 @@ <h2>Made By: Jorge Marcelo</h2>
 <script src='js/slidesBosses.js'></script>
 <script src='js/modalEstagios.js'></script>
 <script src='js/footer.js'></script>
+<script src='js/animScroll.js'></script>
 </body>
 </html>