0
皆さんが私を助けてくれるのではないかと思っています。ビューポートでdivを検出したときのアニメーション効果
アニメーションエフェクト(slideInLeft)を使用するWebページを作成していますが、ビューポートでdivが検出可能になると有効になります。
私はプラグインを試しましたが、成功していませんでしたが、複数のプラグインより簡単な解決策があるはずです。
私は以下codepen作成しました:
https://codepen.io/jmac1988/pen/aWPRxo
$(window).scroll(function() {
$('#topsub').each(function() {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight >
topOfWindow) {
$(this).addClass(".slideRight");
} else {
$(this).removeClass(".slideRight");
}
});
});
.top {
width: 100%;
display: block;
float: left;
height: 900px;
background-color: rgb(211, 243, 243);
padding-top: 40px;
padding-bottom: 20px;
padding-left: 10%;
padding-right: 150px;
}
#topsub {
position: absolute;
color: black;
background-color: rgb(255, 243, 182);
font-family: 'Sofia Pro';
font-weight: normal;
font-style: normal;
font-size: 1em;
}
#toptitle {
position: absolute;
color: black;
background-color: rgb(255, 243, 182);
font-family: 'Sofia Pro Semi';
font-weight: 600;
font-style: normal;
font-size: 4em;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
animation-duration: 3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pt-page pt-page-1">
<div class="top">
<p id="top1"><span id="topsub" class="animated slideInLeft">THE
PRACTICE OF EVERYDAY LIFE</span><br>
<span id="toptitle" class="animated slideInLeft">Michel de Certeau</span>
</p>
</div>
divで検出されたことを明確にしてください。 –