0

JavaScriptを使用してページよりも少し速くスクロールしたい34枚の写真があり、現在scrollingParallaxプラグインを使用しています。ただし、iPad に切り替えて表示すると、大ざっぱになります。母はそこでしか見ないので、サイトをレスポンシブにしたかったのです！このぎこちなさは、私の非効率的なコーディング、古いプラグイン、または私がただのガキのせいなのだろうかと思いました!

私は本質的にプラグインに 34 回ループしていますが、これは効率的ではないと確信していますが、時間と理解が限られているため、すべての知識スタックオーバーフローのフォントにそれを投げ出すと思いました!

私が使用しているループは次のとおりです。

/* Photo sprite alignment and scroll   */
for(var i=0; i<34; i++){
var j = '#photo' + (i+1);
$(j).scrollingParallax({staticSpeed : 2.2,staticScrollLimit : false, loopIt : false});
};

いくつかの写真の CSS:

.photos{position: fixed; z-index:-1;}

#photo1{top:900px; left:10px;}
#photo2{top:1100px; right:10px;}
#photo3{top:1300px; left:10px;}
#photo4{top:1500px; right:10px;}
#photo5{top:1700px; left:10px;}
#photo6{top:1900px; right:10px;}
#photo7{top:2100px; left:10px;}
#photo8{top:2300px; right:10px;}

一部の写真の html:

<div class="photos">
<img src="img/1.png" id="photo1">
<img src="img/2.png" id="photo2">
<img src="img/3.png" id="photo3">

助けてくれてありがとう！

4

1 に答える 1

0

Shmiddty は関数を呼び出すためのより良い方法を助けましたが、最終的に iOS は jquery scrollingParrallax を十分に速く実行しなかったため、iOS でクラスを非表示にすることになりました。

// 最適化: イベント ハンドラの外に参照を保存します: var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 1250) {
        //if the window is greater than 1250px wide then turn on parallax scrolling..
                    $('.fixedPhotos').addClass('hidden');
                    $('.photos img').removeClass('hidden');
            }else{
                    $('.fixedPhotos').removeClass('hidden');
                    $('.photos img').addClass('hidden');
            }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
于 2013-01-12T19:37:19.347 に答える