时间戳

首页 > 解决方案 > Bootstrap Carousel 中的字幕以对角线方式而不是垂直方式进行动画处理

javascript - Bootstrap Carousel 中的字幕以对角线方式而不是垂直方式进行动画处理

问题描述

我有一个带有三张幻灯片的 Bootstrap 5 轮播，每张幻灯片都有两行标题。每次幻灯片更改时，标题都应该在框架外垂直上下移动。但由于它们连接到水平移动的幻灯片，因此它们最终会沿对角线移出框架。

有没有办法来解决这个问题？

我试图通过在相反方向水平移动字幕来进行补偿，但这只会导致它们在下一张幻灯片上对角线进入框架。

const topcap = document.querySelectorAll(".caption-top");
const bottomcap = document.querySelectorAll(".caption-bottom");
const SlideClass = ("slide");
var TCarousel = document.querySelector('#TestCarousel');

TCarousel.addEventListener('slide.bs.carousel', function() {
  topcap.forEach(cap => cap.classList.add(SlideClass));
  bottomcap.forEach(cap => cap.classList.add(SlideClass));
});

TCarousel.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;
}

.carousel-caption {
  position: absolute;
  left 0;
  top: 33%;
  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: 4.5vw;
  transition: 1s ease;
}

.caption-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 1;
  transition: 1s ease;
}

.caption-top.slide {
  font-size: 2vw;
  top: -70%;
  opacity: 1;
}

.caption-bottom {
  position: relative;
  top: 15%;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 1;
  transition: 1s ease;
}

.caption-bottom.slide {
  font-size: 2vw;
  top: 140%;
  opacity: 1;
}

@media (min-width: 993px) and (max-width: 1200px) {
  .carousel-inner .carousel-item {
    margin-top: 70px;
  }
}

@media (max-width: 992px) {
  .carousel-inner .carousel-item {
    margin-top: 52px;
  }
}

@media (max-width: 776px) {
  .carousel-caption {
    font-size: 5vw;
  }
  .caption-top-slide,
  .caption-bottom-slide {
    font-size: 2vw;
  }
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Carousel text anim</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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="container-fluid p-0 mb-5" id="carousel">
    <section class="slideshow">
      <div id="TestCarousel" 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">
              <span id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</span>
              <span class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</span>
            </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">
              <span class="h1-carousel edit1 mb-5 caption-top">UP TOP</span>
              <span class="h1-carousel mb-5 caption-bottom">DOWN LOW</span>
            </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">
              <span class="h1-carousel edit1 mb-5 caption-top">OVER &#38;</span>
              <span class="h1-carousel mb-5 caption-bottom">UNDER</span>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#TestCarousel" data-bs-slide="prev">
                <span class="carousel-control carousel-control-prev-icon" style="display: none" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
        <button class="carousel-control-next" type="button" data-bs-target="#TestCarousel" data-bs-slide="next">
                <span class="carousel-control carousel-control-next-icon" style="display: none" 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>

标签： javascripthtmlcssbootstrap-5bootstrap-carousel

解决方案

推荐阅读