Splitting Divide an Image with CSS Vars | SplittingImage.js

SplittingImage.js is a pure JavaScript library used to split an image with the specified number of rows and columns using JavaScript and CSS3.

javascript split image into parts, split image animation css, how to divide image into blocks in css, split canvas in javascript, image split codepen

How to make use of it:

1. Insert splitting-image.css and splitting-image.js into the document.

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

2. Add thumbnails and full-size images to the page.

<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>
...

3. CSS is needed for the gallery.

.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;
}

splitting image gallery library, SplittingImage Plugin/Github

See Demo And Download

Official Website(shshaw): Click Here

This superior jQuery/javascript plugin is developed by shshaw. For extra advanced usage, please go to the official website.