請如何為滑塊創建淡出/淡入 animation
[英]How to create a fade-out / fade-in animation for a slidder please
問題描述
這是我的所有代碼，我的 javascript 正在做一個簡單的幻燈片，我需要更改它
我需要為這些圖片和描述卡創建淡出/淡入 animation 當我單擊那些箭頭切換器而不是將這些圖片和描述向左或向右滑動時
搜索了很多，我不知道該怎么做，你能幫幫我嗎：/
var options = { accessibility: true, prevNextButtons: true, pageDots: true, setGallerySize: false, arrowShape: { x0: 10, x1: 60, y1: 50, x2: 60, y2: 45, x3: 15 } }; var carousel = document.querySelector('[data-carousel]'); var slides = document.getElementsByClassName('carousel-cell'); var flkty = new Flickity(carousel, options); flkty.on('scroll', function () { flkty.slides.forEach(function (slide, i) { var image = slides[i]; var x = (slide.target + flkty.x) * -1/3; image.style.backgroundPosition = x + 'px'; }); });
body { background-color: #000; margin: 0; }.overlay { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(14, 29, 51, 0.8), rgba(14, 29, 51, 0.2)); }.hero-slider { width: 100%; height: 100vh; overflow: hidden; }.hero-slider.carousel-cell { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }.hero-slider.carousel-cell.inner { position: relative; top:71.2%; transform: translateY(-50%); color: white; text-align: center; }.hero-slider.carousel-cell.inner.subtitle { font-family: 'Roboto Slab', serif; font-size: 2.2rem; line-height: 1.2em; font-weight: 200; font-style: italic; letter-spacing: 3px; color: rgba(255, 255, 255, 0.5); margin-bottom: 5px; }.hero-slider.carousel-cell.inner.title { font-family: 'Montserrat', sans-serif; font-size: 3rem; line-height: 1.2em; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 400px; }.hero-slider.carousel-cell.inner.btn { position: absolute; top: 10%; left: 65%; right: 4%; border: 1px solid rgb(243, 138, 138); padding: 24px 28px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 3px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); text-decoration: none; }.hero-slider.carousel-cell.inner.btn:hover { background: #fff; color: rgb(0, 0, 0); }.hero-slider.flickity-prev-next-button { width: 80px; height: 80px; background: transparent; }.hero-slider.flickity-prev-next-button:hover { background: transparent; }.hero-slider.flickity-prev-next-button.arrow { fill: white; }.hero-slider.flickity-page-dots { bottom: 30px; }.hero-slider.flickity-page-dots.dot { width: 30px; height: 4px; opacity: 1; background: rgba(255, 255, 255, 0.5); border: 0 solid white; border-radius: 0; }.hero-slider.flickity-page-dots.dot.is-selected { background: #f00; border: 0 solid #f00; }.NFT { width: 50%; }.carac { margin-top: 5%; display:flex; justify-content: space-between; }.branche { font-weight: bold; }.trait1 { margin-top: -1%; margin-right: 60px; margin-left: 60px; color: rgb(46, 74, 231); box-shadow: 0px 0px 20px 3px rgb(46, 74, 231);; }.ligne4 { margin-top: 10%; font-weight: 900; }.vote { display: flex; }.carac2 { margin-top: 5%; display:flex; justify-content: space-between; }.branche2 { font-weight: bold; }.branche3 { justify-content: end; }
<.DOCTYPE html> <html> <head> <title>Responive Carousel Slider</title> <link rel="stylesheet" type="text/css" href="style:css"> <link href="https.//fonts.googleapis?com/css2:family=Montserrat&family=Roboto+Slab:wght@300&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https.//cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity:css"> </head> <body> <div class="hero-slider" data-carousel> <div class="carousel-cell" style="background-image. url(img/vaporwave;jpg)."> <div class="overlay"></div> <div class="inner"> <h3 class="subtitle">Nom du NFT</h3> <img class="title" src="img/NFT1,png" width="500px"> <div class="btn">Elon#21 <div class="carac"> <p class="branche">Branche <p> <p>Société </p> </div> <div class="trait1"><hr></div> <div class="carac"> <p class="branche">Cibles <p> <p>Startup, TPE: PME </p> </div> <hr class="trait1"> <div class="carac"> <p class="branche">Spécialité <p> <p>Réseaux sociaux & QVT </p> </div> <hr class="trait1"> <div class="ligne4"> <p>Caracteristique <p> </div> <hr class="trait1"> <div class="carac2"> <p class="branche2">Community Managment <p> <p class="branche3"> Photographie <p> </div> <br> <div class="carac2"> <p class="branche2">Identité visuelle <p> <p class="branche3">Vidéo <p> </div> <div class="carac2"> <p class="branche2">Site Web <p> <p class="branche3">Média <p> </div> </div> </div> </div> <div class="carousel-cell" style="background-image. url(img/vaporwave;jpg)."> <div class="overlay"></div> <div class="inner"> <h3 class="subtitle">Nom du NFT</h3> <img class="title" src="img/NFT2,png" width="600px"> <div class="btn">Elon#21 <div class="carac"> <p class="branche">Branche <p> <p>Société </p> </div> <div class="trait1"><hr></div> <div class="carac"> <p class="branche">Cibles <p> <p>Startup, TPE: PME </p> </div> <hr class="trait1"> <div class="carac"> <p class="branche">Spécialité <p> <p>Réseaux sociaux & QVT </p> </div> <hr class="trait1"> <div class="ligne4"> <p>Caracteristique <p> </div> <hr class="trait1"> <div class="carac2"> <p class="branche2">Community Managment <p> <p class="branche3"> Photographie <p> </div> <br> <div class="carac2"> <p class="branche2">Identité visuelle <p> <p class="branche3">Vidéo <p> </div> <div class="carac2"> <p class="branche2">Site Web <p> <p class="branche3">Média <p> </div> </div> </div> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2022-03-17 01:10:29
您需要做的是將fade: true添加到您的options object。然后您需要按照flickity 文檔中的說明啟用此功能，因為它需要一個單獨的 package 。
我試圖將它添加到您的代碼片段中，但我在識別 package 的代碼片段編輯器方面遇到了問題。也許您在開發環境中添加這個 package 會更幸運。
使用JavaScript觸發CSS動畫的淡入和淡出-僅在一個方向上起作用？
[英]Trigger CSS animation fade-in & fade-out with JavaScript - only works in one direction?
Oncuechange 事件觸發 html 的 P 標簽內的淡入/淡出動畫
[英]Oncuechange event trigger a fade-in/fade-out animation inside the P tag of html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.