通过滚动网页而展示出动画效果的设计是怎么来的？
时间：2024-02-15 08:00:01 | 来源：网站运营
时间：2024-02-15 08:00:01 来源：网站运营
通过滚动网页而展示出动画效果的设计是怎么来的？：视差滚动——视觉滚动落差技术。通常建议设计师构思好前台实现效果，并且具有一定的前台能力去实现自己的想法。
摘取一个故事的前两段来说一下视差滚动这个东西吧~
-----------------------------------我是分割线------------------------------------
故事说起在一个冰冷幽暗的夜晚上，我正思考的十分重要的人生问题，这周末该去那里happy好呢？是宅在家里好呢，或者宅在家里好呢，还是宅在家里好呢？这时，万年隐身的QQ竟然浮起浅色聊天框，我去！不得了，居然是女神主动联系我，女神一定是因为我俊朗的五官，185的模特身材而深深地迷恋上我了，呵呵呵呵呵呵。
“诶，X，你在干嘛呢？”
“没啊，在思考人生。” 难道这是要约我的节奏吗？在妹子前必须保持冷静。
“那个这周我要搞一个游戏宣传的页面，设计师说用【视差滚动】的效果，你能做个demo页给我看看？”
。。。。。。。。。没事！虽然跟我预想有点出入，但女神这是在考验我！
【定义】所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了
【视差滚动原理一】background-attachment: fixed || scroll || local默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。
很快地我就做出了一个demo出来，还特意配上几张优雅的图片和极富内涵的词句，女神一定会因为我的文采而爱上我的，而且，那些看似简单的“我是内容”不断重复，其实只要细心就会发现里面隐藏着我的表白，情商如此之高的女神，一定会发现，然后我们就可以幸福的在一起，在爱情的滋润下，我很快就能升职加薪，当上总经理，出任CEO，赢取白富美，走上人生巅峰。哈哈哈哈哈哈哈哈，诶？好像不用赢取白富美，那就挑战白富美。
demo1：视差滚动原理一
“咦，怎么是静态的，谭伟X，能不能帮我做个会动的那种的视差滚动，麻烦了么么哒~”
。。。。。。居然完全没有留意到我溢出的文采和隐藏的表白。。。。。没事！虽然跟我预想有点出入，但女神这是在考验我！
【视差滚动原理二】女神想要些更加丰富的效果，也对，像我这么内涵有档次的程序员，当然要来写非常酷的动画效果。
在原理的demo1的基础上，我在scroll事件上添加一些动画事件。
视差滚动的表现方式非常多，滚动到页面某个值后会触发一个CSS3动画，这也是众多视差滚动中常见的一种。
demo2：
视差滚动原理(这个Demo使用了CSS3动画，请使用现代浏览器查看)
接下来的情节请戳下面的链接：
视差滚动的爱情故事
目前国内运用的比较好的网站介绍一下：
网易手机将军令QQ浏览器官网_轻快上网 瞬间开启
以上
在线咨询
