ios浏览器滚动交互太差_使用ScrollMagic.js构建交互式滚动网站

ios浏览器滚动交互太差

ScrollMagic is a jQuery 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插件，可让您像滚动播放控件一样使用滚动条。 使用此工具，您可以构建一些非常漂亮的登录页面和网站。 通常，我们不会编写有关使用单个jQuery插件的教程，但scrollMagic的作用很大 ，并很快成为我最喜欢的插件之一。 在本文中，我将介绍我对滚动插件的一般看法，如何开始使用ScrollMagic以及一些基本的，最重要的创意演示。 最终，一些供您重新使用的入门模板即将在本教程的第二部分中发布。

关于用户滚动条的注释 (A Note About a User's Scroll)

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的名字暗示了它的想法，但它并未真正劫持用户的滚动。 它只是在用户滚动过程中触发了一系列事件。 例如，比较这两个站点：

• scrollMagic.js: Google Cardboard
  scrollMagic.js：Google Cardboard
• fullPage.js: Create Beautiful Fullscreen Scrolling Websites
  fullPage.js：创建漂亮的全屏滚动网站

Notice that with the Google Cardboard site you can quickly navigate up and down, but with fullPage.js 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.

请注意，在Google Cardboard网站上，您可以快速向上和向下导航，但是对于fullPage.js，您实际上在滚动时受到限制和延迟。 尽管如此，FullPage.js还是一个很棒且令人印象深刻的插件，它并不是我想要创建的用户体验。

Lastly, if you check out ScrollMagic's demo page 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 ScrollMagic Demos - Class Toggles by Nicholas Cerminara (@ncerminara) on CodePen.

请参阅CodePen上的Nicholas Cerminara（ @ncerminara ） 撰写的Pen ScrollMagic Demos-Class Toggles 。

最初设定 (Initial Setup)

To get started you'll need a few dependencies.

首先，您需要一些依赖项。

jQuery的 (jQuery)

Official Resource

官方资源

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 +）。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

GreenSock动画平台（GSAP） (GreenSock Animation Platform (GSAP))

Official Resource

官方资源

ScrollMagic uses the GreenSock Animation Platform (GSAP) 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