Incorpora a tus páginas web, animaciones CSS3 sin necesidad de programar.
Dale a tus sitios un toque moderno y dinámico con este set de animaciones CSS3 pre-configuradas
EJEMPLOS:
>> Mira todas las animaciones
>> Mira ejemplos con scroll
Como funciona?
El Pack de animaciones CSS3 de Justin Aguilar es un set de animaciones pre-configuradas para tus proyectos. Todo lo que tienes que hacer es agregar a tu proyecto, la hoja de estilos CSS que descargas y aplicar la clase pre-hecha del efecto que elijas, al elemento que quieras animar.
El pack de animaciones CSS3 usa los @keyframes de CSS3 y funciona en los últimos navegadores (IE 10). Usando lo @keyframes de CSS no tienes que preocuparte de posicionar el elemento para acomodar la animacion.
Las animaciones puede ser disparadas cuando el elemento llega al centro vertical de la pantalla o tambien al hacer click sobre el.
Instrucciones:
Agregar la hojas de estilos CSS a tu proyecto dentro del <head>:
<link rel="stylesheet" href="css/animations.css">
Reemplaza css con el nombre de la carpeta donde se encuentre el archivo CSS.
Agrega la clase CSS de la animación que quieras:
<div id="object" class="slideUp">
Reemplaza slideUp con la clase de animacion que desees.
Para las animaciones de «entradas» (cuando llegan al centro de la pantalla) debes hacer invisible el objeto a animar agregando la propiedad visibility: hidden al ID del elemento a animar:
#object{
background-color: #fe5652;
visibility: hidden;
}
visibility: hidden; es usado para esconder el objeto antes de animarlo.
Agregando efectos
Por defecto la animación se disparará cuando la pagina se cargue, pero usando jQuery puedes dispararlas de otras maneras. See how you can use these animations on your website.
Agrega jQuery al <head> de tu documento web:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Agregar esto antes de la etiqueta </body> para disparar la animacion cuando el scroll llegue al elemento en cuestión:
<script>
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
Reemplaza #animatedElement con el ID o la clase del elemento que quieras animar. Reemplaza slideUp con el nombre de la clase de la animacion que quieras. 400 representa el espacio entre el elemento y la parte superior de la pantalla. La animación se activará cuando el objeto este a 400px de la parte superior de la pantalla. Incrementa este valor para activar antes la animacion.
Agrega esto antes de la etiqueta </body> para activar la animación cuando se clickee sobre el elemento en cuestión:
<script>
$('#animatedElement').click(function() {
$(this).addClass("slideUp");
});
</script>
Reemplaza #animatedElement con el ID o la clase del elemento a animar. Reemplaza slideUp con la clase de la animación que desees.
EJEMPLOS:
>> Mira todas las animaciones
>> Mira ejemplos con scroll
DESCARGA:
Descarga AQUI debajo todos los códigos de ejemplo para usarlos directamente en tus páginas:
[sociallocker id=»2546″]
>> Descarga todos los ejemplos <<
>> Descarga solo el archivo CSS3 <<
[/sociallocker]
Deja una respuesta