首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
Chenxin_nth
没事写点动画特效啥的
·
4年前
关注
屏蔽作者: Chenxin_nth
举报
#视差滚动特效
(据不可靠推测) 视差滚动特效第一次出现在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
相关推荐
一周是一年的2%
30 赞 ·
22 评论
第四次阳了, 但是这一次公司是不会管你死活,该完成任务还是要完成,该上班还是要上班,(对,即便是把其他同事给感染了,也无所谓);就是一句话,“管你生不生病,我只要结果”(上面的意思),也就是说,在老板眼里,我们就是机器人,随时可以更换那种!
, 同遭遇的掘友们,来发牢骚吧
31 赞 ·
115 评论
先签2000天再说
8 赞 ·
8 评论
相关推荐
一周是一年的2%
30 赞 ·
22 评论
第四次阳了, 但是这一次公司是不会管你死活,该完成任务还是要完成,该上班还是要上班,(对,即便是把其他同事给感染了,也无所谓);就是一句话,“管你生不生病,我只要结果”(上面的意思),也就是说,在老板眼里,我们就是机器人,随时可以更换那种!
, 同遭遇的掘友们,来发牢骚吧
31 赞 ·
115 评论
先签2000天再说
8 赞 ·
8 评论