scroll - $ (window).scroll()で関数を1回実行する方法は?

Question

スクロールに応じて異なるアニメーションを起動するページを作成しようとしています。

アニメーションの種類に関するデータ属性を持つブロックにいる場合、原理は簡単です。このアニメーションを実行します。

これを行うために、私のスクリプトはイベント $(window).scroll() に基づいています。$(window).scrollTop() がブロックの位置と同じになったら、アニメーションを実行します。このブロックを離れると、アニメーションが停止します。アニメーションが完了したら、一度リセット機能を開始したいと思います。現在、私はデータ属性を持つブロックにいないため、彼女はループに乗り出しました。

デモ

私は本当に立ち往生しています。前もって感謝します。マヌー

私のjsファイル：

$(document).ready(init);

// Ma class Screen
function Screen(name){
    this._name = $("#"+name);
    this._hauteur;
    this._position;
    this._screenEnd;
    this._screenEnd;

    this.screenHeight = function() { 
        this._hauteur = this._name.data('height');
        return this._hauteur;
    } 

    this.topPosition = function() { 
        this._position = this._name.position().top;
        return this._position;
    } 

    this.screenEnd = function() { 
        this._screenEnd = (this._name.position().top)+(this._name.data('height'));
        return this._screenEnd;
    }
}

var mesScreens = new Array();

 $(".screen").each(function(i){
    mesScreens[i] = new Screen($(this).attr('id'));
    mesScreens[i]._name.css("height", mesScreens[i].screenHeight());
    //console.log(mesScreens[i]);
 });


var fini = false;

function init(){
    console.log($(".screen").length);

    var scrollTimer = null;
    $(window).scroll(function () {
       var monScrollTop = $(window).scrollTop();

        for (var i=0; i<mesScreens.length ; i++) {
            if(monScrollTop>(mesScreens[i].topPosition()+5) && monScrollTop<=(mesScreens[i].screenEnd()+5)){
                //started = true;
                if(mesScreens[i]._name.data("func") == "panorama"){
                    horizontalPanel(mesScreens[i]._name, mesScreens[i]._hauteur, mesScreens[i]._position);

                }else if(mesScreens[i]._name.data("func") == "anim"){
                    anim(mesScreens[i]._name, mesScreens[i]._hauteur, mesScreens[i]._position, 4);

                }
                //console.log(mesScreens[3]._hauteur);
            }else {
                        //console.log("je sors");
                        reset(mesScreens[i]._name, mesScreens[i]._hauteur);
                    }

        };
    });

}


/*
 * Function horizontalPanel
 * @screen : le screen concerné
 * @hauteur : hauteur du div
 */
function horizontalPanel(myScreen, hauteur, position){

    //console.log("Fonction horizontalPanel debut || fini = "+fini);

    var $img = myScreen.children("img");
    var deltaScroll = ($(window).scrollTop() - position);
    var scrollPercentage = ((deltaScroll / (hauteur)) * 100) ;
    //console.log(scrollPercentage);

    $img.css('position', "fixed");
    $img.css("bottom", "");
    $img.css('top', "0px");
    $img.css('left', "0px");
    $img.css("left", -scrollPercentage+"%");


}

function anim(myScreen, hauteur, position, nbImg){
    //console.log("ok");

    var $img = myScreen.children("div.image");
    var deltaScroll = ($(window).scrollTop() - position);
    var scrollPercentage = ((deltaScroll / (hauteur)) * 100) ;

    var percentNb = ((nbImg/hauteur) * 100).toFixed(2);

    for(var i=0; i<nbImg; i++){
        //console.log("if(bla)");   
    }

    //console.log("__");

    if(scrollPercentage)
    //console.log(hauteur);

    $img.css('position', "fixed");
    $img.css("top", "0px");
    $img.css("bottom", "");
    $img.css('background-position', "0 "+ scrollPercentage + '%');
    $img.css('left', "0px");
}

function reset(myScreen){

    //console.log("Fonction Reset || fini = "+fini);
    myScreen.children().css('position', "relative");
    myScreen.children().css("bottom", "0px");
    myScreen.children().css("top", "");
    myScreen.children().css("left", "");
}

html からの抜粋:

<div id="screen3" data-height='2300' data-func='panorama' class="screen">
    <img src="img/screen3.jpg" alt="screen-3">
</div>

<div id="screen4">
    <img src="img/screen4-2.jpg" alt="screen-4">
</div>