锤子官网3D翻转特效banner插件

gougoujiang 发布于2019-08-30 13:49 / 1945人阅读

摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出

锤子官网3D翻转特效banner插件

**每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足
这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现
同时也将代码进行了封装，做成了可以供大家引用的插件
欢迎大家体验，同时提出意见**

html页面代码

 
 
 
 
 
tBanner

引入js插件使用说明

//         该插件依赖于jquery
//         使用者需要在页面中书写这样的标签
//          
//          
//          
//         引入该插件后会得到一个3dBanner方法，可以全局调用
//         方法的参数data 是一个对象
//         下面是参数的说明
//          {
//          container:  容器盒子的类名       字符串
//          banner：    展示banner盒子的类名 字符串
//          initDeg:    最大旋转角度         数值
//          url:        banner背景图路径     字符串
//          con_height: 容器盒子的高度       数值 

//          }

js插件核心代码

        (function(win){

            function fnBanner(data){
                var con_height=data.con_height || 400;
                var ban_height=con_height*0.7;
                var con_padding=con_height*0.15;

                $(data.banner).css({
                height:ban_height+"px",
                width:"80%",
                margin:"0 auto",              
                transition:"transform 0.1s"

                  }).css("background","url("+data.url+") no-repeat center").css(
                  "background-size","contain").css("box-shadow","0 0 15px rgba(0,0,0,0.3)")

                $(data.container).css({height:con_height+"px",
                    padding:con_padding+"px 0",
                    width:"100%",
                    background:"white",
                    border:"1px solid gray",
                    perspective:"1000px"
                }).css("box-sizing","border-box")

            $(data.container).on("mousemove",function(e){
                var offset=$(data.container).offset(); 
                var x=e.pageX-offset.left;  
                var y=e.pageY-offset.top;  

                var centerX=$(data.container).outerWidth()/2;   
                var centerY=$(data.container).outerHeight()/2;

                var distanceX=x-centerX;
                var distanceY=y-centerY;

                var perX=distanceX/centerX;
                var perY=distanceY/centerY;

                var initDeg=data.initDeg || 10;


                $(data.banner).css({
                    transform:"rotateX("+initDeg*-perY+"deg) rotateY("+initDeg*perX+"deg)"
                })

            })

            $(data.container).on("mouseleave",function(){
                $(data.banner).css({
                    transform:""
                })
            })

            console.log("ok");
            }

            win.B=fnBanner;
        })(window);

GPU云服务器云服务器特效插件 jquery特效插件 html3d动画插件 html3d图插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115567.html

锤子官网3D翻转特效banner插件

摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足这么有趣的效果...

alogy 2019-08-21 17:15 评论0 收藏0
锤子官网3D翻转特效banner插件

摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足这么有趣的效果...

meteor199 2019-08-01 17:51 评论0 收藏0
仿照锤子科技官网的banner 3d效果

摘要：以前看到锤子科技官网的效果挺好玩的，一直没有研究今天看到饥人谷，使用给出了一种实现方式我自己用原生也实现了一遍。我的方法原理，如图所示，假设图中的小圆点是中心点的位置为事件发生的位置。在水平方向上，就是元素要旋转的度数代码在最下方。以前看到锤子科技官网的banner效果挺好玩的，一直没有研究；今天看到饥人谷，使用jquery给出了一种实现方式；我自己用原生js也实现了一遍。大致原理相...

Scott 2019-08-22 10:47 评论0 收藏0
可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0