錘子官網3D翻轉特效banner插件

meteor199 發布于2019-08-01 17:51 / 936人閱讀

摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出

錘子官網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圖插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51412.html

錘子官網3D翻轉特效banner插件

摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出錘子官網3D翻轉特效banner插件 **每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足這么有趣的效果...

gougoujiang 2019-08-30 13:49 評論0 收藏0
錘子官網3D翻轉特效banner插件

摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出錘子官網3D翻轉特效banner插件 **每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足這么有趣的效果...

alogy 2019-08-21 17:15 評論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