Skip to content

H5 单页面华丽前端文字特效,进入网页后显示一段特别的文字,类似于贺卡的功能。

License

Notifications You must be signed in to change notification settings

sanxincao/wordsdance

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

wordsdance

HTML5 单页面展示的华丽文字特效,CSS3 + JS 实现。

可用于给喜欢的人显示一些自己想说的话 -.-

创意来源:h2y/idea/#5

预览

请点击链接:Github Page

图片预览

用法

单页面 web 应用,地址:https://h2y.github.io/wordsdance/i.html#HASH

通过链接末尾的 HASH 来设定信息显示的文字内容,以及其他设置项:

Key Value
>=0 的整数 依次要显示的句子内容
speed 动画过场速度:fast / normal / slow,默认 normal
time 每句话默认的显示时间,默认为 5000(ms)
timeN 特别设置编号为 N 的句子的显示时间
size 每个字默认的 font-size,默认为 4(rem)
sizeN 特别设置编号为 N 的句子中每个字的大小

例子:

实现

并没有使用 Canvas,也并没有使用 SVG。页面中的每个字其实都是一个 DOM,可以在网页中摁 Ctrl+A 试试~

是通过 CSS3 的 transition / transform 两个属性魔法般的实现这样的特效。

transition 设定好动画的持续时间,然后用 JS 修改 transform 为想要达到的特效,中间的补间动画都会由浏览器自动渲染好。

简直不能再畅快了!(ฅ´ω`ฅ)

About

H5 单页面华丽前端文字特效,进入网页后显示一段特别的文字,类似于贺卡的功能。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 86.9%
  • CSS 7.0%
  • HTML 6.1%