扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
32909人学习
百度钱包:http://1.baidu.com/?invite_code=KMC5HS3E&qq-pf-to=pcqq.group
想知道 Js 是怎么样写的!然后自己仿作一个!
闭关修行中......
最好的学习方式还是打开开发者工具,然后一边交互一边观察 dom 的变化
记得有一篇文章提过,这种设计方式是违反网页设计初衷,我个人也觉得有点这种感觉,本来是自由滚动的却被死死地固定了。偶尔用几个还行,用多了真的不是一种好趋势。
说了这么多,给你个DEMO吧。以前找到的~
http://www.thepetedesign.com/demos/onepage_scroll_demo.html#
如果没错的话就是这种效果~
用純 CSS 實現了一個:https://bumfo.github.io/parallax.html
鑑於使用了 position: sticky,目前只支持 Firefox/Safari。其它瀏覽器需要 JS 的 polyfill。
polyfill 如下:
var Sticky = function() { var s = [], support = (function testSupport() { var p = document.createElement("p"); var st = ["sticky", "-webkit-sticky"]; return st.some(function(x) { p.style.position = x; return p.style.position === x; }); }()); function Sticky(o) { var self = this; s.push(self); self[0] = o; var placeholder = document.createElement("p"); self.placeholder = placeholder; placeholder.classList.add("placeholder"); self.fixed = false; self.posit = posit; function posit() { var rect; if (self.fixed) { rect = placeholder.getBoundingClientRect(); self.staticTop = rect.top + window.pageYOffset; } else { rect = o.getBoundingClientRect(); self.staticTop = rect.top + window.pageYOffset; } } posit(); } Sticky.prototype.stick = function() { if (support) return; var o = this[0], top = this.staticTop; var placeholder = this.placeholder, fixed = this.fixed; console.log(top); if (top > window.pageYOffset && fixed) { placeholder.parentNode.removeChild(placeholder); o.classList.remove("sticky"); fixed = false; } else if (top <= window.pageYOffset && !fixed) { o.parentNode.insertBefore(placeholder, o); o.classList.add("sticky"); fixed = true; } this.fixed = fixed; }; if (!support) { window.addEventListener("scroll", function() { s.forEach(function(x) { x.stick(); }); }); window.addEventListener("resize", function() { s.forEach(function(x) { x.posit(); }); s.forEach(function(x) { x.stick(); }); }); } else { console.log("support"); } return Sticky; }();
百度最近好喜欢用fullpage.js,一般会配合animate.css使用
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部
最好的学习方式还是打开开发者工具,然后一边交互一边观察 dom 的变化
记得有一篇文章提过,这种设计方式是违反网页设计初衷,我个人也觉得有点这种感觉,本来是自由滚动的却被死死地固定了。偶尔用几个还行,用多了真的不是一种好趋势。
说了这么多,给你个DEMO吧。以前找到的~
http://www.thepetedesign.com/demos/onepage_scroll_demo.html#
用純 CSS 實現了一個:https://bumfo.github.io/parallax.html
鑑於使用了 position: sticky,目前只支持 Firefox/Safari。其它瀏覽器需要 JS 的 polyfill。
polyfill 如下:
百度最近好喜欢用fullpage.js,一般会配合animate.css使用