Skrollr——兼容性超強的視差滾動js插件- numbbbbb - 博客園. 我忘了第一次见到视差滚动的页面是什么时候，但是当时的感觉我到现在都忘不了。 “原来网页还可以这么设计！” Skrollr是一个开源的视差滚动js插件，兼容性极强，可以兼容各种浏览器（包括IE）以及手机端（IOS/Android），基本上没有兼容不了的。 Skrollr自身体积只有8k，加上兼容ie和手机端的插件也不到30k，对于一个展示用页面来说这个体积确实不大了。 先来看一个skrollr的官方Demo吧。 怎么样，是不是很厉害？ 下面我翻译一下官方的三个小例子，大家可以感受一下。 1、目标：滚动条在最上方时，让div的background-color为#00f；当滚动条滚动到500px时div的background-color变化为#f00； 代码： <div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div> 查看效果 看出来怎么用了吗？
2、目标：让div转起来 <div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div> 查看效果 你可以定义任意多个效果，skrollr都可以让他们随着滚动变化。 3、目标：让div摇滚起来 <div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div> 查看效果 可以使用skrollr提供的一些easing函数，改变运动方式。 4、目标：使用相对位置而不是绝对位置 查看效果 看到了吗，我们把“data-500”换成了“data-top”！ 关于相对位置的详细介绍请查看sskrollr的github主页。 好了，简单的教程到此结束，相信大家对skrollr已经有了一个初步的了解，剩下的，just do it by yourself！
Skrollr. SUPERSCROLLORAMA. Skrollr - parallax scrolling for the masses. 利用Adobe神器十分鐘零代碼實現HTML5視差滾動特效. 视差滚动是最近出现的一个比较火的站点视觉效果，适用于做整站(mini-site)也可以做小动画。 通常来说，要使用JavaScript和CSS手工编代码来实现视差滚动效果。 本文来介绍如何使用Edge Animate，在十分钟之内，无编码，无压力地实现类似效果。 在ipad和我的HTC One上，动画非常流畅，你也可以在你的移动设备上试一试: DEMO 上述动画用到的图片资源是作者厚颜无耻的“借”自一个视差滚动效果JS库：spritely.net 。 非常感谢。 下载Adobe Edge Animate制作工具 在本教程发布的时间，Edge Animate版本为1.5，可以在Adobe云创意平台上免费下载。 项目源文件 Edge+Animate+Tutorial+4.zip 本教程用到的素材可以在项目解压后的images目录下找到，包括： bird-forward-back.pngcloud.pnghill-with-windmill.pngsky1.pnghill2.png 本教程不会逐步来介绍如何实现上述动画，在上述动画中用到的一些技巧在之前教程中也有介绍过，比如如何使用SpriteSheet来生成逐帧动画 。 一、滚动的背景 生成元件 在上面的视差效果动画中，背景和前景始终在不间断的滚动。 平移图片hillA 在Symbol子面板中，选中symHill，右键点击Edit，进入元件编辑状态。 使用之前教程介绍的方法（比如通过改变x坐标设定关键帧，或是使用自动关键帧生成模式，或者Pin按钮），您能很快速的实现该效果。 首先，命名舞台上的图片元素为hillA。 关键帧Left=0 激活auto-keyframe mode和Auto-transition Mode，并将播放头移至0:15秒处。
第二张图片:hillB 但是，通过运行可以看到，在背景山向左滚动出舞台时，舞台会空出，而我们希望整个过程是一个连绵不断的滚动。 首先，把播放头移至时间轴起始，保证hillB的位置为紧贴舞台右侧（550，0）。 复制特效 接下来，在时间轴上向后移动播放头，直至舞台hillA的图片右边缘移至舞台的右边缘，即left=-560。 粘贴后的效果如图： 但是，我们并不需要hillB完成全部动画。 HillB的left属性关键帧 现在，不再需要hillB从00:15:000时间点后的特效。 SymHill时间轴特效 complete事件 调整播放头. 15 Best Parallax Scrolling Tutorials. Parallax scrolling is one of the simplest solutions that webmasters could rely on, especially if they demand for immediate impact on the site visit, faster loading time, and interesting effects that people could enjoy.
Because of its benefit to webpages using Parallax plugins, there are now many online resources that offer Parallax tutorials in order for interested website owners to also experience the increasing number of visitors with such an amazing welcome page. There are many ways of creating websites that would catch the attention and interest of various visitors, right from the first visit. Some would consider using pictures with slides, while others think of integrating their graphics with powerful animation. Though the intention is actually to invite people over to view more of the site, the purpose is sometimes defeated as such modes of media in a website slow the opening of the page, making the experience a bad event.
Tutorial || Demo Tutorial || Demo Tutorial || Demo. Create a Funky Parallax Background Effect using jQuery. In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog. Tutorial Details Last year, the Silverback App site, designed by Carsonified, created some chatter amongst the design community for its clever use of a parallax scrolling effect seen when resizing the browser window. Like in old 2D platformers like Sonic the Hedgehog, this parallax effect could really come into its own alongside some horizontally scrolling content. This can be easily achieved using a little jQuery magic! Step 1 – The Skeleton HTML First, we need to create the basic HTML structure we’ll be using. So fire up your code editor of choice, and create a new HTML file.
Don’t be too afraid of the extraneous inner divs in the content boxes; I’ll be bending the rules a little here and using those to enable a little CSS3 trickery for a nice border effect. Step 2 – Some CSS Simple as that! jInvertScroll – jQuery Horizontal Parallax Plugin.