jquery - 航点查看的多类

Question

当元素进入视口时，我正在尝试将类添加到元素中，但它仅适用于第一个元素。我尝试使用 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>

有没有办法解决这个问题并使其适用于所有 swiper 类？

score 1 · Accepted Answer

试试这个代码

.swiper您可以在每个类上使用循环

$('.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
  });
   });

演示

jquery - 航点查看的多类

1 回答 1

Related

Reference