Cuando queremos mostrar una galeria de imagenes en nuestro blog, pienso que la manera estetica de hacerla es fundamental. Si es original y encima tiene animaciones como esta, no te digo 'na'. Utilizando el CSS3 y el Javascript se consigue esta presentacion con las imagenes apiladas-desordenadas que al hacer click sobre ellas, estas van pasando como si lo hicieramos con la mano.
Si quieres ponerla en tu blog o web, primero copia este codigo y pegalo en tu plantilla antes de </head>.
Ver/Ocultar Codigo
<script>
(function() {
var queue = false,
touch = 'ontouchstart' in document.documentElement ? true : false,
images = document.querySelector('.images'),
imageWidth = images.firstElementChild.offsetWidth,
imageOffset = images.firstElementChild.offsetLeft,
cssTransition = function () {
var body = document.body || document.documentElement,
style = body.style,
property = 'Transition',
vendors = ['Moz', 'Webkit', 'O', 'ms'],
vendorCount = vendors.length;
if (typeof style[property.toLowerCase()] === 'string') {
return true;
}
do {
if (typeof style[vendors[vendorCount] + property] === 'string') {
return true;
}
} while (vendorCount--);
return false;
},
timeout = cssTransition() ? [300, 400] : [0, 0];
images.addEventListener(touch ? 'touchend' : 'click', function (event) {
if (!queue) {
queue = true;
var direction = ((touch ? event.changedTouches[0].pageX : event.pageX) - imageOffset) > imageWidth / 2 ? 'slide-right' : 'slide-left',
last = images.lastElementChild.classList;
last.add(direction);
setTimeout(function () {
last.remove(direction);
last.add('back');
setTimeout(function () {
images.insertBefore(images.lastElementChild, images.firstElementChild);
last.remove('back');
queue = false;
}, timeout[0]);
}, timeout[1]);
}
}, false);
})();
</script>
<style>
.images {
cursor: pointer;position:relative;
}
.images:hover .image:nth-child(4) {
-webkit-transform: rotate(10deg) translateX(50px);
-moz-transform: rotate(10deg) translateX(50px);
-ms-transform: rotate(10deg) translateX(50px);
-o-transform: rotate(10deg) translateX(50px);
transform: rotate(10deg) translateX(50px);
}
.images:hover .image:nth-child(3) {
-webkit-transform: rotate(3deg) translateX(75px);
-moz-transform: rotate(3deg) translateX(75px);
-ms-transform: rotate(3deg) translateX(75px);
-o-transform: rotate(3deg) translateX(75px);
transform: rotate(3deg) translateX(75px);
}
.images:hover .image:nth-child(2) {
-webkit-transform: rotate(-2deg) translateX(-50px);
-moz-transform: rotate(-2deg) translateX(-50px);
-ms-transform: rotate(-2deg) translateX(-50px);
-o-transform: rotate(-2deg) translateX(-50px);
transform: rotate(-2deg) translateX(-50px);
}
.images:hover .image:first-child {
-webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
-o-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
transform: rotate(-8deg) translateX(-75px) translateY(-10px);
}
.image {
position: absolute;
top: 50%;
left: 50%;
height: 250px;
width: 300px;
margin-top: -110px;
margin-left: -105px;
border: 5px solid #fff;
border-bottom-width: 15px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
z-index: 2;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.image:first-child {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-ms-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
}
.image:nth-child(2) {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.image:nth-child(3) {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.image:nth-child(4) {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.image:last-child {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.image.slide-right {
-webkit-transform: rotate(290deg) translateX(250px);
-moz-transform: rotate(290deg) translateX(250px);
-ms-transform: rotate(290deg) translateX(250px);
-o-transform: rotate(290deg) translateX(250px);
transform: rotate(290deg) translateX(250px);
}
.image.slide-left {
-webkit-transform: rotate(-290deg) translateX(-250px);
-moz-transform: rotate(-290deg) translateX(-250px);
-ms-transform: rotate(-290deg) translateX(-250px);
-o-transform: rotate(-290deg) translateX(-250px);
transform: rotate(-290deg) translateX(-250px);
}
.image.back {
z-index: 1;
}
</style>
Ahora, cada vez que queramos mostrar esta presentacion, agregamos el siguiente codigo, añadiendo las urls de las imagenes.
<div class="images">
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
<img class="image" src="
URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
</div>
