0

Estoy teniendo el inconveniente de que las animaciones se cargan antes de llegar al texto o la imagen que lo contiene. Estoy usando Animate.css, solamente agregue el archivo a mi proyecto y lo agregue al html para ejecutar las funciones. Al archivo Animate.css lo agregue en la parte superior del head. Por ejemplo agrego varios textos y cuando carga la página muestra a todos a la vez, a diferencia de ir mostrando de a uno.

        <section class="service">
            <div class="container py-5">

                <h3 class="titulo-text display-4 text-center">Nuestros Servicios</h3>
                <p class="lead text-center">Destacamos en eficiencia, compromiso, honestidad, atención al detalle y velocidad con cada equipo.</p>

                <div class="iconos row text-center">

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="box-service">
                            <div class="icon" style="color:#7f7f7f">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <h4 class="info-title">Computadora y Laptop</h4>
                            <p class="animate__animated animate__backInDown">Si su equipo dejo de funcionar, no se preocupe ni se alarme, nosotros lo solucionamos, contamos con técnicos capaces de solucionar el problema para que este pueda funcionar de manera óptima y adecuada a sus requerimientos </p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#0004ff">
                                <i class="fa fa-windows"></i>
                            </div>
                            <h4 class="info-title">Windows y Programas</h4>
                            <p class="animate__animated animate__backInDown">Reinstalamos todo el sistema operativo.<br>Instalamos todos los programas que utilizas. Windows, Office, Antivirus <br>y además si lo necesitas: Autocad, Photoshop, Illustrator, Scketchup y muchos más.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#d10000">
                                <i class="fa fa-bug"></i>
                            </div>
                            <h4 class="info-title">Limpieza de Virus</h4>
                            <p class="animate__animated animate__backInDown">Eliminamos todos tipos de VIRUS.<br>Ya no tendrás publicidad molesta en tu navegador ni en tu escritorio.<br>Tampoco reiterados reinicios o apagones.<br>Utilizar tu equipo de manera mas eficiente<br></p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#302977">
                                <i class="fa fa-save"></i>
                            </div>
                            <h4 class="info-title">Recuperacion y Proteccion</h4>
                            <p class="animate__animated animate__backInDown">No tienes que dar por perdida tu información, somos capaces de recuperarla, tratarla y entregarte un recovery, con la mayor eficacia y confiabilidad.<br>La informacion de un cliente es lo mas importante.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#479e00">
                                <i class="fa fa-globe"></i>
                            </div>
                            <h4 class="info-title">Paginas Web</h4>
                           <p class="animate__animated animate__backInDown">Como expertos en soluciones tecnológicas, sabemos cómo llevar tu negocio a lo digital de manera profesional. Te ayudamos a crear tu página web con un diseño actualizado a las tendencias y funciones web que tu comercio necesita.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#0075a8">
                                <i class="fa fa-sitemap"></i>
                            </div>
                            <h4 class="info-title">Redes y Conexiones</h4>
                            <p class="animate__animated animate__backInDown">Desde un problema con tu conexión local hasta la reparación de tu red inalámbrica o de un servidor. <br>Nuestros expertos en Redes te ayudarán a lograr la conectividad más óptima. <br>Atendemos instalación, reparación y mantenimiento de redes</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

2 respuestas 2

2

Con CSS puro no es posible, hay que utilizar un poco de Javascript para detectar cuando un elemento está visible en el viewport usando la API de Intersection Observer, asignando una clase temporal y cambiándola a la que realizará la animación cuando el elemento comience a mostrarse.

Hay dos variables importantes a tener en cuenta:

  • startRatio: Es el porcentaje visible del objeto donde se creará la animación (0 = 0%, 1 = 100%)
  • options.threshold: Porcentaje visible del objeto para disparar la función y comenzar a comparar para saber en qué momento aplicar la animación

Dentro de la función se recorren todos los elementos observados y hay que comparar la "visibilidad" actual con la primera variable.

Nota: La visibilidad no se refiere a la propiedad CSS, sino a la parte de cada elemento que aparece en el viewport; un ejemplo burdo: si tiene 10 líneas y solo ha aparecido 1, la visibilidad es del 10%.

