HTML5电影多层背景视差特效代码下载


HTML5电影多层背景视差特效代码下载
HTML5电影多层背景视差特效代码下载以及电影多层、背景视差等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

<header class="header">
<h1>炫酷Apple TV多层背景视觉差特效 </h1>
<div class="wrapper">
  <div class="ad">
    <div class="layer light"></div>
    <div class="layer light light-2"></div>
    <div class="layer layer-1"></div>
    <div class="layer layer-2"></div>
    <div class="layer layer-3"></div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript">
		var $body = $('body');
		var WIDTH = $body.width();
		var HEIGHT = $body.height();
		var $ad = $('.ad');
		var $light = $ad.find('.light');
		var $layer1 = $ad.find('.layer-1');
		var $layer2 = $ad.find('.layer-2');
		var $layer3 = $ad.find('.layer-3');
		function moveAd(e) {
		  var xPer = e.clientX / WIDTH;
		  var yPer = e.clientY / HEIGHT;
		  var rotateX = 5 - (yPer * 10);
		  var rotateY = -5 + (xPer * 10);
		  $ad.css({
		    transform: 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) '
		  });
		  var translateX = -5 + (xPer * 10);
		  var translateY = -5 + (yPer * 10);
		  $layer2.css({
		    transform: 'scale(.7) translateX(' + translateX + 'px) translateY(' + translateY + 'px)'
		  });
		  $layer3.css({
		    transform: 'scale(.7) translateX(' + (translateX * 2) + 'px) translateY(' + (translateY * 2) + 'px)'
		  });
		  var lightX = 800 - (xPer * 1600);
		  var lightY = 300 - (yPer * 600);
		  $light.css({
		    transform: 'translateX(' + lightX + 'px) translateY(' + lightY + 'px)'
		  });
		}
		$body.on('mousemove', moveAd);
	</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章