html - 使用 CSS3 触发图像显示

Question

我是一个 css3 过渡的菜鸟，我想在滚动位置（或可见时）触发一个图像，css3 动画从不透明度：O 到 1。我在这里有一个很好的例子：http: //bonvalletromain.com /项目/雪铁龙创意奖

我想对图像做同样的事情并在滚动位置触发它们。

任何想法 ？

Answer 1

我认为您必须使用某种 javascript 来触发事件。这是一个简单的解决方案，它使用 jQuery 来监听窗口上的滚动事件：

$(window).scroll(function(){
  if ($(document).height() - $(window).height() < 20)
  {        
     $('#DivWithImage').fadeIn();
  }
}); 

（以上基于滚动显示内容的jQuery插件）。

您可以修改上述内容以将类附加到 div，如下所示：http ://www.impressivewebs.com/css3-transitions-javascript/

因此使用 css3 制作动画，但如果您已经在使用 jQuery，为什么还要麻烦呢？