CSS 轉換與 Javascript
[英]CSS Transitions with Javascript
問題描述
https://twitter.com/P_h_l_i_x/status/1353659923834544128
從上面的鏈接，我試圖復制整個過渡和 animation 屬於本頁面的影響者部分，我對此的思考過程並沒有為我提供任何解決方案。 任何想法和可能的解決方案將不勝感激。 謝謝任何人
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>
1 個解決方案
解決方案1
0 已采納 2021-05-07 23:09:40
這是一個使用 SASS/SCSS 的基礎示例。 您需要根據自己的需要對其進行定制。 如果你想 go 那條路線，你也可以用 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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.