当我向下滚动Javascript时，我可以通过px更改元素px的宽度或任何其他样式吗？

Question

我有一个宽度为100px的div，我想在每个滚动步骤中将宽度减少1px，所以当我向下或向上滚动页面时，看起来好像div是动画的。所以当我向下滚动100步时，div消失了。我怎么能这样做？

Answer 1

使用几行jQuery的简单解决方案。

$(window).on('scroll', function(e){
     $('#box').css("width", 100-$(window).scrollTop());    
});

http://jsfiddle.net/vwrr6Lv1/1/

编辑：

如果您需要开始制作更高级的动画，我建议您查看支持CSS3转换和转换的jQuery Transit，例如

$(window).on('scroll', function(e){
    $('#box').transition({'perspective':'100px', 'rotateY': 100-$(window).scrollTop()}, 0);    
});

http://jsfiddle.net/vwrr6Lv1/3/

jQuery Transit是jQuery.animate的一个很好的扩展，它支持CSS3转换和转换。 http://ricostacruz.com/jquery.transit/

Answer 2

您可以使用skrollr.js在滚动时实现动画。但除此之外，你还可以添加animate.css，他们在你提到的网站中使用的视差效果