如何将CSS动画与滚动条连接？

Question

我有一些垂直图像。 因此，当我滚动滚动条时，中心图像应与滚动条一起动画。 也就是说，窗口中的中心图像应像缩放效果一样变大。 这个怎么做？

示例： http ： //flashotaku.com/components/examples/carousel/carousel_ex10.html
在此示例中，边缘的图像被缩放。 但我需要缩放中心图像-像凸面一样完全相反。 这个怎么做？ 感谢你。

//code
.circle img {   
    width:150px;
    height:150px;
    transform:scale(1);
    -webkit-transform:scale(1);
    transition: all 1s ease;
}

Answer 1

我建议您使用jQuery .scollTop（）函数来获取垂直位置。

让我们简单地命名

var y;

因此，现在，如果您听滚动事件，则可以将y用作非常酷的动画。 在您的项目中，我会将y与应该放大图片的范围进行比较。 就像是：

if( circle.range.start < y < circle.range.end ) {
    //give circle the class to be scaled big
}

这不是工作代码。 抱歉! 我现在没有时间。 但是，也许它给了您自己解决问题的想法。

Answer 2

它应该尝试以下方法之一，而不是自己实施。

http://johnpolacek.github.io/scrollorama/