基于JS實現(xiàn)動態(tài)跟隨特效的示例代碼
更新時間：2022年06月20日 08:18:26 作者：肥學(xué)
這篇文章主要介紹了如何利用JavaScript實現(xiàn)動態(tài)跟隨特效，文中的示例代碼講解詳細，對我們學(xué)習(xí)JS有一定的幫助，感興趣的小伙伴可以了解一下
演示
技術(shù)棧
這次用到了關(guān)于css的一些功能，和jQuery。
CSS3中添加的新屬性animation是用來為元素實現(xiàn)動畫效果的，但是animation無法單獨擔(dān)當(dāng)起實現(xiàn)動畫的效果。承載動畫的另一個屬性——@keyframes。使用的時候為了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應(yīng)不同的瀏覽器。
創(chuàng)建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
通過 @keyframes 規(guī)則，您能夠創(chuàng)建動畫。
@keyframes定義一個動畫，并定義具體的動畫效果，比如是放大還是位移等等。
@keyframes 它定義的動畫并不直接執(zhí)行，需要借助animation來運轉(zhuǎn)。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 “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;
}到此這篇關(guān)于基于JS實現(xiàn)動態(tài)跟隨特效的示例代碼的文章就介紹到這了,更多相關(guān)JS動態(tài)跟隨特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了基于layPage插件實現(xiàn)兩種分頁方式 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
群里有個出了一道有趣的題目，分享出來讓大家看看2012-02-02
這篇文章主要介紹了js刷新頁面location.reload()用法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
JavaScript設(shè)計模式之觀察者模式（發(fā)布者-訂閱者模式）
這篇文章主要介紹了JavaScript設(shè)計模式之觀察者模式（發(fā)布者-訂閱者模式）,本文詳細的講解了JavaScript中的觀察者模式,需要的朋友可以參考下2014-09-09
本文主要介紹了TypeScript 中括號用法小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了詳解CocosCreator游戲之魚群算法，對算法感興趣的同學(xué)，可以仔細參考下2021-04-04
這篇文章主要為大家詳細介紹了JS使用base64格式上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)拖拽盒子效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了微信小程序獲取當(dāng)前位置和城市名的思路,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
javascript 變速加數(shù)功能實現(xiàn)代碼
試想一下你要在你的網(wǎng)站提供如下這樣的功能：提供一個文本框用于收集用戶數(shù)據(jù)，這個文本框只能接受整型的數(shù)值，不提供給用戶手工輸入，只提供兩個按鈕。2009-10-10