获得徽章 0
赞了这篇文章
赞了这篇沸点
#视差滚动特效
(据不可靠推测) 视差滚动特效第一次出现在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
(据不可靠推测) 视差滚动特效第一次出现在2014年，如今我们在很多网站上都可以看到它的身影。它的原理是通过前景与背景移动速度的差别，营造出一种奇妙的视觉体验。视差滚动一般分为两种：一种是前景和背景都动，但是前景比背景动得快（见图1）；还有一种是只有前景动，背景不动（见图2）。
第一种（图1）既可以通过js实现，也可以通过css 3d transform实现。js实现的兼容性比较好，css实现的性能比较好。
第二种（图2）主要通过background-attachment: fixed实现，比较简单。
图1的Demo+源码：
codepen.io图2的Demo+源码：
codepen.io扩展阅读：
keithclark.co.ukpixelcog.github.io
展开
评论
49
赞了这篇沸点
【阴阳】加载动画 #svg
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)
展开
3
44
赞了这篇沸点
1
35
赞了这篇沸点
Notes 是一个个人笔记系统，让自己快速查阅，大家可以访问查看效果，如果觉的不错，可以 star GitHub 项目，然后修改里面的文章内容为自己的，就可以发布网上供自己查阅了（目前项目不断优化中，以后会越来越方便）
notes地址：notes.itzkp.com
GitHub地址：github.com
notes地址：
notes.itzkp.comGitHub地址：
github.com
展开
27
65
赞了这篇沸点
learnGitBranching：一个可视化学习 git 的网站 learngitbranching.js.org，虽然项目有些悠久，如果学习 git 的话可以来玩下。GitHub 地址：github.com
learngitbranching.js.org，虽然项目有些悠久，如果学习 git 的话可以来玩下。GitHub 地址：github.com
4
178
赞了这篇沸点
赞了这篇沸点
关注了标签 
微信小程序
微信小程序