0

Skrollr を使用して小さなトランジションと動きを作成する方法を学ぼうとしています。

1 つの要素を変換した後、それをページの上部に移動します。

HTML:

<div id="test" data-0="transform:scale(1)" data-1000="transform:scale(0.25); top:35%" data-1500="top: 0%"></div>

CSS:

#test {
    background: red;
    width: 25%;
    height: 25%;
    left: 35%;
    margin: auto;
    position: fixed;
}

JS:

window.onload = function() {
    var s = skrollr.init({
        render: function(data) {
            document.querySelector('.scrollpos').innerHTML = data.curTop;
        }
    });
    //s.refresh($('#test'));
}

transform-origin: 0 0 を使用するとうまく動作します (top は変更されません) が、デフォルト (transform-origin: 50% 50%) を使用すると要素の上部の位置が変更され、top: -XX を使用する必要があります。 % 要素を 0% の位置に配置します。

解決策は次のように呼び出すことだと思います：

s.refresh($('#test'));

コード内でコメントしたように（またはs.refresh（））、コード内でそれは機能せず、私の要素は上部の近くにいくつかのピクセルを移動するだけです。

別の場所または別の方法で refresh() を呼び出す必要がありますか?

ありがとう！

編集：

例 1 - 1 つの要素を一番上に移動する (問題なし)

data-500 = top: 35% | data-1000 = top: 0%

http://cokeperez.com/stack1.html

例 2 - 要素を拡大縮小して上に移動 (要素は上に移動しません)

data-500 = top: 35%, scale: 1 | data-1000 = top: 0%, scale: 0.25

http://cokeperez.com/stack2.html

例 3 - 要素をスケーリングし、値を調整して上部に移動します (完全ではありませんが、機能します)。

data-500 = top: 35%, scale: 1 | data-1000 = top: -5%, scale: 0.25

(stack3.html と同じリンク、2 つ以上のリンクを投稿することはできません)

4

0 に答える 0