Entrada destacada

PƁGINA DE BIENVENIDA

PƁGINA DE BIENVENIDA

Imagen que aparece con efecto deslizante

Imagen que aparece con efecto deslizante


Aqui os traigo una animacion con dos fotografias,mientras una esta oculta, laotra aparece cuando se pasa el cursor por encima 
la imagen que visualizamos. En IE8 y IE9 tambiƩn funciona, aunque no queda tan conseguido el efecto deslizante.
Como son efectos que la mayorĆ­a de veces los aƱadimos esporadicamente lo que haremos para probarlo es incluir todo el cĆ³digo necesario justo donde deseamos mostrar el efecto, ya sea una entrada o un gadget de HTML.
Primero aƱadimos el cĆ³digo para las imĆ”genes, y ahĆ­ mismo especificamos el tamaƱo de la primera imagen.


Por favor mira la demostraciĆ³n:   


Vamos al asunto

1Āŗ Ir a Blogger  

2Āŗ AƱadir un Gadget o introducir este codigo en una entrada (en HTLM)


_________________________________________________________________________________<div class="pulloutimage" style="height: 223px; width: 298px;"> 
<img class="original" src="Url-primera-imagen" />
<img class="ondemand" src="Url-segunda-imagen" /> 
</div>
_________________________________________________________________________________

A continuaciĆ³n de las imĆ”genes copiamos y pegamos los estilos:
 HTML podemos aƱadir en la plantilla antes de ]]></b:skin>

_________________________________________________________________________________

<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
/* aquĆ­ estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* aquĆ­ estilos para el borde de la segunda imagen */
}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}

</style>
_________________________________________________________________________________

En los estilos estĆ” marcado el lugar que podemos modificar si deseamos aƱadir algĆŗn tipo de borde a las imĆ”genes.

- La sombra que muestra la segunda imagen la podemos quitar eliminando la lĆ­nea con la propiedad box-shadow.

CONVERSATION

0 comentarios:

Publicar un comentario

AddToAny

Printfriendly

Back
to top