jquery动态阴影

 查看演示  website  立即下载

html

这是内容面板的基本结构。

<div class="grid-container blue">
  <div class="shadow-box">
    <div class="content">
    </div>
    <div class="shadows">
      <div class="shadow top"></div>
      <div class="shadow bottom"></div>
    </div>
  </div>
</div>

滚动阴影样式

这是css的影子。创建滚动阴影效果2阴影元素,一个定位框右上角的内容,和其他定位在左下角。他们一起grid-container类动画,他们是有界的。

.shadow-box {
display: block;
position: relative;
z-index: 1;
width: 300px;
height: 400px;
}
.shadow-box .content {
  position: relative;
  z-index: 1;
  width: inherit;
  height: inherit;
  background-color: #fff;
}
 
.shadow-box .shadows {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
  .shadow-box .shadow {
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 200%;
    background-color: #444;
 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .shadow-box .shadow.top {
    right: 0;
    top: 0;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }
  .shadow-box .shadow.bottom {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    right: 0;
    top: 100%;
  }

jquery

滚动角计算影子。基本上,每个shadow-box将计算百分比多少滚动在当前视图的窗口。你可以改变影子开始的角度,一旦你完全滚动过去它将结束,通过改变

startingRotate和endingRotate变量。
// scrolling shadow effect
function updateParallax() {
  $(".grid-container").each(function () {
 
    var height = $(this).height();
    var bottom = $(this).offset().top + height;
    var top = $(this).offset().top;
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop() + windowHeight;
    var fromTop = $(window).scrollTop() - top; 
 
    if ((bottom > $(window).scrollTop()) && (top < scrollTop)) {             
      var percent = ((scrollTop - top) / (height + windowHeight));
      var startingRotate = -80; // Starting angle of shadow
      var endingRotate = -15; // Ending angle of shadow
      var shadowRotate =  (startingRotate - endingRotate) * (1 - percent) + endingRotate;
      if (shadowRotate < startingRotate) {
        shadowRotate = startingRotate
      }
      else if (shadowRotate > 0) {
        shadowRotate = 0;
      }
      $(this).find('.shadow-box .shadow').css({'-webkit-transform': 'rotate(' + shadowRotate + 'deg)' });
      $(this).find('.shadow-box .shadow').css({'-moz-transform': 'rotate(' + shadowRotate + 'deg)' });
      $(this).find('.shadow-box .shadow').css({'-ms-transform': 'rotate(' + shadowRotate + 'deg)' });
      $(this).find('.shadow-box .shadow').css({'-o-transform': 'rotate(' + shadowRotate + 'deg)' });
      $(this).find('.shadow-box .shadow').css({'transform': 'rotate(' + shadowRotate + 'deg)' });
    }
 
  });
}
updateParallax();
 
$(window).scroll(function() {
  updateParallax();
});

PREVIOUS:
NEXT:
jquery弹出层(弹窗)插件SexyLightBox
jquery 360度旋转插件Rollerblade