[分享]css3图层滑动背景色分前后

CSS3图层滑动背景色分前后，其实就是利用CSS3动画与zindex属性来实现页面背景色的渐变过渡。具体实现方法如下：/ 定义滑动过渡的时间和类型 / transition: background 1...

CSS3图层滑动背景色分前后，其实就是利用CSS3动画与z-index属性来实现页面背景色的渐变过渡。具体实现方法如下：

/* 定义滑动过渡的时间和类型 */
transition: background 1s ease-in-out;
/* 定义前后两个容器的层级关系 */
z-index: 1; 

其中，我们需要定义两个不同的容器，一个代表前景色，一个代表背景色。代码如下：

/* 定义前景色容器 */
.front {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: #fff;
}
/* 定义背景色容器 */
.back {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: #000;
} 

我们在页面中需要使用JavaScript或jQuery来控制这两个容器的显示和隐藏，从而实现过渡效果。代码如下：

$(document).ready(function() {
  /* 隐藏背景色容器 */
  $('.back').hide();
  /* 当前窗口滚动时触发事件 */
  $(window).scroll(function() {
    /* 获取当前窗口滚动的偏移量 */
    var scrollTop = $(window).scrollTop();
    /* 如果滚动偏移量大于某个值，则显示背景色容器，同时隐藏前景色容器 */
    if (scrollTop > 100) {
      $('.back').fadeIn();
      $('.front').fadeOut();
    /* 否则，显示前景色容器，同时隐藏背景色容器 */
    } else {
      $('.front').fadeIn();
      $('.back').fadeOut();
    }
  });
}); 

通过这段代码的控制，在页面滚动的过程中，会触发前景色和背景色容器的切换，实现过渡效果。