jqueryjquery-waypointsinview

multiple class for waypoints inview

I'm trying to add class to an element when it enters in viewport but it only work with the first one. I try with jquery each function but it fails too

codepen link

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>

Is there a way to fix that and to make it work with all the swiper classes ?

Solution

  • Try this code

    You can use loop over every .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