Question

我正在尝试学习如何使用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％），元素的顶部位置会发生变化，我需要使用top ：-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个链接）

变换后调用Skrollr refresh（）

0 个答案: