是否在Bootstrap 5旋转木马中分别为字幕和幻灯片制作动画?

2022-03-22 00:00:00 http javascript css carousel bootstrap-5

新手程序员,将此作为(自行添加的)练习来执行。

我有一个Bootstrap 5旋转木马,其中有三张幻灯片,每张幻灯片都有两行标题。每次幻灯片离开窗口时,顶部标题上移,底部标题下移。然后,在下一张幻灯片中,新标题将以相反的方向移动到位。

我已经差不多了,但是我遇到了最后一个问题:由于标题div在幻灯片div中,标题继承了滑动动画,使它们在幻灯片更改时沿对角线移动。此外,幻灯片不能粘在一起。当它们改变时,它们之间会有一点空白。干扰显然是双向的。

我已尝试将标题div从幻灯片div中取出并放在其后面,但是活动幻灯片之后出现的所有标题都会重叠。

有没有好的方法来分隔这两个div,使它们不会相互干扰?

以下是您可以看到问题的代码:https://codepen.io/AlexanderSplat/pen/YzZvEaM

这里是同一张幻灯片,但是标题div从幻灯片divs中去掉了,所以您可以看到它应该是什么样子(除了重叠的文本):https://codepen.io/AlexanderSplat/pen/vYxROqo

代码片段也是如此(我现在不能使用,但我想这只是因为几分钟前的快速中断):

错误的转换:

const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");

var TACarousel = document.querySelector("#CarouselTextAnim");

TACarousel.addEventListener("slide.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.add(slideclass));
  bottomcap.forEach(cap => cap.classList.add(slideclass));
});

TACarousel.addEventListener("slid.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.remove(slideclass));
  bottomcap.forEach(cap => cap.classList.remove(slideclass));
});
.carousel-inner .carousel-item {
  transition: transform 2s ease;
}

.h1-carousel {
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-size: 4vw;
  transition: 0.4s;
}

.carousel-caption {
  position: absolute;
  top: 40%;
  opacity: 1;
  transition: 1s;
}

.carousel-caption.slide {
  top: 0;
  opacity: 1;
}

.caption-bottom {
  position: relative;
  bottom: 4vh;
  opacity: 1;
  transition: 1s;
}

.caption-bottom.slide {
  bottom: -90vh;
  opacity: 1;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Top Motion Productions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <div class="container-fluid" style="padding: 0" id="carousel">
    <section class="slideshow">
      <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
            </div>
          </div>

          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
            <div class="carousel-caption">
              <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
              <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
        <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>

好的过渡,但字母重叠:

const topcap = document.querySelectorAll(".carousel-caption");
const bottomcap = document.querySelectorAll(".caption-bottom");
const slideclass = ("slide");

var TACarousel = document.querySelector("#CarouselTextAnim");

TACarousel.addEventListener("slide.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.add(slideclass));
  bottomcap.forEach(cap => cap.classList.add(slideclass));
});

TACarousel.addEventListener("slid.bs.carousel", function() {
  topcap.forEach(cap => cap.classList.remove(slideclass));
  bottomcap.forEach(cap => cap.classList.remove(slideclass));
});
.carousel-inner .carousel-item {
  transition: transform 1s ease;
}

.h1-carousel {
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  font-size: 4vw;
  transition: 0.4s;
}

.carousel-caption {
  position: absolute;
  top: 40%;
  opacity: 1;
  transition: 0.4s;
}

.carousel-caption.slide {
  top: 0;
  opacity: 0;
  transition: 0.4s;
}

.caption-bottom {
  position: relative;
  bottom: 4vh;
  opacity: 1;
  transition: 0.4s;
}

.caption-bottom.slide {
  bottom: -90vh;
  opacity: 0;
  transition: 0.4s;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Top Motion Productions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/v4-shims.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <div class="container-fluid" style="padding: 0" id="carousel">
    <section class="slideshow">
      <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
        <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
</body>


解决方案

我对您的(第二个)代码做了很多更改。

HTML

  • 所有不必要的导入(Animated.css、jQuery、font-awed)均已删除。
  • 在具有与第一张幻灯片不对应的类caption-topcaption-bottomh1中,添加了类hidden

CSS

  • .carousel-caption已替换为.carousel-top,但添加了另一个.carousel-caption以设置默认top属性。
  • .slide替换为.hidden,以便更好地理解。
  • 以前的值已作为注释放入。

JS

这就是有趣的地方!更改和说明:

  • slideclass替换为hiddenClass
  • 所有选中的.caption-top已设置为topcap,所有.carousel-caption设置为captions
  • currentItemnextItem变量具有存储每张幻灯片的当前和下一个.carousel-caption元素的功能。
  • 在DOMContentLoaded上,与第一张幻灯片对应的第一个.carousel-caption元素(零位置)已设置为currentItem
  • slide.bs.carouselslid.bs.carousel两种事件类型中都使用了relatedTarget属性。 Bootstrap's documentation表示:

relatedTarget:作为活动项滑入位置的DOM元素。

nextElementSibling这里是指紧跟其后的元素。查看html,我们知道在.caption-item之后有一个.carousel-caption。我认为firstElementChildlastElementChild不需要解释:)

  • slid.bs.carousel处显示nextItem,在slide.bs.carousel处隐藏currentItem(在切换到下一张幻灯片时)。
const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const captions = document.querySelectorAll(".carousel-caption");
const hiddenClass = "hidden";

var TACarousel = document.querySelector("#CarouselTextAnim");

let currentItem, nextItem;

document.addEventListener("DOMContentLoaded", function(e) {
  currentItem = captions[0];
});

TACarousel.addEventListener("slid.bs.carousel", function(e) {
  currentItem = e.relatedTarget.nextElementSibling;

  nextItem.firstElementChild.classList.remove(hiddenClass);
  nextItem.lastElementChild.classList.remove(hiddenClass);
});

TACarousel.addEventListener("slide.bs.carousel", function(e) {
  nextItem = e.relatedTarget.nextElementSibling;

  currentItem.firstElementChild.classList.add(hiddenClass);
  currentItem.lastElementChild.classList.add(hiddenClass);
});
.carousel-inner .carousel-item {
  transition: transform 1s ease;
}

.h1-carousel {
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.7);
  font-family: "Julius Sans One";
  font-style: normal;
  font-weight: 400;
  font-size: 4vw;
  /*transition: 0.4s;*/
}

.carousel-caption {
  top: 40%;
}

.caption-top {
  position: relative; /*absolute*/
  top: 0; /*<= added*/
  opacity: 1;
  transition: .4s;
}

.caption-top.hidden {
  top: -90vh; /*0*/
  opacity: 0;
  transition: .4s;
}

.caption-bottom {
  position: relative;
  bottom: 4vh;
  opacity: 1;
  transition: .4s;
}

.caption-bottom.hidden {
  bottom: -90vh;
  opacity: 0;
  transition: .4s;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Top Motion Productions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="container-fluid" style="padding: 0" id="carousel">
    <section class="slideshow">
      <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top hidden">UP TOP</h1>
            <h1 class="h1-carousel mb-5 caption-bottom hidden">DOWN LOW</h1>
          </div>
          <div class="carousel-item">
            <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
          </div>
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top hidden">OVER</h1>
            <h1 class="h1-carousel mb-5 caption-bottom hidden">UNDER</h1>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
          <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
          <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>

相关文章