2

Estoy tratando de animar mi pagina, con css3 animation que es una pagina que encontré por google y que pone instrucciones precisas de como hacer para que funcione.

La página en cuestión es esta: http://www.justinaguilar.com/animations/index.html#

Aquí os pongo código de mi ejemplo ya que no es muy grande, ya que llevo 2 horas y media intentando que funcione y entre unas cosas y otras no se me ve nada.

El ejemplo esta hecho para que al hacer scroll a una distancia de 400 del top se me vea la animación;

$(window).scroll(function() {
  $('#objeto').each(function() {
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow + 400) {
      $(this).addClass("slideUp");
    }
  });
});
#objeto {
  width: 30%;
  height: 200px;
  background-color: red;
  visibility: hidden;
}
<link href="animacion.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="objeto" class="slideUp"></div>

De verdad que lo he probado todo y ne sé por qué esto no funciona, os agradezco desde ya a quien me ayude.

EDIT

Os voy copiar el codigo que tengo, pero el problema viene por parte del jquery porque si le pongo la clase slideup al rectangulo me hace la animacion, luego el css y la animacion estan funcionando sin embargo con la clase quitada es cuando el jquery no me la esta agregando y consecuencia de eso ni se me muestra el rectangulo :

<!DOCTYPE html>
<html lang="en">
<head>


    <style>

        body {
           height: 1000px;
        }
        #objeto {
          /* modifique la posición para que se vea en la caja de stacksnippet */
          position: relative;
          top: 200px;
          width: 30%;
          height: 200px;
          background-color: red;
          visibility: hidden;
        }

        .slideUp {
          animation-name: slideUp;
          animation-duration: 1s;
          animation-timing-function: ease;
          visibility: visible !important;
        }
        @keyframes slideUp {
          0% {
            transform: translateY(100%);
          }
          50% {
            transform: translateY(-8%);
          }
          65% {
            transform: translateY(4%);
          }
          80% {
            transform: translateY(-4%);
          }
          95% {
            transform: translateY(2%);
          }
          100% {
            transform: translateY(0%);
          }
        }
    </style>



    <script>

    $(window).scroll(function() {
        $('#objeto').each(function() {
            var imagePos = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();

        console.log(imagePos, topOfWindow);
        if (imagePos < topOfWindow) {
          $(this).addClass("slideUp");
        }
      });
    });

    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>


    <div id="objeto"></div>




</body>
</html>
4
  • Puedes checar el log del navegador, y mostrar si hay algun detalle?
    – jasilva
    el 4 mar. 2016 a las 16:22
  • hola jasilva, gracias por tu respuesta, pero el css si me estaba cargando bien, de hecho hice la prueba poniendo el background color desde animation y me lo cargo bien, la transicion me la hace bien pero lo que no me hace es lo de que cuando scrollee hacia abajo que me aparezca la transicion conforme voy llegando a esa parte de la web. Ahora mismo la transicion me la hace nada mas cargar la pagina
    – Graphenous
    el 4 mar. 2016 a las 17:56
  • Supongo que tu codigo contiene mas elementos, de ser asi, podrias agregarlos a la pregunta, ya que no vemos otro problema con el actual
    – jasilva
    el 4 mar. 2016 a las 23:07
  • Por fin me funciono!! no me pregunteis como porque yo creo que lo tenia igual que en el ejemplo pero ya anda!! ahora me surge otra duda porque suponiendo que quiera hacer varias animaciones me gustaria reusar el mismo codigo jquery, estuve mirando la funcion each. de jquery y parece ser que si tengo varios div con la clase objeto me los deberia animar todos pero no me lo hace, os pego codigo abajo ya que aqui no me deja!!
    – Graphenous
    el 7 mar. 2016 a las 10:18

2 respuestas 2

3

Ya puede revisar tu código.

El problema que tienes es que no importas bien el archivo animacion.css

$(window).scroll(function() {
  $('#objeto').each(function() {
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow + 400) {
      $(this).addClass("slideUp");
    }
  });
});
#objeto {
  width: 30%;
  height: 200px;
  background-color: red;
  visibility: hidden;
}
<link href="http://www.justinaguilar.com/animations/css/animations.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="objeto" class="slideUp"></div>

Puedes ver que solo cambie la url del css, y el código es completamente funcional.

Asegúrate que tu archivo que descargaste este al mismo nivel de tu html (en este caso asi tienes tu import) o mejor aun, crea una carpeta css y deposita tu archivo ahí, con esto tu import debería ser.

<link href="css/animacion.css" rel="stylesheet">

Por último, asegúrate de que el nombre es correcto, el original se llama animation.css

1

Si quieres que inicialmente este invisible y aparezca cuando haces scroll sobre la pagina...

debes remover class="slideUp" del <div id="#objeto" .. >

de otro modo, se vuelve visible de inmediato cuando la pagina termina de cargarse.

Este ejemplo lo modifique un poco para que se ajuste a las medidas de esta página, pero la esencia es remover esa clase.

$(window).scroll(function() {
  $('#objeto').each(function() {
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();

    console.log(imagePos, topOfWindow);
    if (imagePos < topOfWindow) {
      $(this).addClass("slideUp");
    }
  });
});
body {
  height: 1000px;
}
#objeto {
  /* modifique la posición para que se vea en la caja de stacksnippet */
  position: relative;
  top: 200px;
  width: 30%;
  height: 200px;
  background-color: red;
  visibility: hidden;
}

/* tomado desde http://www.justinaguilar.com/animations/css/animations.css */
/* por que sino este ejemplo no funciona accediendo al SOes via https */

.slideUp {
  animation-name: slideUp;
  animation-duration: 1s;
  animation-timing-function: ease;
  visibility: visible !important;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(-8%);
  }
  65% {
    transform: translateY(4%);
  }
  80% {
    transform: translateY(-4%);
  }
  95% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="objeto"></div>

Tu Respuesta

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

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