最近很流行“视差滚动”效果,抛开设计不说,前端上的实现方法很有意思,国内详细的教程不多,所以自己研究别人网站,实践总结。
一、例子
二、原理
传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,偶尔有一些背景固定的网页。
顾名思义“视差滚动”就是通过滚动这个行为实现视觉上的层次错落的错觉,从而形成立体的运动效果。
其实分析各个优秀的例子网站,不难发现其实原理一样的,手法上也大同小异,都是通过控制多层的透明背景,在滚动的时候不再是只向上运动,而是以不同的速度、不同的方向去运动,再结合现实世界的运动规律,从而达到很棒的视觉冲击和交互
三、讲解
先分析下SmaShing 这个相对简单的例子。
观察此例子不难发现实现方法:最上层的页面元素(文字、图片)按照正常的方式滚动,背景通过JS往下方运动,从而实现了视差滚动
可以发现主体是由4个section标签组成的:
注意看属性:
data-type 类型,JS用来按类型选取元素
data-speed 速度,用于储存移动速度,供JS调用
style="background-position: 50% 0px;"
注意看这个行内属性 background-position 用来控制背景的位置,这个就是本例子的关键所在
我们滚动一段,通过firebug可以检测到此属性的变化
往下滚动的时候,此属性的值越来越小,我们都知道第二个参数代表Y轴方向,越小往下方偏移越多,从而看起来背景是往下方运动
下面我们看下作者是怎么通过JS控制的,附上源码:
$(document).ready(function () { // 读取window $window = $(window); // 遍历包含“data-type”的元素,读取并设置Y偏移量、X位置、滚动速度等参数 $('[data-type]').each(function () { $(this).data('offsetY', parseInt($(this).attr('data-offsetY'))); $(this).data('Xposition', $(this).attr('data-Xposition')); $(this).data('speed', $(this).attr('data-speed')); }); // 遍历符合 section[data-type="background"] 选择器的元素 $('section[data-type="background"]').each(function () { // 存储一起基础变量 var $self = $(this), offsetCoords = $self.offset(), topOffset = offsetCoords.top; // 当窗口滚动时 $(window).scroll(function () { // 通过计算滚动条高度和窗口高度判断当前元素是否在视野中 if (($window.scrollTop() + $window.height()) > (topOffset) && ((topOffset + $self.height()) > $window.scrollTop())) { // 以设定的速度滚动背景 // 因为我们是向上滚动,所以背景的yPos是负值 var yPos = -($window.scrollTop() / $self.data('speed')); // 如果此元素有一个Y偏移,将其添加上 if ($self.data('offsetY')) { yPos += $self.data('offsetY'); } // 最终的背景位置 var coords = '50% ' + yPos + 'px'; // 滚动背景 $self.css({ backgroundPosition: coords }); // 遍历本节点中的其他元素 $('[data-type="sprite"]', $self).each(function () { // 读取data-type="sprite"规则的元素 var $sprite = $(this); // 使用同样的方法进行滚动 var yPos = -($window.scrollTop() / $sprite.data('speed')); var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px'; $sprite.css({ backgroundPosition: coords }); }); // 遍历需要滚动的视频 $('[data-type="video"]', $self).each(function () { // 读取data-type="video"规则的元素 var $video = $(this); var yPos = -($window.scrollTop() / $video.data('speed')); var coords = (yPos + $video.data('offsetY')) + 'px'; $video.css({ top: coords }); }); }; // in view }); // window scroll }); // each data-type }); // document ready
四、总结和发散
通过分析上面的例子我们发现,其实就是通过JS去移动背景,此例子只是反向滚动了背景,已经达到了不错的效果。
我们可以向多个方向去扩展和发散:1.多层背景已不同的速度、不同的方向、不同的效果去滚动 2.页面上的元素可以用JS或jQuery去实现不同的效果,配合背景能达到很好的效果
转载请注明出处,谢谢!
来源:http://blog.csdn.net/huileiforever/article/details/9183011
相关推荐
利用UIScrollView实现视差滚动效果。在demo中,滑动ScrollView,背景图和文字的滚动速度不一样。直接用ScrollView 的协议,对其子视图的坐标进行随机系数比例的位置移动修正,从而实现视差滚动效果。没有用其他的...
网站源码,解压即用,简单调整后即可作为个人网站、课程设计或毕设网站的底座。使用主流开发框架,简单易上手,注释齐全。
实现视差效果 视差是一种效果,在这种情况下,滚动时背景内容或图像的移动速度与前景内容的移动速度不同。
视差滚动 UITableView - Swift / Xcode 6 一个示例 Xcode 项目,演示了如何使用 Swift 实现视差滚动 UITableViews。 例如,该项目可以扩展为包含您自己的 JSON 数据源,但当前将所有图像存储在一个简单数组中。 通过...
来源:github/SWParallaxScrollLicence:MIT作者:Sven 实现多重层面的视差滚动效果,可以自定义每个层次的滚动速度,不同滚动速度的层组成了视差滚动效果。
实现视图视差滚动效果(parallax effect)。就是让多层背景以不同的速度移动,形成运动视差效果。具体效果是:视图分成两部分,上部分一般是图片,下部分一般是列表。当手指往下拖动列表时,上部分的图片下面被盖...
实现视图视差滚动效果(parallax effect)。就是让多层背景以不同的速度移动,形成运动视差效果。具体效果是:视图分成两部分,上部分一般是图片,下部分一般是文字或其他控件。当手指往下拉动视图时,上部分的...
来源:github/ELHeaderViewLicence:MIT作者:...滑动列表时,列表的Header View中的图片产生视差滚动效果(Parallax),并且文字会放大或者缩小,比一般的视差滚动效果更好。 小编注:感谢开发者@Gabrial-Zhou 。
在列表的第一行加上图片,当手指往下拉动列表时,第一行的图片下面的部分会显示出来,即所谓的parallax effect(所谓“视差滚动,Parallax Scrolling”就是让多层背景以不同的速度移动,形成运动视差 3D 效果)。...
利用UIScrollView实现功能强大的Parallax效果(视差滚动效果),使整个界面出现炫目的3D效果。 视图视差滚动效果(parallax effect)就是让多层背景以不同的速度移动,形成运动视差效果。 Code4App编译测试,...
您可以在以下位置找到这些部分的源代码: act-1 /图形和动画/图形act-1 /图形和动画/动画act-1 /图形和动画/滚动背景act-1 /图形和动画/视差 在每个目录中,通常会找到以下文件... snailbait....
来源:github/ESConveyorBeltLicence:MIT作者:Eduardo Scoz 可以很方便创建具有视差滚动(Prarallax)和动画效果的app新手指引页面。
演示了如何实现几种视觉效果: 动画路径跟踪黑白到彩色的转换,在向左滚动一排图像时使用(第一个图像以黑白开始并变为彩色) 固定滚动,用于在列表上下滚动时创建“堆叠的卡片”效果视差滚动,用于以与其他项目不同...
来源:github/SAParallaxViewCoLicence:MIT作者:szk-atmosphere SAParallaxViewControllerSwift是具有视差效果的滚动视图,在单元滚动的时候里面的图片会缓缓的移动。
实现具有视差滚动(Parallax Scroll)效果的滚动视图。所谓视差滚动,就是屏幕有两层滚动视图,两层滚动视图的滚动速度不一样,一般来说前面的滚动视图的滚动速度比底部的滚动视图的滚动速度要快,从而造成三维滚动...
具有UIScrollView子视图的视差效果 堆栈溢出问题22201729 与相关的Xcode项目和源代码答案。 指示: 建造。 跑步。 滚动。 参考: 关于堆栈溢出的问题 这个和其他答案发布在
遵循W3C标准,包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠
在这个例子里你将会学习到如何开发一个太空射击游戏! ... 如果你对于如何制作基于Cocos2d-x3.0的游戏完全...代码中还包含了视差滚动(parallax scrolling),预分配Node,加速计移动以及粒子系统的使用等方面的技术。
我们要感谢他们提供开放源代码的工具: 用于管理Poppers的Kickass库 依赖的轻量级JavaScript类,可用于快速创建以更有趣的方式显示数字数据的动画 轻巧,香草javascript视差库 -轻量级脚本,可动画化滚动以锚定...
我们要感谢他们提供开放源代码的工具: 用于管理Poppers的Kickass库 依赖的轻量级JavaScript类,可用于快速创建以更有趣的方式显示数字数据的动画 轻量级的香草javascript视差库 -一种轻量级脚本,可动画化滚动以...