0

我正在尝试了解您如何使用 Skrollr 进行小的过渡和移动。

我想转换一个元素，然后将其移动到页面顶部。

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，效果很好（顶部不变），但如果我使用默认值（transform-origin: 50% 50%），元素的顶部位置会发生变化，我需要使用顶部：-XX % 将元素放置在 0% 位置。

我认为解决方案是调用：

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

在我的代码中，正如我在代码（或 s.refresh()）中评论的那样，但它不起作用，我的元素只在顶部附近移动一些像素。

我需要在其他地方或以不同的方式调用 refresh() 吗？

谢谢！

编辑：

示例 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