CIDWA/fes_acatlan
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tiping final 1

Browse Source
This commit is contained in:
TioSam77
2024-09-03 16:45:50 -06:00
parent aedc77bf6b
commit c8bbee9258
3 changed files with 49 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
posgrados/assets/css/posgrados.css
+22 -14
View File
@@ -764,28 +764,38 @@ Main
}
/* Typing effect */
/* Incluir aquí el CSS ajustado */
.typing-effect {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid rgba(0, 0, 0, 0.75); /* Cursor effect */
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
opacity: 0;
overflow: hidden;
border-right: 0.15em solid; /* Cursor de tipeo */
animation: typing 1.5s steps(20, end) forwards, blink-caret 0.75s step-end infinite;
visibility: hidden; /* Oculta inicialmente */
animation-play-state: paused; /* Pausa la animación hasta activarse */
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: rgba(0, 0, 0, 0.75); }
0%, 100% {
border-color: transparent;
}
50% {
border-color: black; /* Ajustar color del cursor de tipeo */
}
}
.typing-finished {
border-right: none; /* Remove cursor */
opacity: 1; /* Make text visible */
/* Nueva clase para ocultar el cursor después de la animación */
.typing-effect.typing-finished {
border-right: none; /* Remueve el cursor después de terminar */
}
@media (max-width: 300px) {
@@ -793,9 +803,7 @@ Main
margin-bottom: 2rem;
word-wrap: break-word;
}
#main #main_container #main_information #main_information_box1 h2 {
font-size: 1.5rem;
}
#main #main_container #main_information #main_information_box1 h2,
#main #main_container #main_information #main_information_box2 h2 {
font-size: 1.5rem;
}
posgrados/assets/js/main.js
+13 -12
View File
@@ -1,13 +1,14 @@
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");
});
});
document.addEventListener('DOMContentLoaded', function() {
const lines = document.querySelectorAll('.typing-effect');
lines.forEach((line, index) => {
setTimeout(() => {
line.style.visibility = 'visible'; // Muestra la línea
line.style.animationPlayState = 'running'; // Inicia la animación
// Espera a que la animación termine y luego oculta el cursor
line.addEventListener('animationend', () => {
line.classList.add('typing-finished');
}, { once: true });
}, index * 1500); // 1.5s de retraso entre cada línea
});
});
posgrados/index.html
+14 -45
View File
@@ -135,13 +135,7 @@
<div class="container-md" id="main_container">
<div class="row flex-row" id="main_information">
<div class="col-12 col-md-6" id="main_information_box1" data-aos="fade-up" data-aos-duration="2000">
<main id="main">
<div class="container-md" id="main_container">
<div class="row flex-row" id="main_information">
<div class="col-lg-6 col-12" id="main_information_box1" data-aos="fade-up"
data-aos-duration="2000">
<h2><i class="bi bi-book" style="color: #1e3c70;"></i> <span>Dirigido a:</span> </h2>
<div id="main_box-line1">
<p>
<span class="typing-effect">Profesionales ya titulados con formación</span><br>
@@ -161,18 +155,19 @@
<span class="typing-effect">es cada vez más importantes. En este sentido,</span><br>
<span class="typing-effect">el plan de estudios tiende a una reverberación</span><br>
<span class="typing-effect">de la actividad del artista visual, el diseñador,</span><br>
<span class="typing-effect">el comunicador visual, el docente en artes y diseño,</span><br>
<span class="typing-effect">el comunicador visual, el docente en artes y</span><br>
<span class="typing-effect">y el documentalista cinematográfico,</span><br>
<span class="typing-effect">manteniendo un equilibrio entre las artes,</span><br>
<span class="typing-effect">diseño,manteniendo un equilibrio entre las artes,</span><br>
<span class="typing-effect">las humanidades y las ciencias. Así mismo,</span><br>
<span class="typing-effect">pretende que el egresado del doctorado, a través</span><br>
<span class="typing-effect">de sus manifestaciones plásticas (producción)</span><br>
<span class="typing-effect">ofrezca el material para que otras disciplinas</span><br>
<span class="typing-effect">como la historia del arte, la filosofía,</span><br>
<span class="typing-effect">ciencias políticas, estudios latinoamericanos,</span><br>
<span class="typing-effect">continúen desarrollando investigaciones teóricas</span><br>
<span class="typing-effect">sobre lenguajes y el hecho artístico</span><br>
<span class="typing-effect">realizado en un momento determinado.</span>
<span class="typing-effect">pretende que el egresado del doctorado,</span><br>
<span class="typing-effect">a través de sus manifestaciones</span><br>
<span class="typing-effect">plásticas (producción)ofrezca el material</span><br>
<span class="typing-effect">para que otras disciplinascomo la historia del arte,</span><br>
<span class="typing-effect">la filosofía,ciencias políticas, estudios</span><br>
<span class="typing-effect">latinoamericanos,continúen desarrollando</span><br>
<span class="typing-effect">investigaciones teóricas sobre lenguajes y</span><br>
<span class="typing-effect">el hecho artísticorealizado</span><br>
<span class="typing-effect">en un momento determinado.</span>
</p>
</div>
</div>
@@ -185,40 +180,14 @@
<span class="typing-effect">y su representación en espacios de exhibición</span><br>
<span class="typing-effect">públicos o privados</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La participación en centros de Investigación</span><br>
<span class="typing-effect">y producción artística, con financiamiento</span><br>
<span class="typing-effect">público o privado</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La realización de actividades docentes en</span><br>
<span class="typing-effect">el campo de las artes, el diseño y la comunicación</span><br>
<span class="typing-effect">visual, la docencia en artes y diseño,</span><br>
<span class="typing-effect">y el cine documental en centros educativos,</span><br>
<span class="typing-effect">públicos y privados</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La presentación de servicios especializados</span><br>
<span class="typing-effect">de asesoría, consultoría y gestión en los</span><br>
<span class="typing-effect">campos de conocimientos del programa</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> La colaboración en publicaciones especializadas</span><br>
<span class="typing-effect">en el ámbito de la investigación en los</span><br>
<span class="typing-effect">campos de conocimiento del programa</span><br>
</p>
<p>
<span class="typing-effect"><i class="bi bi-chevron-right"></i> El intercambio de información en los</span><br>
<span class="typing-effect">campos de conocimiento del Programa,</span><br>
<span class="typing-effect">en foros y modalidades afines en el</span><br>
<span class="typing-effect">país y en el extranjero</span><br>
</p>
<!-- Más contenido aquí... -->
</div>
</div>
</div>
</div>
</main><!-- End #main -->
<section id="section">
<div class="container-md" id="section_container">
<div class="row flex-row" id="section_container_col">