JQuery - Animación

Val: 17

Animación

Publicado por Sergio (9 intervenciones) el 16/04/2020 21:32:36

Buenas noches. Tengo una página "Index" con varias secciones "divs" y un menú. Al hacer click en una opción del menú, hace un scroll suave y nuestra el div correspondiente. Estoy intentando hacer animaciones con la librería anímate.css. Lo consigo, pero sólo al cargar la página. Una vez que ha hecho la animación de un div, las animaciones de los otros divs no funcionan. Cómo podría hacer para que al elegir una opción del menú, ese div hiciera su animación correspondiente? Gracias. Un saludo

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 3

Val: 229

Animación

Publicado por joel (71 intervenciones) el 17/04/2020 10:53:07

Hola Sergio, nos puedes mostrar el código para poder probarlo?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 23

Val: 17

Animación

Publicado por Sergio (9 intervenciones) el 17/04/2020 19:49:19

Os pongo el menu primero.

<nav class="navbar navbar-expand-lg navbar-light bg-dark fixed-top" style="color: white !important;">

    <a data-scroll class="navbar-brand" href="#bienvenidos">La Almozara</a>

    <button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#menuprincipal" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="menuprincipal">

      <ul class="navbar-nav mx-auto">

        <li class="nav-item active">

          <a  class="nav-link" href="#bienvenidos">Inicio</span></a>

        </li>

        <li class="nav-item">

          <a  class="nav-link" href="#historia">Historia</a>

        </li>

        <li class="nav-item">

          <a  class="nav-link" href="#noticias">Noticias</a>

        </li>

        <li class="nav-item">

          <a  class="nav-link" href="#deporte">Deporte</a>

        </li>

        <li class="nav-item">

          <a  class="nav-link" href="#negocios">Negocios</a>

        </li>

        <li class="nav-item">

          <a  class="nav-link" href="#actividades">Actividades</a>

        </li>

        <li class="nav-item">

          <a  class="nav-link" id="click-blog" href="#blog">Blog</a>

        </li>

      </ul>

    </div>

</nav>

Ahora os pongo una función que tengo para que haga un scroll suave.

<script>

    // Script que sirve para hacer un scroll suave //

$(document).ready(function() {

  $('a[href^="#"]').click(function() {

    var destino = $(this.hash);

    var objeto = $(this).attr('href');

    console.log(objeto);

    if (destino.length == 0) {

      destino = $('a[name="' + this.hash.substr(1) + '"]');

    if (destino.length == 0) {

      destino = $('html');

    $('html, body').animate({ scrollTop: destino.offset().top }, 1500);

    return false;

    if (objeto === '#bienvenidos'){

      $('#bienv').removeClass('animated', 'rubberBand');

      animateCSS('#bienv', 'rubberBand');

});

});

</script>

Lo primero en esta función, me guardo el href que ha sido pulsado y lo uso para saber que opción de menú ha sido pulsada. Si pongo console.log(objeto), me saca #bienvenidos, #historia, etc. Osea, que lo hace bien.

Para probar, he puesto sólo animaciones a dos div, bienvenidos e historia.

Después del return false, hay un condicional. Pregunto si mi href es "#bienvenidos" y si es así, elimino la clase que lleva mi div, que ahora os lo pongo, y luego armo una función de animate.css para volver a cargar la clase (animación).

Os pongo el div #bienvenidos.

<div class="container-fluid d-flex justify-content-center align-items-center bienvenidos" style="margin-right: 0px important!;" id="bienvenidos">

    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <h1 class="display-2 text-danger titulo animated rubberBand" id="bienv">Bienvenido a la web de tu barrio</h1>

        </div>

    </div>

</div>

Ya veis que el div no tiene nada de especial. La animación la hago al h1, que es animated rubberBand de animate.css.

Yo lo que quiero es que cada vez que se pulse en una opción del menú, se ejecute la animación (clase de animate.css). Así NO FUNCIONA. Muchas gracias. Un saludo

Valora esta respuesta

Comentar

Pos: 23

Val: 17

Animación

Publicado por Sergio (9 intervenciones) el 18/04/2020 12:51:53

Buenos dáis. Ya lo he arreglado. Así

En cada href he puesto una función al hacer onclick= "animar (#id, animacion)

function animar(id, animacion){

    var finanimacion = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $(id).addClass(animacion).one(finanimacion, function(){

    $(id).removeClass(animacion);

});

Y así funciona de maravilla. Muchas gracias y espero que le sirva a alguien.

Valora esta respuesta

Comentar