仿锤子手机的3D画廊banner的效果jQueryHover3d
- 5099
- jQuery
- 37
- super_dodo
- 2016/12/01
最近因为老罗的情怀情不自禁的去关注了一下锤子手机。打开官网之后 http://www.smartisan.com/#/ 被锤子手机的画廊的3D效果深深的吸引了。所以想借鉴学习一下,网上搜罗一下,整理了一下写了一个demo如下,欢迎各位指点。
此demo使用的是jQuery Hover3d的js框架,需要jquery的支持。
可直接查看效果以及下载该demo(有美女哦)
直接上代码
<!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也可以有多个图层。
人长大的标志就是试着去听从内心的声音,而不在乎外界的掌声,所以无论走多远,都不能忘记初衷。
相关阅读
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
热门文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
最新文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例