0
私は、ビューポートに入るときに要素にクラスを追加しようとしていますが、最初のものでのみ機能します。私はjQueryを使って各機能を試してみたが、それはそれを修正すると、それはすべてのswiperクラスで動作させるために方法はありすぎウェイポイントの複数のクラスinview
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>を失敗しましたか？