1

水平オフセット効果に問題があります。垂直スクロールでimgを水平方向にシフトするには、Stellar JS のみを使用したいと考えています。現在、高さ1800pxのコンテナ要素と、その高さと幅がロード時に動的に設定されるimgがあります（ビューポートに基づいて...つまり、高さはビューポートの高さで、幅はビューポートよりも比例して広いです） ）。

コンテナーの上部からコンテナーの下部まで垂直にスクロールする場合、imgを左端から右端まで左にスライドさせたいと考えています。したがって、コンテナーの上部では、imgは左に配置されて右にオーバーフローし、コンテナーの下部では、imgは右に配置されて左にオーバーフローします。

これは、Stellar JS の作成者によって作成されたものに近い例です (ただし、不要な垂直スクロールもあります) -->リンク

このテンプレート jsfiddle を見てください: http://jsfiddle.net/z6F3h/2/エフェクトを実装する必要があります。私は変更する必要があると信じています...setTopそしてsetLeftプロパティ

4

1 に答える 1

2

stellar.js プラグインの作成者は、水平方向と垂直方向に同時に移動させるための優れた基盤を提供しました。

垂直スクロールでStellar.jsを使用して要素を横から移動/アニメーション化する方法は?

レイヤーが水平方向にのみ移動し、上下にまったく移動しないようにする場合は、コードをわずかに変更して、上部が同じになるようにしました。

http://jsfiddle.net/QGd9g/995/

私が行った変更は、top を新しい Top に設定するだけでなく、originalTop - newTop を持つことでした。

$(function(){
    $.stellar.positionProperty.apple = {
        setTop: function($el, newTop, originalTop) {
            $el.css({
                'top': originalTop - newTop,
                'left': $el.hasClass('apple') ? originalTop - newTop : 0
            });
        }
    };

    $.stellar({
        verticalOffset: 200,
        horizontalScrolling: false,
        positionProperty: 'apple'
    });
});

私がしたことのトリッキーな点 (より良い解決策があるかもしれません) は、左に設定すると、レイヤーが右に移動することです。

于 2014-02-14T21:43:47.107 に答える