js实现图片复制变形动画艺术效果代码-html代码-BFW代码库

js实现图片复制变形动画艺术效果代码

代码语言：html

所属分类：动画

代码描述：js实现图片复制变形动画艺术效果代码，可设置数量和图片地址。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #111;

	&:hover footer#options {
		position: absolute;
		bottom: 0;
		padding: 1rem;
		background: rgb(255 255 255 / 30%);
	}
}

.kaleidoscope {
	position: relative;
	width: 100dvw;
	height: 100dvh;
	&.rotating {
		animation: 🎡 10s linear infinite;
		transform-origin: center;
	}
	& > .tile {
		display: none;
		position: absolute;
		top: 50dvh;
		left: 0;
		z-index: 0;
		overflow: hidden;
		height: max(100dvh, 100dvw);
		width: max(50dvh, 50dvw);
		transform-origin: right top;
		& > .image {
			position: relative;
			top: 0;
			left: 100%;
			height: 100%;
			width: 100%;
			background-color: rgb(255 255 255 / 5%);
			background-image: unset;
			transform-origin: left top;
			transition: background-position 100ms ease-in-out;
		}
	}
	&[data-tiles] .tile {
		display: block;
	}
}

@keyframes 🎡 {
	to {
		transform: rotate(360deg);
	}
}
</style>


  
</head>

<body translate="no">
  <div class="kaleidoscope rotating" data-tiles="16" data-src="//repo.bfw.wiki/bfwrepo/image/63dca8896f791.png"></div>



<footer id="options">
	<input type="range" name="tiles" value="5" min="3" max="16" />
	<input type="text" name="src" value="//repo.bfw.wiki/bfwrepo/image/63dca8896f791.png" placeholder="image url"/>
</footer>
  
      <script >
document.addEventListener("DOMContentLoaded", () => {
  // Initialize the kaleidoscope effect on elements with the class 'kaleidoscope'
  document.querySelectorAll(".kaleidoscope").forEach(element => {
    new Kaleidoscope(element);
  });

  // update params and reload
  document.querySelectorAll('#options [name]').forEach(input => {
    input.addEventListener('change', e => {
      document.querySelectorAll(".kaleidoscope").forEach(element => {
        element.dataset[e.target.name] = e.target.value;
        new Kaleidoscope(element);
      });
    });
  });
});


class Kaleidoscope {
  constructor(element) {
    this.element = element;
    this.x = 0;
    this.y = 0;
    this.auto = false;
    this.auto_x = 0;
    this.auto_y = 0;
    this.auto_throttle = false;

    this.parameters = this.getParametersFromAttributes();
    this.tiles = ~~this.parameters.tiles || 7;
    this.mode = ~~this.parameters.mode || 2;
    this.reverse = this.parameters.reverse === 'true' ? -1 : 1;
    this.s = this.parameters.s || 3;

    this.kaleidoscope = this.element;
    this.image = null;

    this.init();
  }

  getParametersFromAttributes() {
    const parameters = {};
    Array.from(this.element.attributes).forEach(attr => {
      if (attr.name.startsWith("data-").........完整代码请登录后点击上方下载按钮下载查看