作者girl2006243 (girl2006243)
看板Web_Design
标题[问题] 七点半的太空人动画效果
时间Wed Feb 26 02:30:09 2014
第一次发文 排版不好真对不起
想要请问的是七点半的太空人
http://first-launch.com 这个网站
里面小剪刀的动画效果
用chrome F12後看到他在背景和文字的部分用了skrollr.js
这个部分有自己试过应该是没有问题了
但是小剪刀类似逐隔动画的效果怎麽样也搞不懂
爬文有看到年初也有人问过相似的问题
自己研究後也认为它应该是把每格动画都存在一张图
利用background-position的改变来做成动画效果
不过就像板上那篇文一样 看不出来他是怎麽写的
上网翻了很多网站後找到了这个
http://jsfiddle.net/cc5712/es5zW
但是它无法像七点半的太空人一样往上滚的时候动画会倒退
不管往上还是往下滚 动画都是往前走不会後退(不知道这样讲是不是很难懂)
大概是scroll事件无法设定往上或往下吧?
後来又找到mousewheel.js来尝试
可是做出来的成果变成只能用滑鼠滚轮控制
如果按网页上的滚轴就毫无反应
想请问各位高手有没有什麽方法可以做出用滚轴控制的动画呢?
或是应该要去专研哪个部分
因为对网页设计真的是菜鸟 只会初步的html css
最近有自己看一点javascript 和 JQuery这样
希望各位愿意帮忙 真的很谢谢!!
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 111.243.16.94
1F：推 wlwillwell:不是很确定正确的执行方式，不过可以提供几个关键字~ 02/27 11:05
2F：→ wlwillwell:视差滚动(Parallax Scrolling)、animation.css 02/27 11:07
3F：→ wlwillwell:另外里头有些类似逐格动画的效果，其实是一张超大背景 02/27 11:13
4F：→ wlwillwell:搭配视差滚动，设定background-position做出来的 02/27 11:13
6F：→ girl2006243:我有试过用移动background-position的方式 但还是无法 02/27 19:42
7F：→ girl2006243:用滚轴控制 更别说还要设定滚轴到哪的时候开始动了.. 02/27 19:43