锤子官网3D翻转特效banner插件
**每次访问锤子手机官网的页面时,都会欣喜的玩耍一番那个会翻转的banner,感觉科技感十足
这么有趣的效果,自己也很想试一试能否实现,于是就核心的特效做了代码的实现
同时也将代码进行了封装,做成了可以供大家引用的插件
欢迎大家体验,同时提出意见**
html页面代码
tBanner// 调用插件函数,传入参数实现效果
B({
container:".container",
banner:".banner",
initDeg: 10,
url: "../images/img1.jpg",
con_height: 400
});
引入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);