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

Animate captions and slides separately in Bootstrap 5 carousel?(是否在Bootstrap 5旋转木马中分别为字幕和幻灯片制作动画?)
本文介绍了是否在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.cssjQueryfont-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>

这篇关于是否在Bootstrap 5旋转木马中分别为字幕和幻灯片制作动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)