CSS 过渡 Javascript

Question

https://twitter.com/P_h_l_i_x/status/1353659923834544128

从上面的 link 开始，我正在尝试复制此页面的影响者部分中的整个过渡和动画，我对此的思考过程并未为我提供任何解决方案。任何想法和可能的解决方案将不胜感激。谢谢大家

const images = document.querySelectorAll(".cycle");
console.log(images.length);
function cycle() {
  for (let i = 0; i < images.length; i++) {
    if (images[i].classList.contains("active")) {
      images[i].classList.remove("active");
      // console.log(images[i]);
      const newActive = i + 1 >= images.length ? 0 : i + 1;
      // console.log(newActive);
      images[newActive].classList.add("active");
      // console.log(newActive);
      break;
      // continue;
    }
  }
}

document.addEventListener("DOMContentLoaded", () => setInterval(cycle, 500));

header {
  position: relative;
  height: 90px;
  // overflow: hidden;
  width: 90px;
  .image1 {
    position: absolute;
    width: 23.5rem;
    height: 27.5rem;
    top: 0.125rem;
    left: 0.1875rem;
    z-index: 0;
    background: #5a9f45;
    box-shadow: rgba(134, 198, 116, 0.1);
    // transform: rotate(-8deg);
    transition: all 0.2s linear;
  }
  .image2 {
    position: absolute;
    width: 23.5rem;
    height: 27.5rem;
    top: 0.125rem;
    left: 0.1875rem;
    z-index: -10;
    background: #5a9f45;
    box-shadow: rgba(134, 198, 116, 0.1);
    // transform: rotate(-8deg);
    transition: all 0.2s linear;
  }
  .image3 {
    position: absolute;
    width: 23.5rem;
    height: 27.5rem;
    top: 0.125rem;
    left: 0.1875rem;
    z-index: -20;
    background: #5a9f45;
    box-shadow: rgba(134, 198, 116, 0.1);
    // transform: rotate(-8deg);
    transition: all 0.2s linear;
  }
}

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

<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>Document</title>
</head>
<!-- Comment here -->

<body>
  <img src="./assets/desktop/Icon feather-instagram.svg" alt="" />
  <div class="for"></div>
  <h1 class="links">Hesgoal</h1>
  <div class="header">
    <img src="http://placekitten.com/200/300" alt="" class="image1 img" />
    <img src="http://placekitten.com/200/300" alt="" class="image2 img" />
    <img src="http://placekitten.com/200/300" alt="" class="image3" />

  </div>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> -->
</body>

</html>

Answer 1

这是一个使用 SASS/SCSS 的基础示例。您需要根据自己的需要对其进行定制。如果你想走那条路，你也可以用 js 来做。 HTML

<div id='container'>
  <img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt='view' id="img1" class="images" />
  <img src="https://media.istockphoto.com/photos/colored-powder-explosion-abstract-closeup-dust-on-backdrop-colorful-picture-id1072093690?k=6&m=1072093690&s=612x612&w=0&h=Eyk67XBt4sr3Bk1MubM6dHpvEVNICX4L7FumWhcTwuY=" alt='powder' id="img2" class="images" />
  <img src="https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG" alt='powder' id="img3" class="images" />
  <img src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt='bird' id="img4" class="images" />
</div>

CSS

#container {
  .images {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);

    @for $i from 1 through 4 {
      $rotation: random(40) - 20deg;

      &:nth-child(#{$i}) {
        transform: translate(-50%, -50%) rotate($rotation);
        z-index: -1 * $i; //reverses indexes
        animation: fly#{$i} 4s linear #{1s * $i};
      }

      @keyframes fly#{$i} {
        0% {
          transform: translate(-50%, -50%) rotate($rotation);
        }
        50% {
          transform: translate(800%, -50%) rotate($rotation);
        }
        100% {
          transform: translate(800%, -50%) rotate($rotation);
        }
      }
    }
  }
}

如果您没有使用 SASS，那么您需要从循环中分离出每个元素并分别设置它们的样式

代码笔：https://codepen.io/jfirestorm44/pen/WNpbKmO?editors=1100

更新：添加 GSAP。我不熟悉它，但是通过阅读这里的文档，我必须让你开始。 HTML

<div id='container'>
  <div class="fakeImages" id="fake1"></div>
  <div class="fakeImages" id="fake2"></div>
  <div class="fakeImages" id="fake3"></div>
  <img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3VucmlzZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt='view' id="img1" class="images" />
  <img src="https://media.istockphoto.com/photos/colored-powder-explosion-abstract-closeup-dust-on-backdrop-colorful-picture-id1072093690?k=6&m=1072093690&s=612x612&w=0&h=Eyk67XBt4sr3Bk1MubM6dHpvEVNICX4L7FumWhcTwuY=" alt='powder' id="img2" class="images" />
  <img src="https://media3.s-nbcnews.com/j/newscms/2019_41/3047866/191010-japan-stalker-mc-1121_06b4c20bbf96a51dc8663f334404a899.fit-760w.JPG" alt='powder' id="img3" class="images" />
  <img src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt='bird' id="img4" class="images" />
</div>

CSS

body {
  overflow: hidden;
}
#container {
  .images {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
  }
  #img4 {
    z-index: -5;
  }
  .fakeImages {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    z-index: -9;
  }
  #fake1 {
    background: lightgrey;
    transform: translate(-50%, -50%) rotate(20deg);
  }
  #fake2 {
    background: grey;
    transform: translate(-50%, -50%) rotate(-10deg);
  }
  #fake3 {
    background: darkgrey;
    transform: translate(-50%, -50%) rotate(-15deg);
  }
}

JS

let images = gsap.utils.toArray(".images");
let fakes = gsap.utils.toArray(".fakeImages");
let tl = gsap.timeline({ repeat: -1, repeatDelay: 1 });
tl.set(images, {
  zIndex: (i) => i * -1,
  rotation: (i) => Math.random() * 30 - 15
});
tl.to(images, { duration: 1, delay: (i) => i * 1 + 1, x: 1000 });

CSS 过渡 Javascript

CSS Transitions with Javascript

javascript

css-transitions

anime.js