2017-05-23 5 views
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>

+0

divで検出されたことを明確にしてください。 –

答えて

0

は、使用してみてくださいJavaScriptライブラリ "detect.js"。これは、ビューポートによるデバイスのタイプを検出できます。これを使うことで、アニメーションを扱うことができます。 ライブラリを下のリンクから取得します https://github.com/darcyclarke/Detect.js/tree/master

関連する問題