滚动时CSS动画元素

Question

我正在寻找一种方法来使div中的元素具有动画效果。

<div id="outer" style="overflow: hidden;">
<div id="element"><img src="images/bird.png" /></div>
</div>

“元素”应该来自顶部，并通过向下滚动进入“外部”。当我向上滚动时，“元素”应该会移出“外部”。

“元素”应该通过在相应的方向上滚动来飞进飞出。

有没有人给我一个提示，我如何只使用css而不使用jquery来做到这一点？

Answer 1

试试这样的东西

$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
    // apply effects and animations
}
});

有关更多信息，请关注http://www.sitepoint.com/introduction-jquery-scroll-based-animations/

Answer 2

我已经根据我认为你想要的东西做了一支笔。如果我误解了，请告诉我。

我在一个容器上设置了一个固定背景位置的背景图像。这创造了一个很好的“电梯”效果。

.hidden-element {
  background-image: url('https://stocksnap.io/img-thumbs/960w/994D92A0ED.jpg');
  background-attachment: fixed;
  background-position: 200px -300px;
  background-repeat: no-repeat;
  float: right;
  margin-top: 400px;
  width: 300px;
  height: 500px;
}

尝试图像大小和位置，以获得隐藏和显示在滚动上的东西。

http://codepen.io/alexmccabe/pen/RNgXXY