フルページのjsを使用している間、表示されるとすぐにdivにアニメーションを追加する方法（左のスライド、フェードインなど）

Question

フルページjs（リンク： 'http://alvarotrigo.com/fullPage/'）を使用してウェブページを作成しています スクロール中にアニメーション効果を表示するには、いくつかのdivが必要です。しかし、これは

.class { 
    opacity: 0; 
} 
.class.in-view { 
    opacity: 1; 
} 

：

はJQuery：

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 
    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 
$(window).scroll(function(){ 
    if (isScrolledIntoView('.class') === true) { 
     $('.class').addClass('in-view') 
    } 
}); 

CSS私はfullpage.jsを使用していないとき、通常のウェブサイトの場合は、次のコードを使用して容易に達成可能ですfullpage.jsを使用している間働いていない、誰か他の方法を提案することができます。 特定のセクション/スライドに到達すると、divが入り込むようにします。 ありがとうございます！

Answer 1

あなたはthe examples folder of fullPage.js内の例があります。 ファイル名は "callbacks.html"です。確認してください。

fullPage.js callbacksを使用して起動することができます。また、CSSで起動する場合はthe state classes added to the body elementにすることもできます。

さらにチェックthis example regarding the fullPage.js callbacks

Answer 2

あなたはこのようにそれを行うことができます。

isOnScreen = function(ele){ 
var win = $(window); 

var viewport = { 
    top : win.scrollTop(), 
    left : win.scrollLeft() 
}; 
viewport.right = viewport.left + win.width(); 
viewport.bottom = viewport.top + win.height(); 

var element = $("ele"); 
var bounds = element.offset(); 

bounds.right = bounds.left + element.outerWidth(); 
bounds.bottom = bounds.top + element.outerHeight(); 

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 

}

you can find jsfiddle link here :