分割图像悬停画廊

下载代码

html

css

分享到微信朋友圈

html

css

.splitting-image {
  background-size: 0% 0%;
  position: relative;
  overflow: hidden;
}

.splitting-image img {
  display: block;
}

@supports (--row-size: calc( 100% / 2 )) {
  .splitting-image {
    background-size: cover;
    visibility: hidden;
    --row-size: calc(100% / var(--row-total));
    --col-size: calc(100% / var(--col-total));
  }

.split-cell {
    background: inherit;
    position: absolute;
    overflow: hidden;
    top: calc(var(--row-size) * var(--row-index));
    left: calc(var(--col-size) * var(--col-index));
    width: calc(0.5px + var(--col-size));
    height: calc(0.5px + var(--row-size));
  }

.split-cell__inner {
    position: absolute;
    visibility: visible;
    background: inherit;
    width: calc(100% * var(--col-total));
    height: calc(100% * var(--row-total));
    transform: translate(
      calc(-1 * var(--col-size) * var(--col-index)),
      calc(-1 * var(--row-size) * var(--row-index))
    );
  }
}
.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;
}

html {
  height: 100%;
  display: flex;
  background: #323643;
}

body {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  padding: 2em;
  margin: auto;
}

JavaScript

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.SplittingImage = factory());
}(this, (function () { 'use strict';

/**
 * # SplittingImage
 *
 * @param {*} els
 */
function SplittingImage(els, opts) {
  opts = opts || {};

return $(els).map(function(el, i) {
    if (!el._splitImg) {
      el._splitImg = split(el, opts);
      if (el.classList) {
        el.classList.add("splitting-image");
      }
    }
    return el._splitImg;
  });
}

/**
 * # SplittingImage.$
 * Convert selector or NodeList to array for easier manipulation.
 *
 * @param {*} els - Elements or selector
 */
function $(els) {
  return Array.prototype.slice.call(
    els.nodeName
      ? [els]
      : els[0].nodeName ? els : document.querySelectorAll(els),
    0
  );
}
SplittingImage.$ = $;

/**
 * # SplittingImage.split
 * Split an element with the specified number of rows & cols
 * @param {Node} el - Element to split
 * @param {String} key -
 * @param {String|RegEx} splitBy - string or regex to split the innerText by
 * @param {Boolean} space - Add a space to each split if index is greater than 0. Mainly for `Splitting.words`
 */
function split(el, opts) {
  var img =
      opts.image || (el.dataset && el.dataset.image) || el.currentSrc || el.src,
    rows = opts.rows || (el.dataset && el.dataset.rows) || 1,
    cols = opts.cols || (el.dataset && el.dataset.cols) || 1,
    row = 0,
    col = 0,
    cells = [],
    parent = el.parentNode,
    cell,
    inner;

// Use fragment to prevent unnecessary DOM thrashing.
  var fragment = document.createDocumentFragment();

for (; row < rows; row++) {
    for (col = 0; col < cols; col++) {
      // Create a span
      cell = document.createElement("span");
      cell.className = "split-cell";
      cell.style.setProperty("--row-index", row);
      cell.style.setProperty("--col-index", col);
      cell.style.setProperty("--cell-index", cells.length);
      cell.setAttribute("data-row", row);
      cell.setAttribute("data-col", col);

inner = document.createElement("span");
      inner.className = "split-cell__inner";
      cell.appendChild(inner);

fragment.appendChild(cell);
      cells.push(cell);
    }
  }

if (!img) {
    img = el.querySelector("img");
    img = img && (img.currentSrc || img.src);
  }

if (img) {
    el.style.setProperty("background-image", "url(" + img + ")");
  }

el.style.setProperty("--row-total", rows);
  el.style.setProperty("--col-total", cols);
  el.style.setProperty("--cell-total", cells.length);

// Append elements back into the parent
  el.appendChild(fragment);

return {
    el: el,
    cells: cells,
    rows: rows,
    cols: cols
  };
}
SplittingImage.split = split;

SplittingImage.rows = function(els, rows, opts) {
  opts = Object.assign({}, opts, { cols: 1, rows: rows });
  return SplittingImage(els, opts);
};

SplittingImage.cols = function(els, cols, opts) {
  opts = Object.assign({}, opts, { rows: 1, cols: cols });
  return SplittingImage(els, opts);
};

return SplittingImage;

})));

