feat: Cria animações básicas.

Resolve a issue #15.
DigitalHouseBrasil · Apr 18, 2023 · 06023d8 · 06023d8
1 parent 76e7bc1
commit 06023d8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -164,7 +164,8 @@ body > section:nth-child(odd) .article_illustration > img {
 
 #project {
   background-image: url(../img/project.png);
-  background-size: cover;
+  background-size: auto 100%;
+  background-position: center;
 }
 
 /* Layout - Espaçamentos */
@@ -388,7 +389,7 @@ section .content,
 
   .menu a:hover,
   .menu a:active {
-    font-weight: var(--font_extrabold);
+    font-weight: var(--font_extrabold) !important;
   }
 
   /* Estilo */
@@ -431,7 +432,7 @@ section .content,
     bottom: var(--size_xs);
   }
 
-  .menu:hover ol {
+  .menu.enabled ol {
     display: block;
   }
 
@@ -561,4 +562,31 @@ section .content,
     display: inline-block;
   }
 
+}
+
+/* Animação */
+
+html {
+  scroll-behavior: smooth;
+}
+
+@media (min-width: 1280px) {
+
+  body > section {
+    background-size: 100%;
+    transition: background-size 0.5s ease-in-out;
+}
+
+  body > section:hover {
+    background-size: 105%;
+  }
+
+  .article_illustration img {
+    transform: scale(1);
+    transition: transform .5s ease-out 100ms
+  }
+
+  .article_illustration:hover img {
+    transform: scale(1.025);
+  }
 }
diff --git a/index.html b/index.html
@@ -5,10 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./css/style.css">
+    <script src="js/script.js" defer></script>
     <title>Projeto Módulo 4</title>
 </head>
 <body>
-    <nav class="menu">
+    <nav class="menu" id="menu" onclick="menuToogle()">
         <ol>
             <li><a href="#header"><span>Início</span></a></li>
             <li><a href="#project"><span>Projeto</span></a></li>

diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,4 @@
+function menuToogle () {
+    let menu = document.getElementById("menu")
+    menu.classList.toggle("enabled")
+}