Algunos efectos de movimiento de morphing de forma en imágenes usando SVG clipPath. La idea es crear una sensación orgánica y fluida al animar varios elementos en el hover.
Después de jugar con algunas formas de fondo morphing en desplazamiento , queríamos explorar algunos efectos de desplazamiento en esta demostración. Al transformar las rutas SVG podemos crear algunos movimientos orgánicos y fluidos en el hover. Hacerlo en un SVG clipPathnos permite usar este efecto en una imagen.
Para las animaciones en esta demostración estamos usando anime.js .
Atención: algunas técnicas modernas en el trabajo, así que utiliza un navegador capaz para ver la demostración.
Para el efecto de desplazamiento en un elemento, estamos haciendo varias cosas. Veamos las manipulaciones de forma real que hacemos. Estos se realizan en la ruta del clip, la imagen que se está recortando y un elemento de la ruta decorativa detrás de la imagen.
Aquí hay un artículo de ejemplo:
<div class="item item--style-1"
data-animation-path-duration="800"
data-animation-path-easing="easeInOutCubic"
data-path-elasticity="300"
data-morph-path="M 189,80.37 C 232.6,46.67 352.5,67.06 350.9,124.1 349.5,173.4 311.7,168 312.4,248.1 312.9,301.1 382.5,319.2 368.5,379.1 349.4,460.6 137.7,467.5 117.6,386.3 98.68,309.7 171.5,292.2 183.6,240.1 195.7,188.2 123.8,130.7 189,80.37 Z"
data-path-scaleX="0.8"
data-path-scaleY="1.1"
data-path-translateX="0"
data-path-translateY="30"
data-path-rotate="5"
data-animation-image-duration="800"
data-animation-image-easing="easeInOutQuart"
data-image-elasticity="300"
data-image-scaleX="1.2"
data-image-scaleY="1.2"
data-image-translateX="-20"
data-image-translateY="-45"
data-image-rotate="-5"
data-animation-deco-duration="1300"
data-animation-deco-easing="easeOutQuad"
data-deco-elasticity="300"
data-deco-scaleX="0.8"
data-deco-scaleY="0.9"
data-deco-translateX="-5"
data-deco-translateY="-5"
data-deco-rotate="2">
<svg class="item__svg" width="500px" height="500px" viewBox="0 0 500 500">
<clipPath id="clipShape1">
<path class="item__clippath" d="M 189,80.37 C 243,66.12 307.3,87.28 350.9,124.1 389.3,156.6 417,211.2 418.1,263.4 419.1,305.7 401.8,355.6 368.5,379.1 298.8,428 179.2,446.4 117.6,386.3 65.4,335.3 78.55,230.3 105.5,160.5 119.7,123.6 152.6,89.85 189,80.37 Z" />
</clipPath>
<g class="item__deco">
<use xlink:href="#deco1" />
</g>
<g clip-path="url(#clipShape1)">
<image class="item__img" xlink:href="img/1.png" x="0" y="0" height="500px" width="500px" />
</g>
</svg>
<div class="item__meta">
<div class="item__number">
<span class="item__specimen">21</span>
<span class="item__reference">BX3</span>
</div>
<h2 class="item__title">Codium fasciculatus</h2>
<h3 class="item__subtitle">Exoplanet Gliese 180 b</h3>
</div>
</div>
Estamos usando clipPathun imageen el SVG. El elemento deco se toma desde el exterior; Hemos incluido todas las rutas al principio del archivo HTML y las hemos referenciado use. También puede agregarlo directamente, pero permite la reutilización que, en nuestro caso, tiene sentido. La ruta a la que se transformará la ruta de acceso del clip inicial se almacena en el atributo de datos de ruta de acceso a datos de paso de datos. Los otros atributos de datos son para establecer las duraciones, easings, etc. para la ruta, la imagen y el elemento deco. El único que falta aquí es el retraso, que también puede agregar para cada uno de los elementos. Por supuesto, no tiene que especificar todos estos atributos de datos, ya que hay valores predeterminados para cada uno de ellos (consulte main.js).
¡Esperamos que disfrutes de este pequeño efecto y lo encuentres útil!
Anime.js por Julian Garnier