本文共 17824 字，大约阅读时间需要 59 分钟。
ios浏览器滚动交互太差
ScrollMagic is a plugin which lets you use the scrollbar like a playback scrub control. Using this, you can build some extremely beautiful landing pages and websites. Normally, we wouldn't do a tutorial on using a single jQuery plugin, but scrollMagic does a lot and has quickly become one of my favorite plugins. In this article, I'll cover my general opinion on scroll plugins, how to get started with ScrollMagic, and some basic and over-the-top creative demos. Finally, some starter templates for you to repurpose are in works to be released very soon in part II of this tutorial.
ScrollMagic是一个插件，可让您像滚动播放控件一样使用滚动条。 使用此工具，您可以构建一些非常漂亮的登录页面和网站。 通常，我们不会编写有关使用单个jQuery插件的教程，但scrollMagic的作用很大 ，并很快成为我最喜欢的插件之一。 在本文中，我将介绍我对滚动插件的一般看法，如何开始使用ScrollMagic以及一些基本的，最重要的创意演示。 最终，一些供您重新使用的入门模板即将在本教程的第二部分中发布。
I'm not a fan of hijacking a users scroll period. I personally believe it's way to easy to ruin a user's experience and it makes it difficult to quickly navigate to specific content. It takes a lot for me to consider using a jQuery plugin that heavily affects normal scroll behavior. ScrollMagic doesn't really hijack a users scroll despite its name alluding to the idea that it would. It simply just triggers a bunch of events during a user's scroll. For example, compare these two sites:
我不喜欢劫持用户滚动期。 我个人认为这是一种容易破坏用户体验的方法，并且很难快速导航到特定内容。 我需要考虑大量使用会严重影响正常滚动行为的jQuery插件。 尽管ScrollMagic的名字暗示了它的想法，但它并未真正劫持用户的滚动。 它只是在用户滚动过程中触发了一系列事件。 例如，比较这两个站点：
Notice that with the you can quickly navigate up and down, but with you're actually restricted and delayed on your scrolling. FullPage.js is nevertheless a great and impressive plugin, it's just not user experience I like to create.
请注意，在您可以快速向上和向下导航，但是对于您实际上在滚动时受到限制和延迟。 尽管如此，FullPage.js还是一个很棒且令人印象深刻的插件，它并不是我想要创建的用户体验。
Lastly, if you check out ScrollMagic's you'll see a ton of crazy animations. The demo is definitely over the top and doesn't really do justice for the advantages of using ScrollMagic in simpler designs. I hope after reading this article though that you understand and enjoy the benefits as much as I do.
最后，如果您查看ScrollMagic的您将看到大量疯狂的动画。 该演示肯定是最重要的，并且并不能真正在简单设计中使用ScrollMagic带来的好处。 我希望阅读本文后，您能像我一样理解并享受其中的好处。
Here's a little sample of one of the things we'll be able to build:
这是我们将要构建的东西的一些示例：
See the Pen by Nicholas Cerminara () on .
请参阅的Nicholas Cerminara（ ） 的Pen 。
To get started you'll need a few dependencies.
首先，您需要一些依赖项。
ScrollMagic requires jQuery. You'll need to include to be able to even use ScrollMagic. I'm going to include the latest jQuery before it dropped Internet Explorer 8 support (jQuery 2.x+) despite ScrollMagic only supporting Internet Explorer 9 and above.
ScrollMagic需要jQuery。 您需要包括才能使用ScrollMagic。 尽管ScrollMagic仅支持Internet Explorer 9及更高版本，但我将包括最新的jQuery，然后再放弃对Internet Explorer 8的支持（jQuery 2.x +）。
ScrollMagic uses the for doing animations. Technically, the GreenSock platform is completely optional, but it makes total sense to use it. GSOP is nice because it has it's own little framework with its own dependencies and plugins. If performance is a huge factor for you, you can pick and choose only exactly what you need. However, we're going to use the whole library to take advantage of all it's cool features.
ScrollMagic使用进行动画制作。 从技术上讲，GreenSock平台是完全可选的，但使用它完全有意义。 GSOP很不错，因为它具有自己的小框架，带有自己的依赖项和插件。 如果性能对您来说是一个很大的因素，那么您只能选择所需的东西。 但是，我们将使用整个库来利用其所有很酷的功能。
Next, you'll need to include ScrollMagic. ScrollMagic also comes with a nice but separate debugging library. I'll include it for the demos, but on production environments, there's no need to include it.
接下来，您需要包括ScrollMagic。 ScrollMagic还带有一个不错的但独立的调试库。 我将其包含在演示中，但是在生产环境中，无需包含它。
And here it is all together with the full HTML and references to Bootstrap for CSS:
这是所有这些以及完整HTML和CSS的Bootstrap引用：
Scotch Magic ♥
Typically when you initiate a jQuery plugin you just pass a bunch of options and call it a day. Sometimes a plugin will have advanced features like a or the ability to with some public functions so you can get real custom with it.
通常，当您启动jQuery插件时，您只需传递一堆选项并将其命名为day。 有时，插件会具有一些高级功能，例如或具有某些公共功能 ，可以因此您可以使用它获得真正的自定义。
ScrollMagic is a little bit different than this. We're going to initiate a ScrollMagic Controller, create a bunch of animation objects, create some Scene (where the animation happens) objects, combine the animation and scene objects, then pass it all back to the main ScrollMagic Controller. So our general steps will be:
ScrollMagic与此有所不同。 我们将启动ScrollMagic Controller，创建一堆动画对象，创建一些Scene（发生动画的对象）对象，将动画和场景对象组合在一起，然后将其全部传递回主ScrollMagic Controller。 因此，我们的一般步骤将是：
It's nothing too crazy as it's your typical JavaScript stuff, but understanding the underlying structure of how it all plays together will help you move forward with it. It's a little bit more involved than your standard jQuery plug and chug plugins.
没什么太疯狂的了，因为它是您的典型JavaScript东西，但是了解它们如何共同发挥作用的基本结构将帮助您继续前进。 它比您的标准jQuery插件和chug插件要复杂得多。
Now, all that being said, this is how to initiate the ScrollMagic Controller:
现在，所有这些，这就是如何启动ScrollMagic Controller的方法：
$(function() { // Init Controller var scrollMagicController = new ScrollMagic();}); Now let's create the two most basic examples that ScrollMagic does for us.
现在，让我们创建ScrollMagic为我们做的两个最基本的示例。
All this does is trigger an animation. We'll do two things to get this working. First, create the Animation on the element we want to animate. Then, second, we'll create the Scene which is going to trigger the animation when it is scrolled into view. So, let's go ahead and create that first animation (we'll cover these more in depth further in the article):
所有这一切都将触发动画。 我们将做两件事以使此工作正常进行。 首先，在要设置动画的元素上创建动画。 然后，第二步，我们将创建场景，当场景滚动到视图中时将触发动画。 因此，让我们继续创建第一个动画（我们将在本文中更深入地介绍这些动画）：
// Create Animation for 0.5svar tween = TweenMax.to('#animation', 0.5, { backgroundColor: 'rgb(255, 39, 46)', scale: 7, rotation: 360}); Pretty simple! This will add those CSS properties to the element with the ID of #animation. However, we need to control when those animations happen. ScrollMagic will make it easy to bind the animation to certain scroll events by creating Scenes. Here's the next piece of code:
很简单！ 这会将这些CSS属性添加到ID为#animation的元素中。 但是，我们需要控制这些动画何时发生。 ScrollMagic将通过创建场景使将动画绑定到某些滚动事件变得容易。 这是下一段代码：
// Create the Scene and trigger when visible with ScrollMagicvar scene = new ScrollScene({ triggerElement: '#scene', offset: 150 /* offset the trigger 150px below #scene's top */}).setTween(tween).addTo(scrollMagicController); We create the Scene as an object to be triggered later, then we pass which animations we want to that Scene, and, finally, we pass it all back to the ScrollMagicController to be handled. Here's a stripped and naked example to help explain:
我们将Scene创建为要稍后触发的对象，然后将所需的动画传递给该Scene，最后将所有动画传递回ScrollMagicController进行处理。 这是一个简单的示例，可以帮助解释：
See the Pen by Nicholas Cerminara () on .
请参阅的Nicholas Cerminara（ ） 的Pen 。
The last example only triggers the animation at the specified Scene trigger point. ScrollMagic can bind your animation to the scroll event. This acts as a rewind and fast-forward scrubber for your animation. Here's the code for doing that:
最后一个示例仅在指定的场景触发点触发动画。 ScrollMagic可以将动画绑定到滚动事件。 这可作为动画的快退和快进清理器。 这是执行此操作的代码：
// Duration ignored / replaced by scene duration nowvar tween = TweenMax.to('#animation', 0.5, { backgroundColor: 'rgb(255, 39, 46)', scale: 5, rotation: 360});var scene = new ScrollScene({ triggerElement: '#scene', duration: 300 /* How many pixels to scroll / animate */}).setTween(tween).addTo(scrollMagicController); You should immediately see that the only difference that matters between the two examples is that the duration property is added to the scene. This will be how many pixels you want the animation to be on scroll. Here's an example to visualize that difference between the two methods:
您应该立即看到，两个示例之间唯一重要的区别是将duration属性添加到了场景中。 这就是您希望动画滚动的像素数。 这是一个示例，以可视化这两种方法之间的区别：
See the Pen by Nicholas Cerminara () on .
见笔尼古拉□瑟敏纳拉（ ）上 。
There's a ton of options for doing animations. I'll cover some of the more various ones, but, first let's do the most common one - "tweening" using the .
动画有很多选择。 我将介绍一些更多样化的方法，但是首先让我们使用进行最常见的“补间”。
Tweening is what the GSAP calls their animations. We're specifically using their . TweenMax is awesome because it encompasses all their various plugins and additions into one. This gives us some cross-browser stuff, makes the browser use CSS3 animations first, is extremely performant, and it let's you create complex animations and key frames with ease. Alternatively, you can work piecemeal and pick exactly which components you want with and its .
补间就是GSAP所谓的动画。 我们专门使用他们的 。 TweenMax很棒，因为它将所有各种插件和附加功能都融合到了一起。 这给了我们一些跨浏览器的知识，使浏览器首先使用CSS3动画，性能极高，它使您可以轻松创建复杂的动画和关键帧。 另外，您可以零碎工作，并使用及其准确选择所需的组件。
This lets us create our most standard animations. For example if you want an element's background color to go from it's default to red. Here's an example:
这使我们可以创建最标准的动画。 例如，如果您希望元素的背景色从默认值变为红色。 这是一个例子：
// TweenMax.to(selectorOfElementYouWantToAnimate, DurationOfAnimation, AnimationProperties);var tween = TweenMax.to('#first-animation', 0.5, {backgroundColor: 'red'}); You can get as infinitely creative as you want with this. For example, the following tween will make the background red, it grow 5 times in size, and do a full spin rotation using CSS3 Transforms.
您可以根据需要获得无限的创意。 例如，以下补间将使背景变红，其背景大小将增大5倍，并使用CSS3变换进行完整的旋转旋转。
var tween = TweenMax.to('#first-animation', 0.5, { backgroundColor: 'red', scale: 5, rotation: 360}); You can do pretty much anything you would be able to do with CSS3 animations - colors, transforms, etc. Here's the so you can reference for syntax. You can view the examples directly above to see the TweenMax.to() function in action.
您可以执行CSS3动画几乎可以做的所有事情-颜色，变换等。这是因此您可以参考语法。 您可以直接在上面查看示例，以查看实际的TweenMax.to()函数。
This works exactly the opposite of TweenMax.to(). It will animate to the default styles from the specified animation options. Here's some example code:
这与TweenMax.to()完全相反。 将动画从指定的动画选项的默认样式。 这是一些示例代码：
var tween = TweenMax.from('#animation', 0.5, { backgroundColor: 'rgb(255, 39, 46)', scale: 5, rotation: 360}); Here's an example from one of the basic demos using the from() function instead:
这是一个使用from()函数的基本演示之一的示例：
See the Pen by Nicholas Cerminara () on .
见笔尼古拉□瑟敏纳拉（ ）上 。
This function is exactly what it sounds like. You'll specify two animation properties for it to animate from one and then to the other. Hopefully you're wondering why you can't just use the to() function and set the start styles with CSS. Well, you can and that's totally okay. The function fromTo however introduces a bunch of other options like yoyo and repeat. So you use those to create keyframe animations when the scroll event is triggered. Check out the code below:
这个功能听起来确实很像。 你会指定两个动画属性为它从一个动画，然后到其他。 希望您想知道为什么不能只使用to()函数并使用CSS设置开始样式。 好吧，你可以，那完全没关系。 但是fromTo函数引入了许多其他选项，例如yoyo和repeat 。 因此，当滚动事件触发时，您可以使用它们来创建关键帧动画。 查看以下代码：
var tween = TweenMax.fromTo('#animation', 0.5, { backgroundColor: 'rgb(255, 39, 46)', scale: 5, left: -400 }, { scale: 1, left: 400, rotation: 360, repeat: -1, /* Aka an infinite amount of repeats */ yoyo: true /* Make it go back and forth or not */ }); See the Pen by Nicholas Cerminara () on .
见笔尼古拉□瑟敏纳拉（ ）上 。
See the Pen by Nicholas Cerminara () on .
见笔尼古拉□瑟敏纳拉（ ）上 。
With both of these examples, if you remove the Scene's duration, there will be no endpoint for the animation to stop.
对于这两个示例，如果删除场景的持续时间，将没有终结点可以停止动画。
You can easily have multiple elements have the same animation and different start times all within the same Scene. This is called staggering and is very easy to do. Here's a code sample followed by a demo:
您可以轻松地使同一场景中的多个元素具有相同的动画和不同的开始时间。 这称为交错，非常容易做到。 这是一个代码示例，后面是一个演示：
var tween = TweenMax.staggerFromTo('.animation', 0.5, { scale: 1, }, { backgroundColor: 'rgb(255, 39, 46)', scale: 5, rotation: 360 }, 0.4 /* Stagger duration */); See the Pen by Nicholas Cerminara () on .
请参阅的Nicholas Cerminara（ ） 的Pen 。
There's even more things you can do. For example, you can animate to all the CSS properties of contained in a certain class. You can also chain animations together to get even more complex and creative. This article won't cover all that, but you can check out the docs for more information.
您还可以做更多的事情。 例如，您可以为特定类中包含的所有CSS属性设置动画。 您还可以将动画链接在一起，从而变得更加复杂和富有创意。 本文不会涵盖所有内容，但是您可以在查看文档以获取更多信息。
ScrollMagic also lets you easily toggle as many classes as you want when the Scene is activated. This is super handy for doing some complex stuff without the additional JavaScript. For example, if we wanted to just toggle a body class to change some colors around, all we would need to do is add the following code to the Scene.
使用ScrollMagic，还可以在激活场景时轻松地根据需要切换任意多个类。 这对于不需要额外JavaScript就能完成一些复杂的工作非常方便。 例如，如果我们只想切换一个实体类来改变一些颜色，我们要做的就是将以下代码添加到场景中。
.setClassToggle('body', 'scene-is-active') This brings so much control and power in my opinion. Check out the quick demo I put together to demonstrate the extra amount of depth you gain.
我认为这带来了太多的控制权和力量。 查看我整理的快速演示，以演示您获得的额外深度。
See the Pen by Nicholas Cerminara () on .
请参阅的Nicholas Cerminara（ ） 的Pen 。
I bunched custom containers and mobile support together because they're really one and the same. Typically on a mobile touch device, the scroll event isn't detected until the scroll has stopped. This is unfortunate for what we're doing. Fortunately that only occurs when you're scrolling on the entire body. If say your scrolling in an element that is set to overflow: scroll each moment of the scroll is detected.
我将自定义容器和移动支持捆绑在一起，因为它们确实是一个整体。 通常，在移动触摸设备上，直到滚动停止才检测到滚动事件。 这是我们所做的不幸。 幸运的是，仅当您在整个身体上滚动时才会发生这种情况。 如果说您在设置为overflow: scroll的元素中overflow: scroll滚动将检测到overflow: scroll每个时刻。
ScrollMagic lets you specify any container you want for your scenes by a simple option. Here's a code example:
ScrollMagic允许您通过一个简单的选项为场景指定任何容器。 这是一个代码示例：
var scrollMagicController = new ScrollMagic({container: '#my-container'}); You can do cool things with this like putting your animations and scroll inside of a div or section of your website. Mobile support takes this exact same concept and creates a "container" or wrapper around the whole site and just binds ScrollMagic to that container.
您可以通过这样做来做一些很酷的事情，例如将动画和滚动到div或网站的一部分内。 移动支持采用完全相同的概念，并在整个站点周围创建一个“容器”或包装器，并将ScrollMagic绑定到该容器。
Truth be told it's a hackish workaround. The major downside is this kills off support for . ScrollMagic's official answer to this is to use something like to bring scroll momentum to touch devices. You may also be able to just add this CSS3 property to the container -webkit-overflow-scrolling: touch;, but that obviously won't work in all browsers. It's entirely up to you to support this or not, but if you get it right it can really provide a seamless experience on mobile.
真相被告知这是一个hackish的解决方法。 主要的缺点是，这消除了对支持。 ScrollMagic对此的官方答案是使用诸如类的来为触摸设备带来滚动动力。 您也可以只将此CSS3属性添加到容器-webkit-overflow-scrolling: touch; ，但这显然不适用于所有浏览器。 是否支持此功能完全取决于您，但是如果您做对了，它确实可以在移动设备上提供无缝的体验。
Lastly, if you want to just disable ScrollMagic on mobile or touch devices, you can do it easily with Modernizr:
最后，如果您只想在移动设备或触摸设备上禁用ScrollMagic，则可以使用Modernizr轻松做到这一点：
if (!Modernizr.touch) { // Start ScrollMagic code} If you're not a fan of using another library like Modernizr just to detect touch, you can use this function:
如果您不喜欢使用像Modernizr这样的其他库来检测触摸，则可以使用以下功能：
if (!is_touch_device()) { // Start ScrollMagic code}function is_touch_device() { return 'ontouchstart' in window // works on most browsers || 'onmsgesturechange' in window; // works on ie10}; I grabbed that function from StackOverflow post. It seems to update a lot in case you want to check to see if that's still up to date.
我抓住这个函数从 StackOverflow的职位。 如果您想查看是否仍是最新的，它似乎已更新很多。
ScrollMagic's and are amazing. I definitely recommend heading over there and checking out all the other things ScrollMagic can do. Some of those things include:
ScrollMagic的和令人赞叹。 我绝对建议前往那儿，并检查ScrollMagic可以完成的所有其他操作。 其中一些内容包括：
There's definitely a lot you can do with ScrollMagic. I think it's generally smart to use this with caution in risk of ruining a user experience with some bad animations. Complex ScrollMagic websites are probably best saved for landing pages and using this subtly is best with content based websites. It's all about finding a balance. That being said, I plan on releasing some starter templates soon that would be good for portfolios, product launches, and stuff like that. Stay tuned!
ScrollMagic绝对可以做很多事情。 我认为谨慎使用此方法通常很明智，因为这样做会冒着一些不良动画破坏用户体验的风险。 复杂的ScrollMagic网站可能最好保存为登录页面，而对基于内容的网站最好巧妙地使用。 这都是要找到平衡。 话虽这么说，我计划尽快发布一些入门模板，这些模板将对产品组合，产品发布以及类似的东西很有帮助。 敬请关注！
翻译自:
ios浏览器滚动交互太差
转载地址：http://dnywd.baihongyu.com/