swiper carousel + 动画 + 蒙版图片

编程问答 2022-04-22

问题描述

我正在构建一个顶部有框架的 Swiper 轮播（由鼠标滚动触发）。这是设计

enter image description here

红色是应该覆盖轮播的框架。中间孔是透明的

enter image description here

我尝试将红色图像作为蒙版图像，以便我可以通过鼠标滚动来控制 swiper carousel，但中心孔变成白色，红色是透明的！而我想要的恰恰相反，我想要孔移植，孔外是红色。

有什么办法可以在swiper carousel的顶部添加图片框，并且仍然可以触发和控制位于frame下的carousel？

代码：

codePen

// https://swiperjs.com/ 
// ===================== -->

var mySwiper = new Swiper('.swiper-container',{
  // Optional parameters
  direction: 'horizontal',loop: true,speed: 1200,grabCursor: true,mousewheel: true,// If we need pagination
  pagination: {
    el: '.swiper-pagination',type: 'bullets',clickable: true,},// Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',on: {
    slideChangeTransitionStart: function() {
      // Slide captions
      var swiper = this;
      setTimeout(function() {
        var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
        var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
      },500);
      gsap.to($(".current-title"),0.4,{
        autoAlpha: 0,y: -40,ease: Power1.easeIn
      });
      gsap.to($(".current-subtitle"),delay: 0.15,ease: Power1.easeIn
      });
    },slideChangetransitionend: function() {
      // Slide captions
      var swiper = this;
      var currentTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
      var currentSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
      $(".slide-captions").html(function() {
        return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
      });
      gsap.from($(".current-title"),y: 40,ease: Power1.eaSEOut
      });
      gsap.from($(".current-subtitle"),ease: Power1.eaSEOut
      });
    }
  }
});

// Slide captions
var currentTitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-title");
var currentSubtitle = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-subtitle");
$(".slide-captions").html(function() {
  return "<h2 class='current-title'>" + currentTitle + "</h2>" + "<h3 class='current-subtitle'>" + currentSubtitle + "</h3>";
});
body {
  margin: 0;
}


/* Swiper */

.swiper-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  mask-image: url(https://i.ibb.co/kmBv430/Frame.png);
  mask-size: contain;
}


/* .above{
  position:absolute;
  left:25%;
  background-color: #fff;
   width: 200%;
   height: 100vh;
  z-index:2;
   mask-image: radial-gradient(circle  at center,transparent 49%,white 50%); 
  mask-size: contain;
  mask-repeat: no-repeat;
} */


/* Swiper slides */

.swiper-slide {
  position: relative;
  z-index: 1;
}

.slide-1 {
  background-color: #e67204;
}

.slide-2 {
  background-color: #e67204;
}

.slide-3 {
  background-color: #e67204;
}

.rounded-circle {
  width: 400px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  top: 30%;
  left: 35%
}

.htu {
  position: absolute;
  color: #fff;
  font-size: 50px;
  top: 39%;
  left: 10%;
  z-index: 2;
}


/* Slide captions */

.slide-captions {
  position: absolute;
  top: 50%;
  left: 75%;
  color: #FFF;
  z-index: 999;
  transform: translateY(-50%);
}

.slide-captions .current-title {
  position: absolute;
  left: 60%;
  margin: 0;
  font-size: 48px;
}

.slide-captions .current-subtitle {
  margin: 10px 0 0 0;
  font-size: 28px;
}


/* Swiper arrows */

.swiper-pagination-bullet-active {
  background-color: #fff;
}


/* Swiper pagination */

.swiper-container-horizontal>.swiper-pagination-bullets {
  bottom: 50px;
}

.swiper-button-prev,.swiper-button-next {
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script>
<script src="https://unpkg.com/swiper@6.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
  <h1 class="htu">HOW TO USE</h1>
  <div class="above"></div>
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->

    <div class="swiper-slide slide-1" data-title="Slide One" data-subtitle="">
      <img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
    </div>
    <div class="swiper-slide slide-2" data-title="Slide Two" data-subtitle=" ">
      <img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
    </div>

    <div class="swiper-slide slide-3" data-title="Slide Three" data-subtitle=" ">
      <img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt="">
    </div>
  </div>
</div>

<!-- Slide captions -->
<div class="slide-captions"></div>

<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</div>

解决方法

我通过使用 GSAP 滚动触发器触发每一层的移动解决了我的问题，它对我有用。

let tl2 = gsap.timeline({

滚动触发器：{ 触发器：“#sec-4”， 引脚：真实， 擦洗：正确，

  start : "center center",end: "+=" + (window.innerHeight * 8),}
  });
  tl2.from('.step-1',1,{y: 100,opacity:0 })
  tl2.to('.step-1',{opacity:0 })
  tl2.to('.flwres-frame',0.5,{x: -300},'frist')
  tl2.to('.girl-frame','frist')
  tl2.from('.step-2',opacity:0 },'frist')
  tl2.to('.step-2',{x: -600},'second')
  tl2.to('.girl-frame',{x: -670},'second')
  tl2.from('.step-3','second')
  tl2.to('.step-3',{x: -900},'3rd')
  tl2.to('.girl-frame',{x: -1050},'3rd')
  tl2.from('.step-4',2,'3rd')
carouselhtmljavascriptswiper