所以我发现了一个非常酷的网络结构,我希望在http://www.nextendweb.com/demo/smartslider2/的某个网站上实现。当用户向下滚动页面时,设置齿轮箱会旋转。
使用Transform:Matrix函数完成。我会发布元素的代码块,但我似乎无法找到它背后的JS。这不是我的网站,所以我显然只能访问前端。
HTML
<div class="cog cog2" style="transform: matrix(-0.68823, 0.72548, -0.72548, -0.68823, 0, 0);"></div>
CSS
#technicaldetails .cog {
background: url(images/bigcog.png) no-repeat 0 0;
width: 502px;
height: 476px;
position: absolute;
}
有问题的元素位于带有Id的cog1&amp;的div中。 cog2如果您在网页上找到它时遇到问题。
任何人都可以指导我从前端找到这个元素背后的JS吗?我尝试检查并查看来源......
答案 0 :(得分:0)
也许这个网站很有用:http://croberts.me/2013/02/16/howto-rotating-gears-when-user-scrolls/
theres js,html和codepen示例
答案 1 :(得分:0)
该网站使用来自http://www.greensock.com的名为“TweenMax”的JavaScript插件,该插件是其“GreenSock动画平台(GSAP)”产品的一部分。
用法很简单。例如:
TweenMax.to("#technicaldetails .cog2",1,{rotation:"-=20"});