animation image

Author: Fabio Brasileiro

src/app/page/landing-page-inicio/landing-page-inicio.component.html

@@ -251,13 +251,13 @@ <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-w
           </ul>
           <p class="mb-8 font-light lg:text-xl">A perguntar é por que você não faz parte ainda?</p>
         </div>
-        <img class="hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="../assets/dokeDuvida.png"
+        <img class="img-hiddenShow hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="../assets/dokeDuvida.png"
           alt="Doke avatar pensando" style="width: 450px;">
       </div>
       <!-- Row -->
       <div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
-        <img class="hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="../assets/doke.png" alt="doke convidando"
-          style="width: 270px;">
+        <img class="img-hiddenShow hidden w-full mb-4 rounded-lg lg:mb-0 lg:flex" src="../assets/doke.png"
+          alt="doke convidando" style="width: 270px;">
         <div class="text-gray-500 sm:text-lg dark:text-gray-400">
           <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">Venha ser feliz com
             qualquer linguagem</h2>
@@ -374,7 +374,8 @@ <h2 class="mt-3 mb-4 text-3xl font-extrabold tracking-tight text-gray-900 md:tex
       </div>
     </div>
     <div class="col-span-2 space-y-8">
-      <img class="w-full rounded-sm" src="../../../assets/campusPartyJavaMan.jpeg" alt="Campus party Comunidade">
+      <img class="img-hiddenShow w-full rounded-sm" src="../../../assets/campusPartyJavaMan.jpeg"
+        alt="Campus party Comunidade">
       <!-- <div>
         <svg class="w-10 h-10 mb-2 text-purple-600 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor"
           viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -786,4 +787,4 @@ <h2 class="mb-4 text-3xl font-extrabold leading-tight tracking-tight text-gray-9
   </div>
 </section>
 <app-footer></app-footer>
-<!-- <script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script> -->
+<!-- <script src="https://unpkg.com/flowbite@1.4.1/dist/flowbite.js"></script> -->

src/styles.css

@@ -29,7 +29,7 @@ section {
   width: min(60ch, 100%);
 } */
 
-img {
+.img-hiddenShow {
   animation: reveal 1ms ease-in-out both;
   animation-timeline: view();
   animation-range: entry 25% cover 50%;
@@ -54,6 +54,17 @@ img {
     scale: 1 1;
   }
 }
+::-webkit-scrollbar {
+  background: currentcolor;
+  width: 10px;
+}
+::-webkit-scrollbar-track {
+  background: currentcolor;
+}
+::-webkit-scrollbar-thumb {
+  background: #fff;
+  border-radius: 10px;
+}
 
 /* .c-indicator {
   margin-top: 50px;