From dae3728994b3418e7992e46e4a5ade090a8188f5 Mon Sep 17 00:00:00 2001
From: TioSam77 <sammarw@gmail.com>
Date: Tue, 27 Aug 2024 15:46:20 -0600
Subject: [PATCH] Intento de texto typing 2

---
 posgrados/assets/css/posgrados.css |  8 +++++++-
 posgrados/assets/js/main.js        | 13 +++++++++++++
 posgrados/index.html               |  6 +++---
 3 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 posgrados/assets/js/main.js

diff --git a/posgrados/assets/css/posgrados.css b/posgrados/assets/css/posgrados.css
index b7d4d01..451e321 100644
--- a/posgrados/assets/css/posgrados.css
+++ b/posgrados/assets/css/posgrados.css
@@ -775,7 +775,8 @@ Main
   overflow: hidden;
   white-space: nowrap;
   border-right: 2px solid rgba(0, 0, 0, 0.75); /* Cursor effect */
-  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
+  opacity: 0;
 }
 
 @keyframes typing {
@@ -788,6 +789,11 @@ Main
   50% { border-color: rgba(0, 0, 0, 0.75); }
 }
 
+.typing-finished {
+  border-right: none; /* Remove cursor */
+  opacity: 1; /* Make text visible */
+}
+
 @media (max-width: 300px) {
   #main #main_container #main_information {
     margin-bottom: 2rem;
diff --git a/posgrados/assets/js/main.js b/posgrados/assets/js/main.js
new file mode 100644
index 0000000..e57acfc
--- /dev/null
+++ b/posgrados/assets/js/main.js
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const lines = document.querySelectorAll(".typing-effect");
+  
+    lines.forEach((line, index) => {
+      line.style.animationDelay = `${index * 2.7}s`;
+      line.style.opacity = '1';
+  
+      line.addEventListener("animationend", function() {
+        line.classList.add("typing-finished");
+      });
+    });
+  });
+  
\ No newline at end of file
diff --git a/posgrados/index.html b/posgrados/index.html
index de4ca99..6cb0107 100644
--- a/posgrados/index.html
+++ b/posgrados/index.html
@@ -143,8 +143,8 @@
             <span class="typing-effect">Profesionales ya titulados con formación</span><br>
             <span class="typing-effect">en torno a la imagen estática o en movimiento,</span><br>
             <span class="typing-effect">las artes y artes visuales así como disciplinas</span><br>
-            <span class="typing-effect">afines con la educación</span>
-            <span class="typing-effect">y desarrollos plásticos en tercera dimensión</span>
+            <span class="typing-effect">afines con la educación</span><br>
+            <span class="typing-effect">y desarrollos plásticos en tercera dimensión</span><br>
           </p>
         </div>
 
@@ -381,7 +381,7 @@
   <script src="../assets/Ext/owl.carousel/owl.carousel.min.js"></script>
   <script src="../assets/Ext/aos/aos.js"></script>
   <script src="./assets/js/bar.js"></script>
-
+  <script src="./assets/js/main.js"></script>
   <!-- Main JS -->
   <script src="../assets/js/main.js"></script>