首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
iFangcy_
掘友等级
Web
获得徽章 0
动态
文章
专栏
沸点
收藏集
关注
作品
赞
602
文章 601
沸点 1
赞
602
返回
|
搜索文章
赞
文章( 601 )
沸点( 1 )
Chenxin_nth
没事写点动画特效啥的
·
4年前
举报
#视差滚动特效
(据不可靠推测) 视差滚动特效第一次出现在2014年,如今我们在很多网站上都可以看到它的身影。它的原理是通过前景与背景移动速度的差别,营造出一种奇妙的视觉体验。视差滚动一般分为两种:一种是前景和背景都动,但是前景比背景动得快(见图1);还有一种是只有前景动,背景不动(见图2)。
第一种(图1)既可以通过js实现,也可以通过css 3d transform实现。js实现的兼容性比较好,css实现的性能比较好。
第二种(图2)主要通过background-attachment: fixed实现,比较简单。
图1的Demo+源码:
codepen.io
图2的Demo+源码:
codepen.io
扩展阅读:
keithclark.co.uk
pixelcog.github.io
展开
收起
查看大图
向左旋转
向右旋转
今天学到了
分享
评论
49
个人成就
文章被点赞
7,359
文章被阅读
1,438,098
掘力值
36,470
关注了
340
关注者
7,452
收藏集
71
关注标签
164
加入于
2016-11-18