JS动态跟随特效
肥学 人气:0演示
技术栈
这次用到了关于css的一些功能，和jQuery。
CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
通过 @keyframes 规则，您能够创建动画。
@keyframes定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。
@keyframes 它定义的动画并不直接执行，需要借助animation来运转。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
源码
css部分
.container{
text-align:center;
perspective:500px;
-webkit-perspective:500px;
border: 1px solid;
}
.example{
display:table-cell;
vertical-align:middle;
color: #fff;
width: 150px;
height: 150px;
background:url(../images/01.jpg) no-repeat;
}
@-webkit-keyframes topenter {
from {
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
}
to {
-webkit-transform-origin:top;
-webkit-transform:rotateX(0deg);
}
}
@keyframes topenter {
from {
transform-origin:top;
transform:rotateX(-90deg);
}
to {
transform-origin:top;
transform:rotateX(0deg);
}
}
@-webkit-keyframes topleave {
from {
-webkit-transform-origin:top;
-webkit-transform:rotateX(0deg);
}
to {
-webkit-transform-origin:top;
-webkit-transform:rotateX(-90deg);
}
}
@keyframes topleave {
from {
transform-origin:top;
transform:rotateX(0deg);
}
to {
transform-origin:top;
transform:rotateX(-90deg);
}
}
@-webkit-keyframes bottomenter {
from {
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
}
to {
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(0deg);
}
}
@keyframes bottomenter {
from {
transform-origin:bottom;
transform:rotateX(90deg);
}
to {
transform-origin:bottom;
transform:rotateX(0deg);
}
}
@-webkit-keyframes bottomleave {
from {
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(0deg);
}
to {
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(90deg);
}
}
@keyframes bottomleave {
from {
transform-origin:bottom;
transform:rotateX(0deg);
}
to {
transform-origin:bottom;
transform:rotateX(90deg);
}
}
@-webkit-keyframes leftenter {
from {
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
}
to {
-webkit-transform-origin:left;
-webkit-transform:rotateY(0deg);
}
}
@keyframes leftenter {
from {
transform-origin:left;
transform:rotateY(90deg);
}
to {
transform-origin:left;
transform:rotateY(0deg);
}
}
@-webkit-keyframes leftleave {
from {
-webkit-transform-origin:left;
-webkit-transform:rotateY(0deg);
}
to {
-webkit-transform-origin:left;
-webkit-transform:rotateY(90deg);
}
}
@keyframes leftleave {
from {
transform-origin:left;
transform:rotateY(0deg);
}
to {
transform-origin:left;
transform:rotateY(90deg);
}
}
@-webkit-keyframes rightenter {
from {
-webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
}
to {
-webkit-transform-origin:right;
-webkit-transform:rotateY(0deg);
}
}
@keyframes rightenter {
from {
transform-origin:right;
transform:rotateY(-90deg);
}
to {
transform-origin:right;
transform:rotateY(0deg);
}
}
@-webkit-keyframes rightleave {
from {
-webkit-transform-origin:right;
-webkit-transform:rotateY(0deg);
}
to {
-webkit-transform-origin:right;
-webkit-transform:rotateY(-90deg);
}
}
@keyframes rightleave {
from {
transform-origin:right;
transform:rotateY(0deg);
}
to {
transform-origin:right;
transform:rotateY(-90deg);
}
}js部分
$(function () {
//initialize
$('.container').css({
'perspective-origin': '50% 0%',
'-webkit-perspective-origin': '50% 0%'
});
$('.container .example').css({
'animation': 'topleave 400ms forwards',
'-webkit-animation': 'topleave 400ms forwards'
});
$('.container').bind('mouseenter mouseleave', function (e) {
var dir = getDirection($(this), e),
enter = e.type === 'mouseenter',
topPerspectiveOrigin = {
'perspective-origin': '50% 0%',
'-webkit-perspective-origin': '50% 0%'
},
rightPerspectiveOrigin = {
'perspective-origin': '100% 50%',
'-webkit-perspective-origin': '100% 50%'
},
bottomPerspectiveOrigin = {
'perspective-origin': '50% 100%',
'-webkit-perspective-origin': '50% 100%'
},
leftPerspectiveOrigin = {
'perspective-origin': '0% 50%',
'-webkit-perspective-origin': '0% 50%'
},
$target = $(this).find('.example');
switch (dir) {
case 0:
if (enter) {
$(this).css(topPerspectiveOrigin);
$target.css({
'animation': 'topenter 400ms forwards',
'-webkit-animation': 'topenter 400ms forwards'
});
} else {
$(this).css(topPerspectiveOrigin);
$target.css({
'animation': 'topleave 400ms forwards',
'-webkit-animation': 'topleave 400ms forwards'
});
};
break;
case 1:
if (enter) {
$(this).css(rightPerspectiveOrigin);
$target.css({
'animation': 'rightenter 400ms forwards',
'-webkit-animation': 'rightenter 400ms forwards'
});
} else {
$(this).css(rightPerspectiveOrigin);
$target.css({
'animation': 'rightleave 400ms forwards',
'-webkit-animation': 'rightleave 400ms forwards'
});
};
break;
case 2:
if (enter) {
$(this).css(bottomPerspectiveOrigin);
$target.css({
'animation': 'bottomenter 400ms forwards',
'-webkit-animation': 'bottomenter 400ms forwards'
});
} else {
$(this).css(bottomPerspectiveOrigin);
$target.css({
'animation': 'bottomleave 400ms forwards',
'-webkit-animation': 'bottomleave 400ms forwards'
});
};
break;
case 3:
if (enter) {
$(this).css(leftPerspectiveOrigin);
$target.css({
'animation': 'leftenter 400ms forwards',
'-webkit-animation': 'leftenter 400ms forwards'
});
} else {
$(this).css(leftPerspectiveOrigin);
$target.css({
'animation': 'leftleave 400ms forwards',
'-webkit-animation': 'leftleave 400ms forwards'
});
};
break;
}
});
})
function getDirection($element, event) {
var w = $element.width(),
h = $element.height(),
x = (event.pageX - $element.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
y = (event.pageY - $element.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
return direction;
}加载全部内容