视差滚动两个方向

我试图创建视差滚动网站与Scrollorama帮助，但我想用非一般的动画。这个动画应该从顶部到底部，然后停在页面中间并返回（从中间到顶部）。 Scrollorama作者说，这种类型的动画不支持scrollorama，也不支持他的新插件SuperScrollorama。也许有人可以建议我另一个具有此功能的插件。视差滚动两个方向

来源

2012-06-22 markilfin

你有没有试图在普通的jQuery中实现它？ jQuery的动画功能非常简单。你正在尝试做自定义动画;如果代码相对简单（乍一看你的动画听起来很简单），为什么试着将你的需求挤进第三方插件？ – RustyTheBoyRobot

@RustyTheBoyRobot我需要这个插件的其他功能（如成长，缩放和飞行）。我有大约8个部分有不同的动画。 – markilfin

因此，当您向下滚动页面时，您需要一个对象从顶部飞入，定位在页面中间，然后在用户继续滚动时开始回到它来自的位置。那是对的吗？ – RustyTheBoyRobot

我从来没见过Scrollorama，它吸引了我，所以I built something to do what you're asking。它不是一个插件;我希望滚动代码很简单，而不是插件类型的代码混乱。我认为把它变成一个插件会很简单，所以我会把它留给你（除非你需要一些帮助）。代码

的jQuery

说明有scrollTop()功能，以确定容器从顶部多远滚动。使用的是滚动区域和容器的高度内元素的高度，我们可以判断容器已滚动多少百分比：

scrollAmount/(totalSize - visibleSize)

（我们必须减去离开容器的高度visibleSize为了得到正确的结果。由于scrollTop()从被隐藏的元素的顶部返回的像素数，一路滚动至底部会给我们totalSize - visibleSize，不仅仅是totalSize）

我们可以使用百分比来确定何时上升，下降或停留在同一位置。 repositionBanner()函数获取滚动百分比并决定如何处理动画元素。在我的代码中，我选择将元素从0-30％移动到位置，从30-70％保持其位置，并从70-100％飞回原始位置。

（我所有的代码假设你正在处理的垂直滚动。同样的概念可以通过使用left和width代替top和height适用于横向滚动）

来源

2012-06-25 23:23:13 RustyTheBoyRobot

这甚至还没有接近像RustyTheBoyRobot的答案一样优雅，但您可以通过将元素包装在另一个透明的容器元素中来实现此目的。然后，您可以将容器制作成动画，并将原始元素移出。

例子：

//animate in 
scrollorama.animate('#elementToAnimateContainer',{ 
    delay: 0, 
    duration: 100, 
    property:'left', 
    start:-3000, 
    end: 0, 
    pin: true 
}); 

//animate out 
scrollorama.animate('#elementToAnimate',{ 
    delay: 500, 
    duration: 100, 
    property:'left', 
    start:0, 
    end: 3000, 
    pin: true 
});

唯一的问题是，容器仍然会在屏幕上，但如果设置为透明的，你不会看到它。你以后可以随时使用$('#elementToAnimateContainer').remove()，或者设置为pointer-events:none;等。

正如我所说，它不是很漂亮，但它会做你所问的。

来源

2012-08-17 20:53:41

也许你可以逆转它;让孩子移出父母*第一个*，然后让父母离开第二部分动画。这将使未使用的容器离开屏幕。 – RustyTheBoyRobot

视差滚动两个方向

回答

相关问题