비전공자 개발일기

Image Distribution Effect 본문

Javascript

Image Distribution Effect

HiroDaegu 2022. 12. 6. 00:37
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMAGE DISTRIBUTION EFFECT</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="main.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js' integrity='sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==' crossorigin='anonymous'></script>
</head>
<body>
    <div class="container"></div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

body {
    min-height: 100vh;
    overflow: hidden;
    background-color: #FFF;
}

.container {
    display: flex;
    flex-wrap: wrap;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.container .block {
    width: 5vw;
    height: 5vw;
    background: url('img.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transform-style: preserve-3d;
}
let container = document.querySelector(".container");
for (let i = 0; i <= 400; i++) {
  let block = document.createElement("div");
  block.classList.add("block");
  container.appendChild(block);
}

let block = document.querySelectorAll(".block");
let animation = anime.timeline({
  targets: block,
  easing: "easeInOutExpo",
  loop: true,
  delay: anime.stagger(10, { start: 50 }),
});

animation
  .add({
    scale: 0,
    translateX: function () {
      return anime.random(360, 2100);
    },
    translateY: function () {
      return anime.random(360, -2100);
    },
    rotate: function () {
      return anime.random(-360, 360);
    },
    duration: function () {
      return anime.random(500, 3000);
    },
  })
  .add({
    scale: 1,
    translateX: 0,
    translateY: 0,
    rotate: 1,
    duration: function () {
      return anime.random(500, 3000);
    },
  });
728x90
LIST

'Javascript' 카테고리의 다른 글

Create Email Validation  (0) 2022.12.08
Password Strength Checker with color  (0) 2022.12.07
Product Filter  (0) 2022.12.04
New Year 2023 Countdown  (0) 2022.12.02
Dictionary App  (0) 2022.12.01
'Javascript' Related Articles more