视差动画素材-ppt没有视差主题

先说说什么是视差。

视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。一般把网页解剖为:背景层、内容层和悬浮层(贴图层)。

当滚动鼠标滚轮的时候,各图层以不同速度移动,形成视差的效果。这就是时差滚动的大致原理。

原理是这样,但落实到技术细节上时,实现的方法却各种各样。

我个人大致归纳了一下:

1、以 “页面滚动条” 作为 “视差动画进度条” 的;

2、以 “滚轮刻度” 当作 “动画帧度” 去播放动画的(或者直接称为“隐藏进度条”);

3、鉴听mousewheel事件,事件被触发即播放动画,实现“翻页”效果;

下面的回答,均以上述1类的实现方式为基准。

为什么是1类呢?因为它很直观,和我们日常接触到的视频播放器是一样的:

(页面滚动条 等同于 播放器进度条)

下面,以Every Last Drop这个页面做为分析对象,去回答题主的问题。

做滚动网页的时候,是怎么实现页面的翻页?首先,根据页面动画所需的分镜,去等比划分进度条。

例如:共有11个分镜,则分镜大致可以划分为:0%、10%、20%、30% .... 100%

但需要注意的是,整个滚动过程实际分为两个部分:分镜切换 和 分镜动画。

我们要预先划分好他们的比例,如:每一个分镜,2%的进度用于分镜切换,7%的进度用于分镜动画。

则进度大致可以划分为:

------------------------------------------

0%(初始,分镜1)

↓

(消耗2%用于切换分镜)

↓

2%(完全进入分镜2)

↓

(消耗8%用于分镜动画的播放)

↓

10%(分镜2动画播放完毕)

↓

(消耗2%用于切换分镜)

↓

12%(完全进入分镜3)

↓

(略)

------------------------------------------

按照上面的划分,当进度条滚动到10%的时候,就要开始进行分镜2到分镜3的切换,也就是所谓的翻页。当滚动到12%时,翻页结束。其他分镜如此类推。

(如果题主想问的是技术实现细节,估计要失望了!)

在做时间轴的时候,一般都要调用别人的js库。那么这个滚动页面,是不是也有一个js库?

随便在google搜一下,就搜到很多关于视差滚动插件的文章:10个优秀视差滚动插件

这里补充一点:做视差滚动页面绝对是体力活。

本着我为人人的分享精神,还是推荐一个我觉得好用凑合好用的时差滚动库:

Jarallax(Welcome to Jarallax)

设计思路清晰,API设计也很直观。依赖于jQuery1.7的版本,再高的版本就不支持了哦!

另外,作者貌似已经没有维护了...

滚动时每层不同滚动速率的实现原理是什么?初中物理:单位时间相同,位移距离不同,速度也不同。

如何让滚动更加平滑?这个问题就太大了,能重新开一个问题了。

这边我就简单回答一下吧(不细谈前端技术层面的优化,如:DOM数量、页面渲染优化这些)。

开头处,我提到的三种实现分类,实际上是这样一个情况:

1类是最自由的,用户甚至可以直接调整进度条,实现“快进”。

在这种设计下,用户鼠标滚轮的最小刻度,就是动画的一帧。因为不同浏览器之间,鼠标滚轮的最小刻度是不一样的。这就导致了,在不同浏览器之间,页面滚动过程中,动画播放的帧率是有差异的。如果遇到奇葩浏览器,鼠标滚动的最小刻度很大,动画甚至会出现“掉帧”的情况。

解决方法很简单,一般采取增加页面长度的方式,来稀释鼠标滚轮的最小刻度。

但还是会有一些情况出现,如户快拖动进度条时,“掉帧”的情况难免还是会出现。

3类的实现,滚轮只是动画的触发按钮。当用户滚动了一下鼠标,之前设计好的动画就开始播放。当播放结束后,对滚动事件的监听,才会重新被激活。这种设计,弱化了交互,但提供了更优质的动画展现。因为动画的播放时间和帧率不是用户控制的,是事先代码所设定好的。

2类就不说了,介乎与1和3之间。

简单的说,鱼(流畅)与熊掌(操控性)不可得兼。

苹果公司 macOS 上的幻灯片制作软件 Keynote 是出色的演示工具,对于设计师来说,也能用它来展示网页设计稿。使用到的功能是非常拉风的【神奇移动】(Magic Move)。

先说说【神奇移动】在做普通幻灯片制作中的应用。所谓【神奇移动】,它是一种幻灯片之间切换的动画效果。 如果两张幻灯片中存在共同的某种元素——图片,文本框或其他,那么对其设置【神奇移动】后,它将会从第一张幻灯片中的位置平滑地移动到第二张幻灯片中的位置。因为它不是先消失再以某种方式出现,而是一直存在于显示屏上,故名为神奇移动。 如图1所示.

