Question

一旦页面向下滚动足以让它可见，我想要一个元素来做一个CSS3动画，我想知道是否有任何方法可以实现这一点。任何涉及JavaScript或CSS的东西都可以。我做了很多Google搜索和Stackoverflow搜索，但找不到我需要的内容。

Answer 1

这取决于你想要具体做什么。我会看看这些资源：

http://daneden.github.io/animate.css/

http://www.w3schools.com/css/css3_animations.asp

http://css-tricks.com/almanac/properties/a/animation/

Answer 2

根据布局的复杂程度，它可以像查找滚动位置，窗口高度以及元素在页面上的位置一样简单。

function scrollEvent() {
  var el = document.getElementsByTagName('a')[0];
  var body = document.getElementsByTagName('body')[0];
  var posY = (window.innerHeight + body.scrollTop) - el.offsetTop;
  var onScreen = (posY > 0 && posY < window.innerHeight) ? true : false;
}

window.onscroll = scrollEvent;

如果您担心水平定位，请使用相同的技术。

Answer 3

将CSS3动画样式放在一个类中，但在将其完全滚动到视图中之前，不要将它分配给元素。

假设您的元素的id为sprite，这应该可以帮到您：

<style>
  .animate {
    //CSS3 animation style
  }
</style>

window.onscroll= function() {
  var sprite = document.getElementById('sprite');
  if(sprite.getBoundingClientRect().top>=0 && sprite.getBoundingClientRect().bottom<=window.innerHeight) {
    sprite.className= 'animate';
  }
}

我怎么知道HTML元素是否在屏幕上呈现？

3 个答案: