jquery根据图像位置变换阴影角度js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery根据图像位置变换阴影角度js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>jquery����ͼ��λ�ñ任��Ӱ�Ƕ�</title>
  <link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
  <div id="demo-bar" class="bottom right"></div>
  <div class="container">
    <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>

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

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

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

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

  </div>


  <!-- Javascript -->
  <script src="js/jquery.min.js"></script>
  <script src="js/init.js"></script>
  <script> 
    $(function(){
      $("#demo-bar").load("../demo-bar.html"); 
    });
  </script> 
</body>
</html>

JS代码(init.js):

(function($){
	$(function(){
	// Parallax Scripts 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();
}
);
}
);
	// end of document ready}
)(jQuery);
	// end of jQuery name space

CSS代码(style.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* CSS RESET DONE */
body{color:#fff;margin:0 auto;font:1em/1.3em Montserrat,Helvetica,sans-serif;background-color:#ccc;}
body,html{height:100%;}
.clearfix{clear:both;}
.container{width:90%;height:100%;padding:20px 5%;text-align:center;}
h1{margin:40px 0;font-size:40px;line-height:40px;font-weight:bold;text-shadow:0px 1px 0 rgba(0,0,0,.3);-webkit-font-smoothing:antialiased;}
h2{font-size:28px;color:#fff;font-weight:normal;text-align:left;margin-bottom:20px;}
a{text-align:left;text-decoration:none;color:#fff;margin:0 10px;}
p{line-height:32px;padding:0 0 40px 0;text-align:left;}
i.fa-bars{margin-top:2px;font-size:28px;float:left;}
/* Button styles */
.btn{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;display:inline-block;overflow:hidden;height:50px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;line-height:50px;padding:0 30px;font-size:14px;-webkit-box-shadow:0 3px 0 0 #8756a5;box-shadow:0 3px 0 0 #8756a5;background-color:#a870cc;}
.btn:active,.btn.active{top:2px;-webkit-box-shadow:0 1px 0 0 #8756a5;box-shadow:0 1px 0 0 #8756a5;}
.btn-small{padding:0 20px;font-size:10px;height:40px;line-height:40px;}
/* Parallax Flat Shadow */
.grid-container{position:relative;display:inline-block;width:40%;height:600px;padding:20px;margin:10px;overflow:hidden;}
/* colors */
 .grid-container.yellow{background-color:#ffe875;}
.grid-container.green{background-color:#90e562;}
.grid-container.blue{background-color:#7fc9ff;}
.grid-container.red{background-color:#fb887c;}
.grid-container.purple{background-color:#d89bff;}
.grid-container.orange{background-color:#ffa866;}
@media (max-width:860px){.grid-container{width:90%;}
}
.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%;}

附件:下载该文件资源,减少时间成本(增值服务)