// Obtener los elementos donde aplicará la animación
let ps = document.querySelectorAll('p.anim');
// Definir el porcentaje visible para iniciar (0 - 1)
let startRatio = 0.1;
// Opciones
let options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.15
};
// Definir función para observar los elementos
function aparece(entries, observer) {
  // Recorrer elementos observados
  entries.forEach(entry => {
    // Si superaron el porcentaje visible
    if (entry.intersectionRatio > startRatio) {
      // Asignar clase para animar
      entry.target.className = 'animate__animated animate__backInDown';
    }
  });
}
// Inicializar observador
let observer = new IntersectionObserver(aparece, options);
// Agregar cada elemento al observador
ps.forEach(p => observer.observe(p));
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <!-- Font Awesome 5 -->
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <!-- Animate CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    
  <section class="section">
    <div class="container">

      <h1 class="title">
        Hello World
      </h1>
        <section class="service">
            <div class="container py-5">

                <h3 class="titulo-text display-4 text-center">Nuestros Servicios</h3>
                <p class="lead text-center">Destacamos en eficiencia, compromiso, honestidad, atención al detalle y velocidad con cada equipo.</p>

                <div class="iconos row text-center">

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="box-service">
                            <div class="icon" style="color:#7f7f7f">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <h4 class="info-title">Computadora y Laptop</h4>
                            <p class="anim">Reinstalamos todo el sistema operativo.<br>Instalamos todos los programas que utilizas. Windows, Office, Antivirus <br>y además si lo necesitas: Autocad, Photoshop, Illustrator, Scketchup y muchos más.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#d10000">
                                <i class="fa fa-bug"></i>
                            </div>
                            <h4 class="info-title">Limpieza de Virus</h4>
                            <p class="anim">Eliminamos todos tipos de VIRUS.<br>Ya no tendrás publicidad molesta en tu navegador ni en tu escritorio.<br>Tampoco reiterados reinicios o apagones.<br>Utilizar tu equipo de manera mas eficiente<br></p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#302977">
                                <i class="fa fa-save"></i>
                            </div>
                            <h4 class="info-title">Recuperacion y Proteccion</h4>
                            <p class="anim">No tienes que dar por perdida tu información, somos capaces de recuperarla, tratarla y entregarte un recovery, con la mayor eficacia y confiabilidad.<br>La informacion de un cliente es lo mas importante.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#479e00">
                                <i class="fa fa-globe"></i>
                            </div>
                            <h4 class="info-title">Paginas Web</h4>
                           <p class="anim">Como expertos en soluciones tecnológicas, sabemos cómo llevar tu negocio a lo digital de manera profesional. Te ayudamos a crear tu página web con un diseño actualizado a las tendencias y funciones web que tu comercio necesita.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                
    </div>
  </section>

0

Pues solo tendrias que agregar esta clase animate__delay-2s a tu p tag.

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Aqui puedes ejecutarlo y ver como quedan con 2s, 3s, 4s, y 5s que les agregue en los p tags.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <!-- Font Awesome 5 -->
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <!-- Animate CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    
  </head>
  <body>
  <section class="section">
    <div class="container">

      <h1 class="title">
        Hello World
      </h1>
        <section class="service">
            <div class="container py-5">

                <h3 class="titulo-text display-4 text-center">Nuestros Servicios</h3>
                <p class="lead text-center">Destacamos en eficiencia, compromiso, honestidad, atención al detalle y velocidad con cada equipo.</p>

                <div class="iconos row text-center">

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="box-service">
                            <div class="icon" style="color:#7f7f7f">
                                <i class="fa fa-desktop"></i>
                            </div>
                            <h4 class="info-title">Computadora y Laptop</h4>
                            <p class="animate__animated animate__backInDown">Si su equipo dejo de funcionar, no se preocupe ni se alarme, nosotros lo solucionamos, contamos con técnicos capaces de solucionar el problema para que este pueda funcionar de manera óptima y adecuada a sus requerimientos </p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#0004ff">
                                <i class="fa fa-window"></i>
                            </div>
                            <h4 class="info-title">Windows y Programas</h4>
                            <p class="animate__animated animate__backInDown animate__delay-2s">Reinstalamos todo el sistema operativo.<br>Instalamos todos los programas que utilizas. Windows, Office, Antivirus <br>y además si lo necesitas: Autocad, Photoshop, Illustrator, Scketchup y muchos más.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#d10000">
                                <i class="fa fa-bug"></i>
                            </div>
                            <h4 class="info-title">Limpieza de Virus</h4>
                            <p class="animate__animated animate__backInDown animate__delay-3s">Eliminamos todos tipos de VIRUS.<br>Ya no tendrás publicidad molesta en tu navegador ni en tu escritorio.<br>Tampoco reiterados reinicios o apagones.<br>Utilizar tu equipo de manera mas eficiente<br></p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#302977">
                                <i class="fa fa-save"></i>
                            </div>
                            <h4 class="info-title">Recuperacion y Proteccion</h4>
                            <p class="animate__animated animate__backInDown animate__delay-4s">No tienes que dar por perdida tu información, somos capaces de recuperarla, tratarla y entregarte un recovery, con la mayor eficacia y confiabilidad.<br>La informacion de un cliente es lo mas importante.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                            <div class="icon" style="color:#479e00">
                                <i class="fa fa-globe"></i>
                            </div>
                            <h4 class="info-title">Paginas Web</h4>
                           <p class="animate__animated animate__backInDown animate__delay-5s">Como expertos en soluciones tecnológicas, sabemos cómo llevar tu negocio a lo digital de manera profesional. Te ayudamos a crear tu página web con un diseño actualizado a las tendencias y funciones web que tu comercio necesita.</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-md-4 feature-box">
                        <div class="hestia-info">
                
    </div>
  </section>
  </body>
</html>

2
  • Gracias por contestar, el problema es que si espera 5 segundos en la parte superior antes de bajar, se cargan todas las animaciones antes de verlas. Commented el 31 ago. 2020 a las 1:42
  • Ah ok ok ahora entiendo. Lo que necesitas es que cuando el usuario hace el scroll para abajo ahi qures que se muestre las siguientes animaciones.
    – jdromero88
    Commented el 31 ago. 2020 a las 2:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.