2

snap.js ( https://github.com/jakiestfu/Snap.js/ ) のコンテンツ ラッパーに固定 div を追加しようとしています。snap.js がすべての固定要素を含むキャンバス全体をプッシュするため、私が試したことはすべて失敗しました。これにはハックがありますか？

ここで達成しようとしている効果をモックアップしましたここに画像の説明を入力

更新: この問題をさらに調査した結果、この修正された div には反対の transform:translate3d を起動するイベント リスナーが必要であるという結論に達しました。このスクリプトは、transform:translate3d を左の引き出しと同じ幅に設定することで機能します。スニペットは次のとおりです。

x: function(n) {
                if( (settings.disable=='left' && n>0) ||
                    (settings.disable=='right' && n<0)
                ){ return; }

                n = parseInt(n, 10);
                if(isNaN(n)){
                    n = 0;
                }

                if( utils.canTransform() ){
                    var theTranslate = 'translate3d(' + n + 'px, 0,0)';
                    settings.element.style[cache.vendor+'Transform'] = theTranslate;
                } else {
                    settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';

                    settings.element.style.left = n+'px';
                    settings.element.style.right = '';
                }

固定divのtransform3dをコンテンツコンテナと反対の量に設定するイベントリスナーを作成する方法を知っている人はいますか?

4

2 に答える 2

0

ついに私はあなたを助ける時間を見つけました。はい、画像を保持するコンテナのトランジションを反転する必要があります。

ジェイコブのスクリプトを少し強化する必要があります。

最初に、「スナップ コンテンツ」コンテナー内のイメージを使用してコンテナーを定義します。

<div id="invertTransDiv">
    <div class="infotext">This DIV (with the red border and it's background image) translates inverted</div>
</div>

次に、いくつかのスタイルを追加する必要があります。

#invertTransDiv{
    background: none repeat scroll 0 0 #5E87B0;
    background-image: url("http://jakiestfu.github.io/Snap.js/demo/assets/drag.png");
    background-repeat: no-repeat;
    border: solid red 2px;
    height: 150px;
    left: 50px;
    position: fixed;
    top: 400px;
    width: 200px;
    z-index: 3;
}

.infotext{
    width: 200px;
    margin-top: 50px;
}

次に、Jacob のスクリプトを強化します。

ここではあまり詳しく説明せずに、彼の Fiddle Fiddle を参照してください。ここでのキーポイントは、初期化時に反転した Div を追加することです。

var snapper = new Snap({
element: document.getElementById('content'),
invertedDiv: document.getElementById('invertTransDiv')

});

そして、「単純に;-)」（-1）の負の係数でトランジションを反転する必要がありますが、フィドルでわかります。のようなコメントで JS セクションを見てください (約 5 つまたは 6 つがあります)/*-------------TESTINVERT*/

于 2013-10-12T16:45:29.373 に答える