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

滚动时CSS动画元素

2 个答案: