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>