仿锤子手机的3D画廊banner的效果jQueryHover3d

  •   
  • 5508
  • jQuery
  • 37
  • super_dodo
  • 2016/12/01

最近因为老罗的情怀情不自禁的去关注了一下锤子手机。打开官网之后 http://www.smartisan.com/#/ 被锤子手机的画廊的3D效果深深的吸引了。所以想借鉴学习一下，网上搜罗一下，整理了一下写了一个demo如下，欢迎各位指点。

此demo使用的是jQuery Hover3d的js框架，需要jquery的支持。

可直接查看效果以及下载该demo（有美女哦）

仿锤子手机的3D画廊的效果DEMO及下载

hover3d.gif

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery Hover3d-仿锤子手机的3D画廊的效果</title>
	<style type="text/css">
		* {box-sizing:border-box; }
		*:before, *:after {box-sizing:border-box; }
		body {font-family:"Microsoft Yahei";line-height:1.8;color:#666;background:#333;}
		a{text-decoration:none;color:#9999ff; }

		#demo{width:1000px;margin:0 auto;}
		.project {width:60%;margin:20px;}
		.project2 {width:60%;margin:20px;}
		.project_image {display:block;position:relative; }
		.project_image img {width:100%;max-width:100%;height:auto;display:block; }
		.project_image:after {content:" ";width:100%;height:100%;position:absolute;left:0;top:0;background:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));transition:opacity .3s ease;opacity:0; }
		.project_card {position:relative;will-change:transform;transition:box-shadow .3s ease;box-shadow:0 10px 30px transparent; }
		.project_card.hover-in {transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out; }
		.project_card.hover-out {transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in;transition:transform .2s ease-in, -webkit-transform .2s ease-in; }
		.project:hover .project_card {box-shadow:0 10px 30px rgba(0, 0, 0, 0.4); }
		.project:hover .project_image:after {opacity:1; }
		.project:hover .project_detail {border-width:10px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.4); }
		.project:hover .project_title, .project:hover .project_category {-webkit-transform:translateY(0) scale(1);-ms-transform:translateY(0) scale(1);transform:translateY(0) scale(1);opacity:1; }
		.project_detail {position:absolute;left:30px;right:30px;top:30px;bottom:30px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;pointer-events:none;-webkit-transform:translateZ(30px);transform:translateZ(30px);border:0 solid #00BCD4;transition:border .4s ease; }
		.project_title {margin:0 0 10px;font-size:36px;font-weight:700;transition:.4s ease;opacity:0;-webkit-transform:translateY(40px) scale(0);-ms-transform:translateY(40px) scale(0);transform:translateY(40px) scale(0);will-change:transform; }
		.project_title a {color:white; }
		.project_category {opacity:0;transition:.4s ease;transition-delay:.1s;-webkit-transform:translateY(40px) scale(0);-ms-transform:translateY(40px) scale(0);transform:translateY(40px) scale(0);will-change:transform; }
		.project_category a {color:rgba(255, 255, 255, 0.8);font-size:1.3em; }
	</style>
</head>
<body>
	<div id="demo">

		<div class="project">
			<div class="project_card">
				<a href="http://www.dodobook.net" class="project_image"><img src="400.jpg" alt=""></a>
				<div class="project_detail">
					<h2 class="project_title"><a href="http://www.dodobook.me">有事没事读读书</a></h2>
					<small class="project_category"><a href="http://www.dodobook.me">www.dodobook.net</a></small>
				</div>
			</div>
		</div>

		<div class="project2">
			<div class="project_card2">
				<a href="http://www.dodobook.net" class="project_image"><img src="1000.jpg" alt=""></a>
			</div>
		</div>
		
		<h3><a href="/demo/hover3d/hover3d.zip">点击下载ZIP的DEMO</a></h3>
		<h3><a href="/demo/hover3d/hover3d.zip">点击下载ZIP的DEMO</a></h3>
		<h3><a href="/demo/hover3d/hover3d.zip">点击下载ZIP的DEMO</a></h3>
	</div>


	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/jquery.hover3d.js" ></script>
	<script type="text/javascript">
		$(document).ready(function(){

			$(".project").hover3d({
				selector: ".project_card",
				shine: false,
				sensitivity: 30,
			});

			$(".project2").hover3d({
				selector: ".project_card2",
				shine: true,
				sensitivity: 30,
			});

		});

	</script>
</body>
</html>

相关链接：锤子手机 http://www.smartisan.com/#/

Hover3D的官网https://github.com/ariona/hover3d

说明,锤子手机的效果图层都做了很精心的设计，两个图层，背景图黑色调，前景图为透明，所以在3d的效果的时候很有立体层次感。有喜欢的请精心设计你的图片和图层。如果你想简便易行的话。直接下载demo之后修改一下图片即可使用。另外调整一下阳光的开关手电筒一样，以及3d的效果等。hover3d也可以有多个图层。

hover3d

人长大的标志就是试着去听从内心的声音，而不在乎外界的掌声，所以无论走多远，都不能忘记初衷。