Несколько классов для просмотра путевых точек

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?

0

jquery jquery-waypoints inview

Источник

user6485567 17 июл '17 в 11:02

1 ответ

Решение

Другие вопросы по тегам jquery jquery-waypoints inview

user7677884 17 июл '17 в 11:19 2017-07-17 11:19 · Accepted Answer · 2017-07-17 11:19

Попробуйте этот код

Вы можете использовать цикл над каждым .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
  });
   });

DEMO