视差滚动Parallax

来源:互联网 发布:网络词香菇是什么意思 编辑:程序博客网 时间:2024/05/16 06:27

参考资料:
1.https://www.youtube.com/watch?v=STwoa-9jxi0
2.图片都来自 https://www.instagram.com/vsco/

demo点这里: https://codepen.io/GitKou/pen/rLYvkA
这里写图片描述

主要几点:
1. background-attachment: fixed;
2. 改变 background-position 或 translateY
3

$(window).scroll(function() {    var wScroll = $(this).scrollTop();}

比较好理解,,不想多解释,就是利用滚动速度不同,造成视差

0 0
原创粉丝点击