设置【神奇移动】的方法。按照上面的定义,制作的关键是两张幻灯片中那个相同的元素,才能有神奇移动的效果。「相同」,意味着它们属于同一个。比如对于文字,不是在第二张幻灯片中有那个相同的文本就叫存在相同的元素,而是复制第一张幻灯片中的那个文本,粘贴到第二张幻灯片中,这才叫「相同」。对于图片也是一个道理。就算在第二张幻灯片中该文本发生了大小、文字样式等格式上的变化,它们依然会被视为同一个元素,因为它是复制自第一张幻灯片。 如图2和图3.

将两张幻灯片中「相同的」元素摆放到你喜欢的位置后,点击制作好的幻灯片(是点击左侧列表的某张幻灯片,而不是幻灯片中的某个元素,因为【神奇移动】是页面切换的动画效果。如果你选中了某个元素,在右上方的【动画效果】里是找不到【神奇效果】的。 ),在右上角的操作面板中,可以看到三个按钮,分别是【格式】【动画效果】【文稿】,点击【动画效果】-【添加效果】,在列表中找到【神奇移动】。 如图4.

搭配上幻灯片上其他元素的切换效果,点击顶部操作栏的【播放】按钮就能看到神奇移动了。 如图5所示 (gif图片没有制作好,初始移动位置应为左上角。)

解释完了【神奇移动】,接下来要说说如何用它来制作「视差」的网页滚动效果。这里有了一个新的概念——「视差」,英文叫 Parallax,通俗地说,是指若在同一位置观察不同远近的移动物,它们的移动速度是不同的。比如我们坐在行驶中的动车里,看到远处的山和近处的房子,它们向后移动的速度并不相同。这个概念被应用到平面设计领域,就是指在浏览网页的过程中,某些元素出现和消失的速度不同。近年来,好多网站都出现了这样都设计。 如图6

要实现这样的效果,有很多原型设计软件都能够完成,比如 Principle、Flinto等。但是若利用 Keynote 中的【神奇移动】,能比较快捷地达到展示目的。

首先,要把设计稿从设计软件导入到 Keynote 中来。需要说明的是,没有插件能帮你直接导入,只能通过手动复制和粘贴逐一将设计搬到 Keynote 中。方便的是,你的设计稿中不论是文字、图片、「组」或甚至是画板,粘贴到 Keynote 中,都将被识别为图片,这样能方便你对其进行移动。

和上面移动文字的例子类似,要想达到滑动页面的效果,只要将前后两张幻灯片的元素都复制粘贴好(再复习一次,这样才能让 Keynote 明白它们是「相同」元素),将前一张的元素复制粘贴到后一张幻灯片并摆放到显示区域外的上边、后一张的元素复制粘贴到前一张并摆放到显示区域到下边。这样在播放的时候,有了【神奇移动】的加持,前一张幻灯片的内容就会向上移动离开画面,后一张幻灯片的内容从下到上进入显示屏,就像我们向上滑动网页一样。 如图7.

视差效果的表现是,随着页面的移动,页面上的元素有各自的移动速度。那么,只要通过设置不同元素在幻灯片外不同的垂直距离,那么它们神奇移动的速度就会不同。 移动快的元素摆放得离幻灯片近一点,移动慢的元素则摆放得远一点。 如图8.

逐一对每张幻灯片进行上述的设置,在播放的时候通过鼠标点击就能实现页面滚动的效果,并且带有视差效果。 如图6.

幻灯片视差主题如何设置的方法步骤如下:

1、点击【插入】-【图片】-导入图片素材。

2、【插入】-【文本框】-【绘制横排文本】-编辑文本-将文本放在页面中间。

3、【插入】-【形状】-【矩形】-绘制一个与PPT页面等大的矩形。

4、右键矩形-设置形状格式-纯色填充-颜色用吸管工具选择图片中存在的其中一种颜色-无线条。

5、缩小页面-将矩形移动到图片的下方-插入文本框-编辑文本。

6、按Ctrl分别点击矩形、两个文本框-右键将这三个元素组合在一起。

7、点击组合好的矩形-动画-添加直线路径动画-效果选项:上-与上一动画同时。

8、移动红色圆点,将矩形的停止点移动到刚好与图片重合。

9、点击矩形-点击动画刷-点击图片,将动画复制给图片-点击红色圆点,移动图片的停止点在图片的一半位置。

10、点击右下角的预览,就可以看到动画效果了。