2017-02-24 6 views
1

ページのパート1とページ2のセクションに到達すると効果があります。私はsloutionを見つけましたが、それはただ一つのdivでアニメーションを与えるでしょう。私はjqueryを初めて使用しています。私はこのアニメーションを両方の部分で使用しようとしています。ここでアニメーションが特定のdivに到達したとき

は私のhtmlコードです:

<div></div> 
<h1 id="scroll-to1">PART 1</h1> 
<div></div> 
<h1 id="scroll-to">PART 2</h1> 

これは私が使用しjqueryのコードです:

$(window).scroll(function() { 
    var hT1 = $('#scroll-to1').offset().top, 
     hH1 = $('#scroll-to1').outerHeight(), 
     wH1 = $(window).height(), 
     wS1 = $(this).scrollTop(); 
    var hT = $('#scroll-to').offset().top, 
     hH = $('#scroll-to').outerHeight(), 
     wH = $(window).height(), 
     wS = $(this).scrollTop(); 
    if (wS1 > (hT1+hH1-wH1)){ 
    console.log('reach'); 
    $('#scroll-to1').fadeIn(3500); 
    $(window).off('scroll') 
    } 
    if (wS > (hT+hH-wH)){ 
    console.log('reach'); 
    $('#scroll-to').fadeIn(3500); 
    $(window).off('scroll') 
    } 
}); 

答えて

0

jQueryのプラグインはそのために有用です。私はプラグインについて知っ

$('.entry').waypoint(function() { 
    alert('The element has appeared on the screen.'); 
}); 

http://imakewebthings.com/waypoints/

+0

。私はプラグインを使いたくない –

関連する問題