Navegando por ahí hemos encontrado una animación que os puede resultar muy útil. Es para convertir el thumbnail de una imagen en full width.
O lo que es lo mismo traducido al cristiano, para hacer que la miniatura de una imagen ocupe todo el ancho de la pantalla. El resultado es espectacular, juzgad por vosotros mismos:
El efecto de la animación está hecho sobre Locomotive Scroll, que aunque está en una fase algo experimental, permite animaciones muy fluidas.
De thumbnail a full width
La idea principal detrás de este fantástico recurso es escalar el elemento y su hijo a otra escala. Para eso lo primero que necesitamos es establecer la escala del contenedor principal.
Lo llamaremos content__intro, e inicialmente debemos escalarlo a un valor al que queremos que llegue el full width.
<div class="content__intro content__breakout">
<img class="content__intro-img" src="img/1.jpg" alt="Some image" />
</div>
Teniendo el ancho y alto iniciales de un elemento y también sus dimensiones, podemos calcular sin problemas los valores de «escala» para la animación, con este sencillo js:
let introTransform = {
scaleX: imageSettings.imageWidthEnd / imageSettings.imageWidthStart,
scaleY: imageSettings.imageHeightEnd / imageSettings.imageHeightStart,
y: (winsize.height/2 - introRect.top) - introRect.height/2
};
También movemos el elemento para que esté centrado en la pantalla verticalmente. Definimos los valores iniciales de las variables en nuestro CSS:
body {
...
--image-height-start: 555px;
--image-width-end: 260px;
--image-height-end: 320px;
}
Y aquí viene la magia. Nuestro ancho de comienzo es del 100% del viewport, así que no necesitamos aplicar nada. Para la imagen usamos esto:
gsap.set(this.DOM.introImg, {
scaleX: 1/introTransform.scaleX * imageSettings.imageWidthEnd / this.DOM.introImg.clientWidth,
scaleY: 1/introTransform.scaleY * imageSettings.imageHeightEnd / this.DOM.introImg.clientHeight
});
1/introTransform.scaleX es el contador de escala para el contenedor de fuera. El segundo valor que multiplicamos es para escalar la imagen al tamaño que queremos.
Pero bueno, menos rollo y más manteca al bollo. Puedes ver una demo de esto funcionando en este enlace, y los ficheros puedes descargarlos de este otro enlace.
Fuente / más información: Proyecto en GitHub