1. Se necesita las tres imágenes enteras.
2. Con css colocamos las imágenes en sus lugares usando position: absolute, left, right, top, bottom y z-index. Para que queden como la imagen original, esto es para que en móviles o navegadores sin javascript se vea la imagen igual omitiendo la animación (no recomiendo animaciones jquery para móviles).
3. Con Jquery css() movemos fuera de la vista a las imágenes y las hacemos más pequeñas.
4. Con animate() volvemos a poner las imágenes en su estado original (el punto 2), creándose un efecto de movimiento y tamaño.
5. Toda la parte de Jquery habría que limitarla a dispositivos con pantalla mayor a 800px para que no se anime en Móviles y Tablets.
Ejemplo:
Código:
if(screen.width > 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {
//Código jquery aquí
}
La cuestión es que no estoy con mucho tiempo como para escribir este código, y necesitaría todo el código de tu web, y la imagen cortada como te dije.
Una opción es que me dejes tu correo y me mandes todos los archivos de tu web y ver si te puedo ayudar en mi tiempo libre con la animación, pero no sé si está permitido en el foro.
Saludos!
