waypoints 多个 class 视图

Question

我试图在元素进入视口时将 class 添加到元素，但它仅适用于第一个元素。我尝试使用 jquery 每个函数，但它也失败了

var myblock = new Waypoint.Inview({
    element: $(".swiper")[0],
    entered: function(direction) {
     $(".swiper").addClass('revealed');
    },
    exited: function(direction) {
      $(".swiper").removeClass('revealed');
    },
    offset: 100 // ADDED, NOTHING CHANGED
  });

body {
  background: maroon;
}

@keyframes kf-font-reveal {
  0% {
    color: transparent;
  }
  50% {
    color: transparent;
  }
  51% {
    color: orange;
  }
  100% {
    color: orange;
  }
}
p {
  width: 60%;
  margin: 40px auto;
  font-size: 24px;
  line-height: 40px;
  color: white;
}

.swiper {
  margin: 0 auto 50px;
  width: 40%;
  text-align: center;
  padding: 10px 20px;
  font-size: 10vw;
  line-height: 1;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-family: "Impact";
  cursor: pointer;
}

.swiper__content {
  color: transparent;
  display: block;
}

.swiper__bar, .swiper__bar--right {
  width: 100%;
  height: 100%;
  background: orange;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: 1s ease-in-out;
}

.swiper__bar--right {
  transform: translateX(100%);
}

.swiper.revealed .swiper__content {
  animation-name: kf-font-reveal;
  animation-duration: 1s;
  color: orange;
}

.swiper.revealed .swiper__bar {
  transform: translate(100%, 0%) translate3d(0px, 0px, 0px);
}

.swiper.revealed .swiper__bar--right {
  transform: translate(-100%, 0%) translate3d(0px, 0px, 0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.js"></script>
<body>
  <p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. </p>

<h1 class="swiper">
  <span class="swiper__content">Swiper</span>
  <span class="swiper__bar--right"></span>
</h1>

<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar--right"></span>
</h1>

<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar--right"></span>
</h1>

<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>


<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar"></span>
</h1>


<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar--right"></span>
</h1>


<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar"></span>
</h1>


<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar--right"></span>
</h1>


<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar"></span>
</h1>


<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">Michael</span>
  <span class="swiper__bar--right"></span>
</h1>


<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>

<h1 class="swiper">
  <span class="swiper__content">MICHAEL</span>
  <span class="swiper__bar"></span>
</h1>

<p>In sit amet mauris vel elit pretium luctus a a mauris. Etiam varius aliquet dolor in fermentum. Mauris ornare arcu et risus sodales, ac consequat massa efficitur. Etiam dapibus tellus et dui tempor viverra. Suspendisse finibus viverra ornare. Cras ex tellus, vestibulum ac accumsan eget, tempus eu massa. Suspendisse elementum elit libero, ac condimentum mi condimentum in. Donec id mollis diam. Mauris id nisi lacus. Nulla porta, lacus ut vestibulum pulvinar, lectus metus tincidunt diam, luctus congue tortor velit vitae orci. Sed in luctus lorem. Donec dignissim turpis eget pharetra feugiat. Nulla fringilla turpis eu scelerisque feugiat. Mauris rhoncus leo eu tempor feugiat. Aliquam a metus tellus.</p>






</body>

有没有办法解决这个问题并使其适用于所有 classes 刷卡器？

Answer 1

试试这个代码

您可以在每个 .swiper class

上使用循环

$('.swiper').each(function() {
var myblock = new Waypoint.Inview({
    element: this,
    entered: function(direction) {
     $(this.element).addClass('revealed');
    },
    exited: function(direction) {
    $(this.element).removeClass('revealed');
    },
    offset: 100 // ADDED, NOTHING CHANGED
  });
   });

DEMO

waypoints 多个 class 视图

multiple class for waypoints inview

jquery

jquery-waypoints

inview