;(function(){
  
  // bracket [≠] square [?] 
  var svgIcon = '<svg class="shaw__icon" width="222" height="284" viewBox="0 0 2223 2846"><path fill="#f4d198" d="M1040 436c46-.8 71.4 17.4 103 31l82 35 441 189c-3 6.2-3.7 9-2 16 28.7 21.2 64 26.6 102 41 32 12.2 62.6 27.5 89 46 70 49.6 122 125.5 156 211 16.7 42.4 23 95.4 40 136 21.3 52.2 85.3 136.6 72 214-9 50.5-31.4 75-57 107-19 23.4-52 45.2-43 95 14.7 82.3 57.8 139 89 205 10.8 23.4 22 46.7 32.8 70l10 32c17.8 28 85.5 81.5 64 130-15 34.3-48.4 58.2-84 72-17 4.4-34 8.8-51 13 5 15.5 9 29.5 16 42-5.6 6.8-11.3 13.4-17 20 1.4 58 36.5 119.5 4 164-14 19.4-35 26.6-54 41 9.7 12.6 21.5 23.3 28 39 30 72.4-52.2 154.4-82 196-17.7 25-36.7 64.3-64 79-52.3-6.2-104.6-12.6-157-19-130.8-26-259.5-41.8-381-76-82.6-23-166-43.7-243-74l-143-59c-.2-50-.5-100-1-150h-1c-23.5 1.4-47.2 2.8-71 4l-15 15c-13.7 10.2-32 17.4-52 21-90.8 17.2-202.2-74.8-249.8-112l-42-38c-11.4-1.6-22.7-3.2-34-5-33.6-7.2-99.3-17.8-115-41l-67-167-142-339 166-20c1.4-27.2 26.6-95.5 51-97l181 49 2-1c-.7-51.7 2-106.3 10-154 8.6-51.6 8-103.5 17-152l18-124c29.5-135.3 55.3-266.4 104-381 41.2-97.2 85.7-194 164-254 22.4-17.2 48.8-32.8 79-42l47-8z"/><path fill="#bf3d27" d="M1008 59v-8c14.8 4.4 23.6 20.4 35 29l65 43c8.4 6.3 26.4 24.8 40 21 9.7-5 8.2-22.2 8-34 15 7.2 32.2 21.3 49 24v-5c-4.4-15.4-4.7-33-7-51h6c88.8 27.2 209.3 5.2 297 22l52-2c32.2 7.3 66.3 35.3 97 47l52 17c3.5 5.7 7.2 11.3 11 17 8.2 6.3 16.5 12.7 25 19 58.6 30.8 113.8 60 168 93l24 10c10.6 7.4 11 22.2 20 31 13.2 9.3 26.5 18.7 40 28 31.5 25.4 72.8 84 89 124 14 35.8 12.7 100 3 139-23.3 92-85 195.2-150 244-3.5-3.3-6.8-6.6-10-10l-51-46-213 57-196 85c-41.2 18-84.3 36-122 58-26 15-49.5 34-83 41-54 11.2-111-6.6-161-7 8.6 61.2 25 132 52 179 8 14.2 41.8 81.8 39 101-12.7 85.2-70.4 125.8-122 172l7 137 7 101c12.5 77.8 10 156.3 24 229 9 48 13 94 25 137l8 34c8.6 16 90.4 62.3 111 75 79.6 49.7 164.7 96.8 254 136 38.3 17 84 48.6 126 58 18.4-23 38-43 54-70 6.2-14.6 12.5-29.2 19-44 6.3-10.5 67.2-41 82-50 61.3-37.3 124.7-70.7 196-99 34.2-13.5 75.3-29.6 121-23 4.5 10.4 9.2 20.8 14 31 10.6 34.2.8 70.2-12 94-31.2 1-63 14.8-89 23-82.7 26.3-167.3 58-214 120-23.7 31.4-44 88.3-13 128 18.2 23.8 53.3 24 83 11 21.6-9.4 40-30.8 59-39 18.4-7.8 80.2-5.5 99 0-2.6 28.8-3.4 61.8-3 94v47c-14 83.2-40 137-95 177-94.4 68.6-214.8 41.3-315 2-60.8-21.5-121.4-43.2-182-65-120.6-58-243.3-122.3-355-190-72.2-43.5-139.8-77-182-150-17.7-30.3-20-87-12-132l28-184 6-76c5.3-33.3 2.7-117-9-139l-62-67c-57-57-198.2-164.5-324-138-42.3 9-87.2 26.4-109 56-32 43.3-40.3 141.8-16 201 27.5 67.4 69.7 136 112 191l80 84 4 40c11.4 71.7-24.4 176.2-59 205-10.4-11.6-20.7-23.2-31-35-22.4-28-47.7-53.4-70-82-60.6-77-115.6-155-167-243-18-31-29.4-66-44-100l-83-196C88.7 1670 27.3 1539.8 0 1406v-138c0-155.8 32.6-292.3 91-391 16.3-27.6 37-57 62-76l29-17 52-44 22-17 62-96 14-46 35-86c29.3-66.6 70.2-123.8 113-177 23.6-29.4 57-46.7 87-70C627.8 201 717.3 93.4 730 0h4c30 13 74.3 15.3 109 21h27c19.6 5.2 33.4 22.5 56 28l1-13h8l-1-8 26 11 3-4c10.6 9.8 27 22.4 45 24zm917 68h2-2zm2 1h2-2zm58 47c1.5 1.7 3.2 3.3 5 5l-3-2c-3.2-2-1.2-.3-2-3z"/></svg>';
  
  document.head.insertAdjacentHTML('beforeend','<style>.shaw { display: block; position: absolute; position: fixed; z-index: 9999; bottom: 5px; right: 5px; font-size: 10px; color: #c03b27; text-decoration: none; padding: 10px; border-radius: 50%; opacity: 0.4; transform-origin: 100% 100%; transition: all 300ms ease-in-out; } .shaw > * { transition: inherit; } .shaw:hover { opacity: 1; background: rgba(255,255,255,0.9); } .shaw__icon, .shaw__title { display: inline-block; vertical-align: middle; } .shaw__icon { width: 24px; height: 24px; position: relative; z-index: 1; } .shaw__title {  white-space: nowrap; opacity: 0; padding-right: 10px; transform: translateX(100%); } .shaw:hover .shaw__title { transform: scale(1); opacity: 1; } .shaw:hover .shaw__icon { transform: scale(1.4); } </style>'); // .shaw__title { position: absolute; right: 100%; top: 50%; margin-top: -0.5em;width: fit-content; position: absolute; right: 100%; margin-right: 10px; }
  
  var a = document.createElement('a');
  a.setAttribute('href','https://codepen.io/shshaw');
  a.setAttribute('target','_blank');
  a.className = 'shaw';
  a.innerHTML = svgIcon;
  a.onclick = function(){
    if ( ga ) {
      var url = this.getAttribute('href');
      ga('send', 'event', 'shawhead', 'click', url, {
        'transport': 'beacon',
        'hitCallback': function(){ console.log('callback!');window.open(url); }
      });
      return false;
    }
  };
  
  document.body.appendChild(a);
  
  //document.body.insertAdjacentHTML('beforeend','<a href="https://codepen.io/shshaw" target="_blank" class="shaw">'+svgIcon+'</a>');
  
})();

console.clear();

SplittingImage('.tiler-overlay', { rows: 3, cols: 3 });

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg