[分享]css上下滑动动画效果

在许多网页设计中，动画效果已经成为标配之一。上下滑动动画是其中一种很受欢迎的动画效果。通过使用 CSS 和 jQuery，我们可以轻松地创建出这种动画效果。html { height: 100; } ...

在许多网页设计中，动画效果已经成为标配之一。上下滑动动画是其中一种很受欢迎的动画效果。通过使用 CSS 和 jQuery，我们可以轻松地创建出这种动画效果。

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
}

#container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-size: 2em;
  line-height: 2em;
  -webkit-transition: top 0.4s ease-in-out;
  transition: top 0.4s ease-in-out;
}

#content2 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #e74c3c;
  color: #fff;
  text-align: center;
  font-size: 2em;
  line-height: 2em;
  -webkit-transition: top 0.4s ease-in-out;
  transition: top 0.4s ease-in-out;
}

.showOne {
  top: -50%;
}

.showTwo {
  top: -100%;
} 

上面的代码中包含了要使用上下滑动动画效果所需的所有元素和属性。 html 元素和 body 元素都设置了 100% 的高度，这是为了让页面有足够的高度去滚动。 #container 元素是一个包含了两个背景色不同的子元素 #content 和 #content2 的相对定位元素。 这两个子元素都有一个 50% 的高度，这样它们就能够完全覆盖整个 #container 元素的高度。

接下来，我们为这两个子元素添加一个过渡效果。我们为它们的 top 值添加了一个过渡效果，过渡时间为 0.4 秒以及一个淡入淡出的缓动函数。这个过渡效果将会在我们切换两个子元素的时候发生。

现在我们就可以在 JavaScript 中向下滚动页面并设置相应的样式来触发过渡效果了。 在上面的代码中，通过添加 class showOne 和 showTwo 来触发此效果。 在 jQuery 中，我们只需为 ID 为 container 的元素添加事件处理程序：

$(document).ready(function () {
  setInterval(function () {
    $("#container > #content").toggleClass("showOne");
    $("#container > #content2").toggleClass("showTwo");
  }, 4000);
}); 

在上面的 jQuery 代码中，我们使用 setInterval 方法来定时调用一个函数，在这个函数中我们使用 toggleClass 方法来为两个子元素切换 showOne 和 showTwo 类。这样，相应的动画效果就会发生。

在实现了上述的代码之后，您的网页上下滑动动画效果就已经完成了。