Scrollmagic：有趣的网页设计
目录:
在网页设计中，一种趋势就像为实现网站所采用的风格一样，通常在临时时期，这种风格被用户强烈接受。 在2016年到目前为止的趋势中，显然会在2017年继续定下基调的是动画和长篇幅很大的滚动条 。
对于用户而言，这种风格具有吸引力和乐趣已不是什么秘密，只要动画得到很好的使用，我们便可以使网站导航直观而有趣。 因此，我们创建了一个教程，使用jQuery ScrollMagic插件在您的网站上添加动画滚动。
ScrollMagic：有趣的网页设计
ScrollMagic是用javascript制作的库，用于在移动网站时实现交互。 它完全替代了其前身Superscrollorama ，其体系结构基于可轻松自定义和扩展的插件。
如果我们要实现以下某些功能，则是理想的：
- 基于站点的位置或位移的动画；触发动画或使其与滚动的移动同步；无需太多努力即可添加视差效果；创建无限滚动的页面，以ajax处理内容加载。
ScrollMagic功能
- 优化的性能，轻巧，灵活并具有可扩展性；事件管理和面向对象的编程；支持自适应Web设计；支持双向 （水平和垂直）移动；支持容器内的移动（div） ，甚至可以在一个页面上显示多个页面。它非常适合浏览器 ：Firefox 26 +，Chrome 30 +，Safari 5.1 +，Opera 10 +，IE 9+。在其GitHub存储库中，它具有详细的文档和许多应用程序示例。
获取ScrollMagic
它可以通过各种方式获得。
1：GitHub
git clone git：//github.com/janpaepke/ScrollMagic.git
2：凉亭
凉亭安装scrollmagic
3：节点程序包管理器
npm安装scrollmagic
4：CDN
cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
您还可以阅读如何在Outlook中自定义电子邮件的设计
安装及使用
安装非常简单，我们只在要使用它的html文件中包含内核文件。
;
使用时，该插件提供了一种面向控制器的设计模式，并向其中添加了一个或多个场景。 这些场景用于定义容器移动到特定点时发生的情况。
这将是一个基本示例：
//初始化控制器var controller = new ScrollMagic.Controller（）; //创建一个新的场景ScrollMagic.Scene（{持续时间：100，//该场景的滚动距离应为100px偏移量：50 //滚动50px后开始该场景}）.setPin（“#my-sticky- element“）//固定场景持续时间的元素.addTo（controller）; //将场景分配给控制器
一个更高级的示例是实现多个偏移量，其源代码为：
$（function（）{//等待文档就绪//初始化控制器var controller = new ScrollMagic.Controller（）; //构建补间var tween = TweenMax.to（“#animate”，0.5，{scale：3，easy ：Linear.easeNone}）; //建立场景var scene = new ScrollMagic.Scene（{triggerElement：“ #multiDirect”，持续时间：400，偏移量：250}）.setTween（补间）.setPin（“#动画”）。 addIndicators（{name：“ resize”}）//添加指示器（需要插件）.addTo（controller）; //初始化控制器水平var controller_h = new ScrollMagic.Controller（{vertical：false}）; //建立补间水平var tween_h = TweenMax.to（“#animate”，0.5，{旋转：360，缓动：Linear.easeNone}）； //构建场景var scene_h =新的ScrollMagic.Scene（{持续时间：700}）.setTween（tween_h）。 setPin（“#animate”）.addIndicators（{name：“ rotate”}）//添加指示器（需要插件）.addTo（controller_h）;}）;
您可以在插件文档中找到更多示例及其源代码。
我们建议您如何使用USB记忆棒全新安装Windows 10
