jQuery 如何在 iOS 设备上构建视差滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9592788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to build parallax scroll on an iOS device
提问by jon
Today I saw the most amazing ipad app that I was assured was written using html5, css3 and javascript... the best part of the app was they had perfectly created a parallax scroll... My question is... how?... I can not find any documentation on it being possible to create a parallax scroll on iOS devises... if someone could give me a link or any advise on how to do this that would be most appreciated... anyone?... kind regards J
今天我看到了最神奇的 ipad 应用程序，我确信它是使用 html5、css3 和 javascript 编写的……该应用程序最好的部分是他们完美地创建了一个视差滚动……我的问题是……如何？.. . 我找不到任何关于可以在 iOS 设备上创建视差滚动的文档......如果有人能给我一个链接或任何关于如何做到这一点的建议，我将不胜感激......有人吗？......亲切的问候 J
回答by Tom
We recently released a site which does parallax scrolling on iPad. There is a bit of an explanation, and a video of it in use here: http://www.aerian.com/portfolio/one-potato/one-potato-html5-website
我们最近发布了一个在 iPad 上进行视差滚动的网站。有一点解释，这里有一个使用它的视频：http: //www.aerian.com/portfolio/one-potato/one-potato-html5-website
and the site itself if you have an iPad to play with:
以及网站本身，如果您有 iPad 可以玩：
To do this, we have written some JavaScript library code which we are looking to open-source in the near future.
为此，我们编写了一些 JavaScript 库代码，我们希望在不久的将来将其开源。
The basic idea is to write a scroll container that accepts touch input and tracks your x and y positions (if you need two dimensions) of your content. To make this parallax-able, we found the best way is to use delegation to a controller of sorts. I can't remember the exact syntax we used without looking
基本思想是编写一个滚动容器，它接受触摸输入并跟踪内容的 x 和 y 位置（如果您需要二维）。为了使这种视差成为可能，我们发现最好的方法是使用对各种控制器的委托。我不看就记不起我们使用的确切语法
container.on('touchmove', function(e) {
//get our offset
var offset = <some value>; //e.g. { x : 0, y : -1300 }
var easing = 'ease-out';
self.delegate.scrollViewDidScrollToOffsetWithAnimation(self, offset, easing);
});
Then in the Controller, something like this:
然后在控制器中，是这样的：
var scrollView = new ScrollView($('#container'));
var controller = {
scrollViewDidScrollToOffsetWithAnimation : function(scrollView, offset, easing) {
//here you need to respond to offset, by changing some css properties of your parallax elements:
parallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.8)');
anotherParallaxElement.css('transform', 'translate(-offset.x, -offset.y * 0.1)');
}
}
scrollView.setDelegate(controller);
This delegate pattern is heavily influenced by UIKit as I feel it provides a cleaner way of informing disparate parts of a system of another's events. I find using too much event dispatching becomes hard to maintain, but that's anther story altogether.
这种委托模式深受 UIKit 的影响，因为我觉得它提供了一种更清晰的方式来通知系统的不同部分另一个事件。我发现使用过多的事件调度变得难以维护，但这完全是另一个故事。
Hope this helps a bit.
希望这个对你有帮助。
回答by Greg Tatum
This site shows a pretty good example of how parallax style effects can work on the iOs https://victoriabeckham.landrover.com/INT
这个网站展示了一个很好的例子，说明视差样式效果如何在 iO 上发挥作用https://victoriabeckham.landrover.com/INT
They are simulating scrolling depending on the type of input you are giving. You're not actually scrolling the page, and then animating the various properties. It's reading in the touch events, mouse wheel, or their custom baked scroll bar and seeing how much you are wanting to scroll. All of the content in the page is in a container. That way when you are doing a touch event, it's just reading how much you are moving on the page.
他们根据您提供的输入类型模拟滚动。您实际上并不是在滚动页面，然后为各种属性设置动画。它正在读取触摸事件、鼠标滚轮或它们的自定义烘焙滚动条，并查看您想要滚动多少。页面中的所有内容都在一个容器中。这样，当您进行触摸事件时，它只是读取您在页面上移动了多少。
On top of that they are using an animation loop to make everything move. They are utilizing the window.requestAnimationFrame method in order to optimize the changes in their page so that it works smoothly on the iPad and in the browser. Here is a page with a description of it:
最重要的是，他们使用动画循环来让一切都动起来。他们正在利用 window.requestAnimationFrame 方法来优化页面中的更改，使其在 iPad 和浏览器中顺利运行。这是一个带有描述的页面：
http://paulirish.com/2011/requestanimationframe-for-smart-animating/The browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. For example, JS-based animations synchronized with CSS transitions or SVG SMIL. Plus, if you're running the animation loop in a tab that's not visible, the browser won't keep it running, which means less CPU, GPU, and memory usage, leading to much longer battery life.
http://paulirish.com/2011/requestanimationframe-for-smart-animating/浏览器可以将并发动画一起优化为单个重排和重绘周期，从而获得更高保真度的动画。例如，基于 JS 的动画与 CSS 过渡或 SVG SMIL 同步。此外，如果您在不可见的选项卡中运行动画循环，浏览器将不会让它继续运行，这意味着 CPU、GPU 和内存使用量会减少，从而延长电池寿命。
On top of that they have built a custom keyframe object that will decide on how everything is animated on the page. I'm drooling over this set up. Too bad it's not an open framework. You can set where the effect starts, where it ends, the easing, etc. just in the keyframe object, and their framework will handle all of the rest through the animation loop.
最重要的是，他们构建了一个自定义关键帧对象，该对象将决定页面上所有内容的动画方式。我正在为这个设置流口水。太糟糕了，它不是一个开放的框架。您可以仅在关键帧对象中设置效果开始的位置、结束的位置、缓动等，它们的框架将通过动画循环处理所有其余部分。
{
selector: '#outro2 > .content2',
startAt: outroStart+500,
endAt: outroStart+1000,
onEndAnimate:function( anim ) {},
keyframes: [
{
position: 0,
properties: {
"margin-top": 650
}
},
{
position: 1,
ease: TWEEN.Easing.Sinusoidal.EaseOut,
properties: {
"margin-top": 650
}
}
]
},
In summary, I believe the combination of custom implemented scrolling, and a custom animation loop using the requestAnimationFrame method get beyond the parallax limitation normally associated with iOS devices.
总之，我相信自定义实现的滚动和使用 requestAnimationFrame 方法的自定义动画循环的组合超出了通常与 iOS 设备相关的视差限制。
回答by Matt Harley
I've recently checked out Skrollr: http://prinzhorn.github.com/skrollr/
我最近检查了 Skrollr：http://prinzhorn.github.com/skrollr/
The example works great on iOs and Desktop!
该示例在 iO 和桌面上运行良好！
回答by Khoa
Mark Dalgleish who developed stellar.jsexplained really well how to achieve this using iScroll.js to simulate an iOS scroll(YouTube video).
开发stellar.js 的Mark Dalgleish很好地解释了如何使用 iScroll.js 来模拟 iOS 滚动（YouTube 视频）。
回答by Karlgoldstraw
i am also looking into doing this. Check out stellar.js by Mark Dalgeish. It works wonderfully in most situations. If anyone has any other links or info it would be great to hear.
我也在考虑这样做。查看 Mark Dalgeish 的 stellar.js。它在大多数情况下都能很好地工作。如果有人有任何其他链接或信息，很高兴听到。
http://markdalgleish.com/projects/stellar.js/demos/ios.html
http://markdalgleish.com/projects/stellar.js/demos/ios.html
It uses Scrollability. I'm hoping to get scrollarama to work on an iPad in some way like stellar.js does. Well that's the dream!
它使用可滚动性。我希望让 scrollarama 以某种方式在 iPad 上工作，就像 stellar.js 那样。嗯，这就是梦想！
Hope this helps your search.
希望这有助于您的搜索。
回答by user2985924
I found this site have an article about parallax that work great in ios. But, that only support touch device. This will be great if anybody combine to make it work on both desktop and ios device. http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/
我发现这个网站有一篇关于在 ios 中很好用的视差的文章。但是，那只支持触摸设备。如果有人结合使其在桌面和 ios 设备上工作，这将是很棒的。 http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad-and-ipod/
回答by deweydb
at the moment, it's not possible on iOS devices. iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. so you will get chunky animations at best. don't bother.
目前，在 iOS 设备上是不可能的。iOS 设备在滚动期间冻结 DOM 操作，在滚动完成时将它们排队以应用。所以你最多会得到厚实的动画。别打扰。
