——YC，你学到了吗？——学到了学到了

Posted 2020-08-21

又是周末了，想着开始我的每周一切（每周做一次从切图到静态网页布局的练习）任务吧，无意间看了看别人的页面，发现——我去，这个动画挺有意思的啊，怎么实现的？然后翻代码+搜索，啊，原来是插件啊~给我的也用上！

animate.css，可实现多种动画功能！

使用方法见http://www.jq22.com/jquery-info819

然后我又发现，动画是实现了，可是一加载页面，从上到下动画一股脑全完事了，不对啊，别人是滚到到哪动画在哪开始，再找原因！这里有个wow.js是干嘛的？一查——

wow.js，依赖 animate.css，可实现滚动动画！而且很轻量级！

使用方法见http://www.dowebok.com/131.html

看来是不能闭门造车啊，要学的东西还是很多的，而且上面这两个都是支持自己定制的。

后来又想，我这个人主页做的是不是有点简陋啊，不能因为喜欢紫色，就整个页面全是紫色啊，来个图片是不是好点？OK，加个图片！可是。。页面一缩小，图片不能覆盖整个浏览器窗口了，怎么办？这么简单的问题，肯定得找CSS啊，原来：

background-size: cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。要的就是这个！

W3school要多看啊！

http://www.w3school.com.cn/cssref/pr_background-size.asp

后来给女朋友看了看，说你可不可以让这个背景图固定，不跟着滚动啊，我一想，这效果倒是经常见到，自己还没用过呢，查！

background-attachment: fixed;当页面的其余部分滚动时，背景图像不会移动。GET！

把这个和背景图放在body里，妥妥的的实现这个要求！

多学多看多想！前端还是挺有意思的！继续学习！

我的简陋主页：https://zhangcuizc.github.io/