https://twitter.com/P_h_l_i_x/status/1353659923834544128
从上面的链接中，我试图复制本页"影响者"部分的整个过渡和动画，我的思考过程并没有为我提供任何解决方案。任何想法，可能还有解决方案，都将不胜感激。感谢
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>下面是一个使用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 });