資訊專欄INFORMATION COLUMN
摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出
錘子官網3D翻轉特效banner插件
**每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足
這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現
同時也將代碼進行了封裝，做成了可以供大家引用的插件
歡迎大家體驗，同時提出意見**
引入js插件使用說明tBanner
// 該插件依賴于jquery // 使用者需要在頁面中書寫這樣的標簽 //js插件核心代碼// //// 引入該插件后會得到一個3dBanner方法，可以全局調用 // 方法的參數data 是一個對象 // 下面是參數的說明 // { // container: 容器盒子的類名 字符串 // banner： 展示banner盒子的類名 字符串 // initDeg: 最大旋轉角度 數值 // url: banner背景圖路徑 字符串 // con_height: 容器盒子的高度 數值 // }
(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);
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115567.html
摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出 錘子官網3D翻轉特效banner插件 **每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足 這么有趣的效果...
摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出 錘子官網3D翻轉特效banner插件 **每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足 這么有趣的效果...
摘要：以前看到錘子科技官網的效果挺好玩的，一直沒有研究今天看到饑人谷，使用給出了一種實現方式我自己用原生也實現了一遍。我的方法原理，如圖所示，假設圖中的小圓點是中心點的位置為事件發生的位置。在水平方向上，就是元素要旋轉的度數代碼在最下方。 以前看到錘子科技官網的banner效果挺好玩的，一直沒有研究；今天看到饑人谷，使用jquery給出了一種實現方式；我自己用原生js也實現了一遍。大致原理相...
摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。 收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...
閱讀 2211·2019-08-30 15:54
閱讀 1947·2019-08-30 13:49
閱讀 665·2019-08-29 18:44
閱讀 823·2019-08-29 18:39
閱讀 1104·2019-08-29 15:40
閱讀 1523·2019-08-29 12:56
閱讀 3133·2019-08-26 11:39
閱讀 3093·2019-08-26 11:37
