十分钟零代码实现HTML5视差滚动特效

2017-09-20 09:39 来源/作者:未知 己被围观 190 次

视差滚动是最近出现的一个比较火的站点视觉效果,适用于做整站(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目录下找到,包括:

  1. bird-forward-back.png
  2. cloud.png
  3. hill-with-windmill.png
  4. sky1.png
  5. hill2.png

教程

本教程不会逐步来介绍如何实现上述动画,在上述动画中用到的一些技巧在之前教程中也有介绍过,比如如何使用SpriteSheet来生成逐帧动画 。

一、滚动的背景

标签(TAG) HTML5(2)滚动(1)

猜你喜欢