3

我正在尝试制作一个根据滚动启动不同动画的页面。

原理很简单，当我在一个带有关于动画类型的数据属性的块中时。我运行这个动画。

为此，我的脚本基于事件 $(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>
4

0 回答 0