Dividiendo la galería de imágenes-SplittingImage. js

Vista prévia

Descripción

Una galería de imágenes de división realizada con < a href = "https://github.com/shshaw/SplittingImage" target = "_ blank" rel = "noopener" > SplittingImage. js que muestra la imagen ampliada con un efecto de división al pasar el ratón sobre.

El SplittingImage. js es una biblioteca de JavaScript pura que se utiliza para dividir una imagen con el número especificado de filas & cols mediante JavaScript y CSS3.

Funcionamiento

Inserte el splitting-Image. CSS y splitting-Image. js en el documento.

<link rel="stylesheet" href="splitting-image.css">
<script src="splitting-image.js"></script>

Añada miniaturas e imágenes de tamaño completo a la página.

<div class="tiler">

<img src="1.jpg" />

<div class="tiler-overlay" data-image="1.jpg"></div>
</div>

<div class="tiler">

<img src="2.jpg" />

<div class="tiler-overlay" data-image="2.jpg"></div>
</div>

<div class="tiler">

<img src="3.jpg" />

<div class="tiler-overlay" data-image="3.jpg"></div>
</div>

...

El CSS necesario para la galería.

.tiler {

position: relative;

display: inline-block;

cursor: pointer;

visibility: hidden;

width: 33.3%;

margin: auto;
}

.tiler img {

display: block;

margin: auto;

max-width: 100%;

visibility: visible;
}

.tiler-overlay {

background-position: center center;

margin: auto;

position: fixed;

top: 1em;

bottom: 1em;

left: 1em;

right: 1em;

max-width: 1000px;

max-height: 600px;

-webkit-perspective: 30px;





perspective: 30px;
}

.tiler-overlay .split-cell {

pointer-events: none;

opacity: 0;

-webkit-transform: translateZ(-15px);





transform: translateZ(-15px);

-webkit-transform-style: preserve-3d;





transform-style: preserve-3d;

transition-property: opacity, -webkit-transform;

transition-property: transform, opacity;

transition-property: transform, opacity, -webkit-transform;

transition-duration: 0.5s, 0.4s;

transition-timing-function: cubic-bezier(0.65, 0.01, 0.15, 1.33);

/* The center character index */

--center-x: calc((var(--col-total) - 1) / 2);

--center-y: calc((var(--row-total) - 1) / 2);

/* Offset from center, positive & negative */

--offset-x: calc(var(--col-index) - var(--center-x));

--offset-y: calc(var(--row-index) - var(--center-y));

/* Absolute distance from center, only positive */

--distance-x: calc(


(var(--offset-x) * var(--offset-x)) / var(--center-x)

);

/* Absolute distance from center, only positive */

--distance-y: calc(


(var(--offset-y) * var(--offset-y)) / var(--center-y)

);

transition-delay: calc( 0.1s * var(--distance-y) + 0.1s * var(--distance-x) );
}

.tiler-overlay {

z-index: 2;
}

.tiler:hover .split-cell {

-webkit-transform: scale(1);





transform: scale(1);

opacity: 1;
}

Inicialice SplittingImage y especifique el número de filas y cols.

SplittingImage ('. Tiler-superposición ', {Rows: 3, cols: 3});