jQuery3D万花筒旋转动画特效插件是一款适用于jquery和CSS3的3d万花筒旋转动画特效插件,该插件通过简单的CSS transform和jquery代码来实现在用户鼠标按下时,万花筒图片可以跟随鼠标进行3D旋转动画,非常的炫酷。
基本介绍
jQuery3D万花筒旋转动画特效插件,这是一款使用jquery和CSS3来制作的炫酷的带倒影的3D万花筒旋转动画特效。该3D万花筒特效通过简单的CSS transform和jquery代码来实现在用户鼠标按下时,万花筒图片可以跟随鼠标进行3D旋转动画。
使用说明
在页面底部,body标签结束之前,引入jquery文件。
在页面底部,<body>
标签结束之前,引入jquery文件。
< script src = "path/to/js/jquery.min.js" ></ script >
|
HTML结构
该3D万花筒旋转动画特效的基本HTML结构如下:
< div class = "pic" >
< img src = "img/1.jpg" />
< img src = "img/2.jpg" />
< img src = "img/3.jpg" />
< img src = "img/4.jpg" />
< img src = "img/5.jpg" />
< img src = "img/6.jpg" />
< img src = "img/7.jpg" />
< img src = "img/8.jpg" />
< img src = "img/9.jpg" />
< img src = "img/10.jpg" />
< p ></ p >
</ div >
|
CSS样式
设置全局样式如下:
*{ margin : 0 ; padding : 0 ;}
body{ background-color : #000 ; overflow : hidden ;}
|
为3D万花筒容器元素.pic
设置固定的宽度和高度,然后通过transform属性来依次设置透视效果perspective为800像素,绕X轴旋转rotateX()-10度,绕Y轴旋转rotateY()0度。
.pic{
width : 120px ;
height : 180px ;
margin : 150px auto 0 ;
position : relative ;
transform-style : preserve-3d ;
transform :perspective( 800px ) rotateX ( -10 deg) rotateY ( 0 deg);
}
|
然后为每一张图片设置box-shadow阴影效果,以及使用-webkit-box-reflect
属性来制作阴影效果。
.pic img{
position : absolute ;
width : 100% ;
height : 100% ;
border-radius : 5px ;
box-shadow : 0px 0px 10px #fff ;
-webkit-box-reflect: below 10px -webkit-linear-gradient( top ,rgba( 0 , 0 , 0 , 0 ) 50% ,rgba( 0 , 0 , 0 ,. 5 ) 100% );
}
|
容器中空的<p>
元素用于制作一个椭圆形渐变效果。
.pic p{
width : 1200px ;
height : 1200px ;
background : -webkit-radial-gradient( center center , 600px 600px ,rgba( 255 , 255 , 255 ,. 5 ),rgba( 0 , 0 , 0 , 0 ));
position : absolute ;
top : 100% ; left : 50% ;
margin-top : -600px ;
margin-left : -600px ;
border-radius : 600px ;
transform : rotateX ( 90 deg);
}
|
JavaScript
在页面DOM元素加载完毕之后,使用下面的方法来初始化该3D万花筒特效。
$( function (){
var imgL=$( ".pic img" ).size();
var deg=360/imgL;
var roY=0,roX=-10;
var xN=0,yN=0;
var play= null ;
$( ".pic img" ).each( function (i){
$( this ).css({
<!--translateZ 定义2d旋转沿着z轴-->
"transform" : "rotateY(" +i*deg+ "deg) translateZ(300px)" });
<!--防止图片被拖拽-->
$( this ).attr( 'ondragstart' , 'return false' );
});
$(document).mousedown( function (ev){
var x_=ev.clientX;
var y_=ev.clientY;
clearInterval(play);
console.log( '我按下了' );
$( this ).bind( 'mousemove' , function (ev){
var x=ev.clientX;
var y=ev.clientY;
xN=x-x_;
yN=y-y_;
roY+=xN*0.2;
roX-=yN*0.1;
console.log( '移动' );
$( '.pic' ).css({
transform: 'perspective(800px) rotateX(' +roX+ 'deg) rotateY(' +roY+ 'deg)'
});
x_=ev.clientX;
y_=ev.clientY;
});
}).mouseup( function (){
$( this ).unbind( 'mousemove' );
var play=setInterval( function (){
xN*=0.95;
yN*=0.95
if (Math.abs(xN)<1 && Math.abs(yN)<1){
clearInterval(play);
}
roY+=xN*0.2;
roX-=yN*0.1;
$( '.pic' ).css({
transform: 'perspective(800px) rotateX(' +roX+ 'deg) rotateY(' +roY+ 'deg)'
});
},30);
});
});
|
软件评论 您的评论需要经过审核才能显示
网友评论