Isotope 是一个很好的 JS 动画库。
我想在 Isotope JS 库中写一些东西会有那么困难吗？
在这里我介绍等距。
它是一个使用 JQuery 和 Bootstrap 5.x.x 的小类。对于CSS。
请记住将下面的 IsoMetric 类包含到头部或将其放入单独的 .js 中，然后将其包含在 HTML 文件的头部中
class IsoMetric {
// 1: ZoomOutMoveInAndZoomIn , 2: FadeOffAppearAndFadeIn, 3: ImplodeExplode, 4: Rotation
constructor(item_container, item_identifier, animationOption) {
this.animationOption = animationOption ? animationOption : 1;
this.jItemsContainer = $(item_container);
this.leftCont = this.jItemsContainer.position().left;
this.topCont = this.jItemsContainer.position().top;
this.wdCont = parseFloat(this.jItemsContainer.width());
this.htCont = parseFloat(this.jItemsContainer.height());
this.eleJArray = $(item_identifier);
this.eleArray = this.eleJArray.toArray();
this.allPositions = [];
let that = this;
$.each(this.eleJArray, function (index, ele) {
let $ele = $(ele);
let pos = $ele.position();
let onePos = { "x": pos.left + "px", "y": pos.top + "px", "w": $ele.width(), "h": $ele.height() };
that.allPositions.push(onePos);
$ele.attr(onePos);
let par = $ele;
//while (true) { //I restore width of all parents leading up to the container.
// par = $(par).parent();
// if (par[0] === that.jItemsContainer[0]) break;
// $(par).css({ "width": $(par).width(), "height": $(par).height() });
//}
});
$.each(this.eleJArray, function (index, ele) {
let $ele = $(ele);
$ele.css({ "position": "absolute", "left": $ele.attr("x"), "top": $ele.attr("y") });
});
this.jItemsContainer.css({ "width": this.wdCont + "px", "height": this.htCont + "px" });
}
TheClick(e, selector) {
$(e.target).siblings().removeClass("filter-active");
$(e.target).addClass("filter-active");
switch (this.animationOption) {
case 1:
this.ZoomOutMoveInAndZoomIn(e, selector);
break;
case 2:
this.FadeOffAppearAndFadeIn(e, selector);
break;
case 3:
this.ImplodeExplode(e, selector);
break;
case 4:
this.Rotation(e, selector);
break;
}
}
SetAnimation(option) {
this.animationOption = option;
}
ZoomOutMoveInAndZoomIn(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({
"width": 0,
"height": 0,
"left": parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2),
"top": parseFloat($(bEle).position().top) + parseFloat($(bEle).attr("h") / 2),
//"opacity": 0,
}, 800, function () {
//$(bEle).css({ "opacity": 0 });
//$(bEle).css({ "display": "none" });
});
});
$.each(boneEle, function (index, bEle) {
//$(bEle).css({ "display": "block" });
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": $(bEle).attr("w"),
"height": $(bEle).attr("h"),
//"opacity": 1
}, 200);
});
}
FadeOffAppearAndFadeIn(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({"opacity": 0,}, 1000, function () {
$(bEle).css({ "width": 0, "height": 0 });
});
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
$(bEle).css({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": that.allPositions[index].w,
"height": that.allPositions[index].h
});
$(bEle).animate({
"opacity": 1
}, 1000);
});
});
}
ImplodeExplode(e, selector) {
let boneEle = $(selector);
let that = this;
let Cx = that.leftCont + (that.wdCont / 2); let Cy = that.topCont + (that.htCont / 2);
$.each(this.eleJArray, function (index, bEle) {
$(bEle).animate({
"left": Cx , //that.allPositions[index].x,
"top": Cy , //that.allPositions[index].y,
"width": 0,
"height": 0,
}, 100);
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
$(bEle).animate({
"left": that.allPositions[index].x,
"top": that.allPositions[index].y,
"width": $(bEle).attr("w"),
"height": $(bEle).attr("h"),
"opacity": 1
}, 800);
});
});
}
Rotation(e, selector) {
let boneEle = $(selector);
let that = this;
$.each(this.eleJArray, function (index, bEle) {
$({
deg: 0, w: $(bEle).width(), h: $(bEle).height(),
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 1
}).animate({
deg: 360, w: 0, h: 0,
l: parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2),
t: parseFloat($(bEle).position().top) + parseFloat($(bEle).attr("h") / 2),
o: 0
}, {
duration: 1000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotate(' + this.deg + 'deg)',
left: this.l,
top: this.t,
width: this.w,
height: this.h,
opacity: this.o
});
},
complete: function () {
//alert("sasa");
//$(bEle).css({ "opacity": 0 });
}
});
});
$(":animated").promise().done(function () {
//code here
$.each(boneEle, function (index, bEle) {
//$(bEle).css({ "opacity": 1 });
$({
deg: 360, w: 0, h: 0,
l: parseFloat($(bEle).position().left),
t: parseFloat($(bEle).position().top),
o: 0,
}).animate({
deg: 0,
w: that.allPositions[index].w, h: that.allPositions[index].h,
l: that.allPositions[index].x,
t: that.allPositions[index].y,
o: 1
}, {
duration: 1000,
index: index,
step: function () {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
//let xx = parseFloat($(bEle).position().left) + parseFloat($(bEle).attr("w") / 2) + "px";
$(bEle).css({
transform: 'rotate(' + this.deg + 'deg)',
width: this.w,
height: this.h,
left: this.l,
top: this.t,
opacity: this.o
});
}
});
});
});
}}
JavaScript 和 CSS & JS 包含在 HTML 的头部：
<link href="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<style>
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.side-car {
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 40px;
padding: 20px;
width: 100%;
height: 400px;
display: inline-block;
padding: 20px;
}
.col {
margin-bottom: 20px;
}
.filter-active {
text-decoration: underline;
font-weight: bolder;
}
</style>
<script type="text/javascript">
var theContactApp = {
iso_demo: {},
start_action: function () {
theContactApp.iso_demo = new IsoMetric(".TheContainer", ".my-item", 3);
theContactApp.doCarousel();
$("#animationOption").change((e) => theContactApp.DecideAnimation(e));
},
doCarousel: function () {
$('.carousel').carousel({
interval: 100,
wrap: true,
pause: 'hover'
});
},
DecideAnimation: function (e) {
theContactApp.iso_demo.SetAnimation(parseInt($(e.target).val()));
},
}; $(document).ready(() => theContactApp.start_action());
</script>
正文中的 HTML：
<section>
<div class="row">
<div class="col" style="margin-bottom:-10px;">
<h2 style="color:blue;">Click them and enjoy . . .</h2>
<span class="text-primary rounded-circle m-2" style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.my-all')">❉</span>
<span class="text-primary rounded-circle m-2 " style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.1')">➀</span>
<span class="text-primary rounded-circle m-2 " style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.2')">➁</span>
<span class="text-primary rounded-circle m-2 " style="cursor:pointer;font-size:44px;" onclick="theContactApp.iso_demo.TheClick(event, '.3')">➂</span>
<div class="m-2" style="float:right;">
<select class="form-select" id="animationOption" style="display:inline; color:darkgray;margin-top:-10px;">
<option value="1">ZoomOut Move In And ZoomIn</option>
<option value="2">FadeOff Appear And FadeIn</option>
<option value="3" selected>Implode AND Explode</option>
<option value="4">Rotation</option>
</select>
</div>
</div>
</div>
<hr />
<div class="container TheContainer">
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block ; height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-1.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;" >1</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block; height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-2.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">2</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-3.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">3</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-4.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">11</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-5.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">22</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-6.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">33</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-7.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">111</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-8.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">222</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-9.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">333</span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="display-6 overflow-hidden my-item 1 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-1.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">1111</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 2 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-2.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">2222</span>
</div>
</div>
<div class="col">
<div class="display-6 overflow-hidden my-item 3 my-all">
<img style="display: block;height:200px;" src="https://bootstrapmade.com/demo/templates/FlexStart/assets/img/portfolio/portfolio-3.jpg" />
<span class="badge bg-dark rounded-pill" style="position:absolute;left:8px;top:120px;opacity:.5;">3333</span>
</div>
</div>
</div>
</div>
</section>
就这些了，不需要外部 CSS，我提供了 4 种效果，一种可以更轻松地制作
