基于JS实现动态跟随特效的示例代码
作者:肥学 发布时间:2023-06-30 11:15:16
标签:JS,动态,跟随
演示
技术栈
这次用到了关于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;
}
来源:https://juejin.cn/post/7111091390087430158
0
投稿
猜你喜欢
- 我们经常会遇到多重查询问题,而长长的SQL语句往往让人丈二和尚摸不着头脑。特别是客户端部分填入查询条件时,如用普通方法将更是难上加难。以下巧
- 最近在网上经常看到朋友们聊到UEO,我就想哈UEO是啥东西啊,我去找啦些资料看,他们都说将来UEO发展一定会比较好,我也说这是肯定的.我为什
- 继续Mootools常用方法扩展,依然还是String类的扩展。方法:format说明:一个非常简单的format方法,和C#
- sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdat
- 1、什么是AspJpeg?AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件,AspJpeg可以使用很少的代码在
- 参数让我们进一步看看CPU的数量是如何影响这些参数的。 参数fast_start_parallel_rollback Oracle并行机制中
- 在Microsoft OfficeAccess和 Microsoft OfficeExcel之间存在多种交换数据的方法。若要将Access中
- microtime() 函数返回当前 Unix 时间戳的微秒数。用于检测程序执行时间的函数,也是PHP内置的时间函数之一,在PHP中可以用于
- 谁在用这些导航google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜
- 用ACCESS数据库开发的网站,当随着网站数据量的不断增长.数据库的容量也是不断加大.这让ASP程序速度直线下降.如果才能让ACCESS数据
- PDOStatement::executePDOStatement::execute — 执行一条预处理语句(PHP 5 >= 5.1
- 一、检测它是不是整数function Is_Int(a_str) if&
- 在golang中,网络协议已经被封装的非常完好了,想要写一个Socket的Server,我们并不用像其他语言那样需要为socket、bind
- 页面加载loading效果, 这个挺好玩的!用setTimeout实现的!可以和服务端整合弄一些生成HTML或者上传文件等应用!
- 表中主键必须为标识列,[ID] int IDENTITY (1,1)1.分页方案一:(利用Not In和SELECT TOP分页)语句形式:
- 进入sqlplus SQL> set timing on SQL> SQL> select count(*) from c
- 作者:JavaScript Kit译者:子乌(Sheneyan)翻译日期:2006-02-12英文原文:Conditional Compil
- 1.func Fields(s string) []string,这个函数的作用是按照1:n个空格来分割字符串最后返回的是[]string的
- replace 方法返回根据正则表达式进行文字替换后的字符串的复制。stringObj.replace(rgExp, replaceText
- 因AJAX接受数据时服务器默认是采用UTF-8的编码形式进行传送,所以在很多GB2312中文网页中应用AJAX回传数据经常会发生中文乱码。解