英文:
3D element rotation with jQuery
问题
我设计了网站的部分雪花效果。我写的脚本代码不是很专业，但能实现我想要的效果。
我希望每个元素（雪花晶体）在下降时有3D旋转，也不只是单方向移动。
所谓不单方向移动，是指如果元素向左下移动，它会在中途改变方向并向右移动以达到底部。
我到目前为止编写的代码如下：
// 第一个效果
$(function () {
var item_width = $('#slides div.a-2').outerWidth(true);
var old_left = parseInt($('#slides div.a-1').css('left'));
var old_right = parseInt($('#slides div.a-1').css('right'));
// 其他代码...
});
// 第二个效果
$(function () {
var item_width = $('#slides div.b-2').outerWidth(true);
var old_left = parseInt($('#slides div.b-1').css('left'));
var old_right = parseInt($('#slides div.b-1').css('right'));
// 其他代码...
});
// 第三个效果
$(function () {
var item_width = $('#slides div.c-2').outerWidth(true);
var old_left = parseInt($('#slides div.c-1').css('left'));
var old_right = parseInt($('#slides div.c-1').css('right'));
// 其他代码...
});
/* CSS 样式 */
body {
direction: ltr;
}
.card_main {
// 其他样式...
}
// 其他样式...
<!-- HTML 代码 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="card_main">
<div class="card_body">
<div id="slides">
<div class="direction_ltr">
<div class="a-1">
<div class="a-2">
<div class="content content1">
<svg class="cardpro-iconBack_Common cardpro-iconback6" fill="#000" height="20px"
width="20px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"
xml:space="preserve">
<!-- SVG 图标 -->
</svg>
</div>
</div>
</div>
</div>
<!-- 其他效果的代码... -->
</div>
</div>
</section>
这段代码实现了我想要的雪花效果。
英文:
I have designed a snowfall for a part of my site. The script code I wrote is not very professional but it does what I want.
I want each element (snow crystal) to have a 3D rotation as it descends and also not move in only one direction.
By not moving in one direction, I mean that if the element goes down to the left, it changes direction in the middle of the way and moves to the right to reach the bottom.
The codes that I have written so far are as follows:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
//
//
//
// *** 1 ***
//
//
//
$(function () {
var item_width = $('#slides div.a-2').outerWidth(true);
var old_left = parseInt($('#slides div.a-1').css('left'));
var old_right = parseInt($('#slides div.a-1').css('right'));
var top_indent = old_left - item_width - old_right;
var right_indent = item_width + old_left;
var left = 0;
var right = 0;
var animateBox = function () {
left = (left) ? 0 : (right_indent / 2);
$('#slides div.a-1').animate({
'bottom': top_indent + -150,
'left': left,
'right': right,
}, 3200, function () {
$('#slides div.a-1').css({ 'bottom': 50 });
setTimeout(function () { animateBox(); }, 0);
});
}
animateBox();
});
//
//
//
// *** 2 ***
//
//
//
$(function () {
var item_width = $('#slides div.b-2').outerWidth(true);
var old_left = parseInt($('#slides div.b-1').css('left'));
var old_right = parseInt($('#slides div.b-1').css('right'));
var top_indent = old_left - item_width - old_right;
var right_indent = item_width + old_left;
var left = 0;
var right = 0;
var animateBox = function () {
left = (left) ? 0 : (right_indent / 2);
$('#slides div.b-1').animate({
'bottom': top_indent + -150,
'left': right,
'right': left
}, 3200, function () {
$('#slides div.b-1').css({ 'bottom': 50 });
setTimeout(function () { animateBox(); }, 0);
});
}
animateBox();
});
//
//
//
// *** 3 ***
//
//
//
$(function () {
var item_width = $('#slides div.c-2').outerWidth(true);
var old_left = parseInt($('#slides div.c-1').css('left'));
var old_right = parseInt($('#slides div.c-1').css('right'));
var top_indent = old_left - item_width - old_right;
var right_indent = item_width + old_left;
var left = 0;
var right = 0;
var animateBox = function () {
left = (left) ? 0 : (right_indent / 2);
$('#slides div.c-1').animate({
'bottom': top_indent + -150,
'left': left,
'right': right
}, 3200, function () {
$('#slides div.c-1').css({ 'bottom': 50 });
setTimeout(function () { animateBox(); }, 0);
});
}
animateBox();
});
<!-- language: lang-css -->
body {
direction: ltr;
}
.card_main {
margin: 15px;
padding: 10px;
display: flex;
justify-content: space-between;
}
.card_body,
#slides {
position: relative;
overflow: hidden !important;
width: 300px;
height: 400px;
box-shadow: 0 0 4px #000;
background: #fff;
margin: 0 auto;
}
.content {
position: absolute;
top: 0;
text-align: center;
}
.content svg {
fill: #003ced99;
width: 75px;
height: 45px;
}
.content1 {
left: 50;
}
.content2 {
left: 120px;
}
.content3 {
left: 180px;
}
.direction_rtl {
direction: rtl;
}
.direction_ltr {
direction: ltr;
}
#slides div.a-1,
#slides div.a-2,
#slides div.b-1,
#slides div.b-2,
#slides div.c-1,
#slides div.c-2 {
position: relative;
list-style-type: none;
display: block;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="card_main">
<div class="card_body">
<div id="slides">
<div class="direction_ltr">
<div class="a-1">
<div class="a-2">
<div class="content content1">
<svg class="cardpro-iconBack_Common cardpro-iconback6" fill="#000" height="20px"
width="20px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"
xml:space="preserve">
<g>
<path
d="M422.804,332.819c-34.87-7.132-11.07-25.884,15.846-33.085c26.899-7.201,16.591-45.641-11.708-35.981
c-28.308,9.634-56.711,41.967-71.333,33.514c-11.69-6.746-31.178-17.982-38.502-22.217c1.881-6.02,2.888-12.425,2.888-19.049
c0-6.624-1.006-13.029-2.888-19.041c7.324-4.226,26.811-15.48,38.502-22.226c14.622-8.435,43.025,23.888,71.333,33.531
c28.298,9.643,38.606-28.798,11.708-35.999c-26.916-7.202-50.717-25.936-15.846-33.086c34.861-7.114,66.187-31.65,54.899-51.18
c-11.288-19.531-48.17-4.673-71.797,21.955c-23.582,26.618-27.913-3.369-20.712-30.267c7.202-26.908-31.212-37.189-37.014-7.858
c-5.819,29.332,7.98,70.116-6.633,78.543c-11.717,6.764-31.212,18.018-38.528,22.244c-8.637-9.38-20.056-16.145-32.954-19.05
c0-8.435,0-30.959,0-44.469c0-16.871,42.186-25.315,64.709-45.004c22.497-19.688-5.626-47.828-25.332-28.141
c-19.697,19.706-47.812,30.95-36.559-2.817C284.128,39.385,278.554,0,255.987,0c-22.55,0-28.132,39.385-16.88,73.135
c11.253,33.767-16.862,22.523-36.55,2.817c-19.706-19.688-47.83,8.453-25.332,28.141c22.515,19.689,64.708,28.133,64.708,45.004
c0,13.51,0,36.034,0,44.469c-12.898,2.905-24.326,9.669-32.954,19.05c-7.315-4.226-26.811-15.48-38.528-22.244
c-14.613-8.426-0.84-49.211-6.632-78.543c-5.802-29.331-44.225-19.05-37.014,7.858c7.193,26.898,2.896,56.886-20.712,30.267
C82.468,123.327,45.585,108.469,34.297,128c-11.288,19.531,20.038,44.067,54.899,51.18c34.853,7.15,11.052,25.884-15.855,33.086
c-26.881,7.201-16.591,45.642,11.708,35.999c28.308-9.643,56.72-41.966,71.333-33.531c11.7,6.746,31.186,18,38.493,22.226
c-1.873,6.012-2.87,12.416-2.87,19.041c0,6.624,0.997,13.029,2.87,19.049c-7.306,4.236-26.793,15.471-38.493,22.217
c-14.613,8.453-43.026-23.879-71.333-33.514c-28.299-9.66-38.589,28.78-11.708,35.981c26.907,7.202,50.725,25.954,15.855,33.085
c-34.861,7.115-66.188,31.65-54.899,51.181c11.288,19.54,48.171,4.673,71.797-21.955c23.608-26.618,27.904,3.369,20.712,30.268
c-7.21,26.907,31.213,37.188,37.014,7.858c5.792-29.323-7.981-70.091,6.632-78.543c11.717-6.764,31.213-18.018,38.528-22.235
c8.628,9.38,20.056,16.136,32.954,19.041c0,8.435,0,30.959,0,44.469c0,16.87-42.194,25.315-64.708,45.003
c-22.498,19.689,5.626,47.83,25.332,28.141c19.688-19.706,47.803-30.95,36.55,2.818c-11.253,33.758-5.67,73.135,16.88,73.135
c22.567,0,28.141-39.377,16.897-73.135c-11.253-33.768,16.862-22.524,36.559-2.818c19.706,19.688,47.829-8.452,25.332-28.141
c-22.523-19.688-64.709-28.133-64.709-45.003c0-13.51,0-36.034,0-44.469c12.898-2.905,24.317-9.66,32.954-19.041
c7.315,4.218,26.811,15.471,38.528,22.235c14.613,8.452,0.814,49.22,6.633,78.543c5.802,29.331,44.215,19.05,37.014-7.858
c-7.201-26.899-2.896-56.886,20.712-30.268c23.627,26.628,60.509,41.494,71.797,21.955
C488.991,364.469,457.665,339.934,422.804,332.819z M255.987,292.27c-20.012,0-36.253-16.232-36.253-36.27
c0-20.03,16.241-36.262,36.253-36.262c20.038,0,36.27,16.232,36.27,36.262C292.257,276.038,276.025,292.27,255.987,292.27z" />
</g>
</svg>
</div>
</div>
</div>
</div>
<div class="direction_rtl">
<div class="b-1">
<div class="b-2">
<div class="content content2">
<svg class="cardpro-iconBack_Common cardpro-iconback5" fill="#000000" width="30px"
height="30px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"
xmlns="http://www.w3.org/2000/svg">
<path
d="M20.5 15.134l-2.457-.503 1.483-.396c.533-.143.85-.69.707-1.225-.142-.533-.689-.85-1.225-.707l-1.508.403c.037-.231.071-.464.071-.706s-.034-.476-.071-.707l1.51.404.26.034c.441 0 .846-.295.965-.741.143-.533-.174-1.082-.707-1.225l-1.483-.397 2.455-.502c.216-.044.42-.156.577-.333.386-.436.347-1.102-.089-1.488-.436-.386-1.102-.347-1.488.089l-1.663 1.874.398-1.479c.144-.533-.173-1.082-.706-1.226-.531-.142-1.082.173-1.226.706l-.407 1.517c-.366-.299-.771-.544-1.219-.717l1.102-1.102c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-1.086 1.086.793-2.379c.069-.209.075-.441 0-.667-.184-.552-.781-.851-1.333-.666-.552.184-.85.78-.667 1.333l.793 2.379-1.086-1.086c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l1.102 1.102c-.447.173-.853.419-1.219.717l-.405-1.515c-.143-.534-.697-.852-1.224-.708-.534.143-.851.69-.708 1.224l.396 1.485-1.662-1.877c-.146-.164-.345-.285-.578-.333-.57-.117-1.127.25-1.244.82s.251 1.128.822 1.245l2.454.503-1.48.396c-.533.143-.85.691-.707 1.225.119.447.523.741.965.741l.26-.034 1.508-.404c-.039.231-.073.465-.073.706 0 .242.034.475.071.707l-1.508-.404c-.532-.142-1.081.173-1.225.707-.144.533.174 1.082.707 1.225l1.483.397-2.455.502c-.216.044-.42.156-.577.334-.387.436-.347 1.102.089 1.487.436.387 1.103.347 1.488-.089l1.665-1.878-.398 1.484c-.144.533.173 1.082.707 1.225l.26.034c.441 0 .845-.294.965-.741l.406-1.515c.366.298.771.544 1.22.716l-1.104 1.102c-.391.39-.391 1.023 0 1.414s1.023.391 1.414 0l.706-.707h.252l-.666 1.999c-.069.209-.075.441 0 .667.184.552.781.851 1.333.666.553-.184.851-.78.667-1.333l-.666-1.999h.252l.707.707c.196.195.451.293.707.293s.512-.098.707-.293c.391-.39.391-1.023 0-1.414l-1.102-1.103c.448-.172.854-.418 1.22-.717l.406 1.517c.12.447.523.741.965.741l.26-.034c.533-.143.851-.691.707-1.225l-.397-1.48 1.662 1.874c.146.165.345.285.577.333.57.117 1.128-.251 1.244-.821.117-.57-.251-1.127-.821-1.244zm-7.428-.634c-1.379 0-2.5-1.121-2.5-2.5s1.121-2.5 2.5-2.5 2.5 1.121 2.5 2.5-1.121 2.5-2.5 2.5z" />
</svg>
</div>
</div>
</div>
</div>
<div class="direction_ltr">
<div class="c-1">
<div class="c-2">
<div class="content content3">
<svg class="cardpro-iconBack_Common cardpro-iconback3" fill="#000000" height="19px"
width="19px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 496 496"
xml:space="preserve">
<g>
<g>
<path
d="M440,336c-5.552,0-10.6,1.968-14.672,5.144l-7.96-4.6L455.68,317.6l-7.096-14.344l-47.872,23.672l-17.984-10.384
L421.04,297.6l-7.096-14.344l-47.872,23.672l-17.984-10.384L386.4,277.6l-7.096-14.344l-47.872,23.672L289.296,262.6l52.608-14.6
l-52.608-14.608l42.136-24.328l47.872,23.672L386.4,218.4l-38.312-18.944l17.984-10.384l47.872,23.672l7.096-14.344
l-38.312-18.944l17.984-10.384l47.872,23.672l7.096-14.344l-38.312-18.944l7.96-4.6C429.4,158.032,434.448,160,440,160
c13.232,0,24-10.768,24-24s-10.768-24-24-24s-24,10.768-24,24c0,1.856,0.256,3.648,0.664,5.384l-7.296,4.208l2.752-42.648
l-15.968-1.032l-3.432,53.296l-17.984,10.384l2.752-42.648l-15.968-1.032l-3.432,53.296l-17.984,10.384l2.752-42.648
l-15.968-1.032l-3.432,53.296l-42.208,24.368l13.728-53.84L256,204.688V156.28l44.44-29.624l-8.872-13.312L256,137.056v-20.768
l44.44-29.624l-8.872-13.312L256,97.056V76.288l44.44-29.624l-8.872-13.312L256,57.056V46.528c9.288-3.312,16-12.112,16-22.528
c0-13.232-10.768-24-24-24s-24,10.768-24,24c0,10.416,6.712,19.216,16,22.528v10.528l-35.56-23.712l-8.872,13.312L240,76.28
v20.768l-35.56-23.712l-8.872,13.312L240,116.28v20.768l-35.56-23.712l-8.872,13.312L240,156.28v48.408l-38.952-38.952
l13.728,53.84l-42.208-24.368l-3.432-53.296l-15.968,1.032l2.752,42.648l-17.984-10.384l-3.432-53.296l-15.968,1.032l2.752,42.648
l-17.984-10.384l-3.432-53.296l-15.968,1.032l2.752,42.648l-7.296-4.208C79.744,139.648,80,137.856,80,136
c0-13.232-10.768-24-24-24s-24,10.768-24,24s10.768,24,24,24c5.552,0,10.6-1.968,14.672-5.144l7.96,4.6L40.32,178.4l7.096,14.344
l47.872-23.672l17.984,10.384L74.96,198.4l7.096,14.344l47.872-23.672l17.984,10.384L109.6,218.4l7.096,14.344l47.872-23.672
l42.136,24.328L154.096,248l52.608,14.608l-42.136,24.328l-47.872-23.672L109.6,277.6l38.312,18.944l-17.984,10.384
l-47.872-23.672L74.96,297.6l38.312,18.944l-17.984,10.384l-47.872-23.672L40.32,317.6l38.312,18.944l-7.96,4.6
C66.6,337.968,61.552,336,56,336c-13.232,0-24,10.768-24,24s10.768,24,24,24s24-10.768,24-24c0-1.856-0.256-3.648-0.664-5.384
l7.288-4.208l-2.752,42.648l15.968,1.032l3.432-53.296l17.984-10.384l-2.752,42.648l15.968,1.032l3.432-53.296l17.984-10.384
l-2.752,42.648l15.968,1.032l3.432-53.296l42.208-24.368l-13.728,53.84L240,291.312v48.408l-44.44,29.624l8.872,13.312
L240,358.944v20.768l-44.44,29.624l8.872,13.312L240,398.944v20.768l-44.44,29.624l8.872,13.312L240,438.944v10.528
c-9.288,3.312-16,12.112-16,22.528c0,13.232,10.768,24,24,24s24-10.768,24-24c0-10.416-6.712-19.216-16-22.528v-10.528
l35.56,23.712l8.872-13.312L256,419.72v-20.768l35.56,23.712l8.872-13.312L256,379.72v-20.768l35.56,23.712l8.872-13.312
L256,339.72v-48.408l38.952,38.952l-13.728-53.84l42.208,24.368l3.432,53.296l15.968-1.032l-2.752-42.648l17.984,10.384
l3.432,53.296l15.968-1.032l-2.752-42.648l17.984,10.384l3.432,53.296l15.968-1.032l-2.752-42.648l7.296,4.208
c-0.384,1.736-0.64,3.528-0.64,5.384c0,13.232,10.768,24,24,24s24-10.768,24-24S453.232,336,440,336z M440,128
c4.416,0,8,3.592,8,8s-3.584,8-8,8c-4.416,0-8-3.592-8-8S435.584,128,440,128z M56,144c-4.416,0-8-3.592-8-8s3.584-8,8-8
s8,3.592,8,8S60.416,144,56,144z M56,368c-4.416,0-8-3.592-8-8c0-4.408,3.584-8,8-8s8,3.592,8,8C64,364.408,60.416,368,56,368z
M248,16c4.416,0,8,3.592,8,8s-3.584,8-8,8c-4.416,0-8-3.592-8-8S243.584,16,248,16z M248,480c-4.416,0-8-3.592-8-8
c0-4.408,3.584-8,8-8s8,3.592,8,8C256,476.408,252.416,480,248,480z M259.096,254.384l5.952,23.344L248,260.688l-17.048,17.048
l5.952-23.344l-23-6.392l23-6.384l-5.952-23.344L248,235.312l17.048-17.048l-5.952,23.344l23,6.392L259.096,254.384z M440,368
c-4.416,0-8-3.592-8-8c0-4.408,3.584-8,8-8c4.416,0,8,3.592,8,8C448,364.408,444.416,368,440,368z" />
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- end snippet -->
答案1
得分: 1
I would recommend trying a different approach, using CSS for animations and transformations. Here's a basic example to illustrate the idea of CSS animations:
CSS动画始终比JavaScript运行更快，而且可以更轻松和清晰地执行动画效果。
甚至可以无限次重复动画，使用JavaScript或不同的CSS类来生成交错的项目，完全取决于您的想象力。
希望这对您有所帮助。
<!-- 开始代码片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-js -->
const items = document.querySelectorAll(".item");
items.forEach(item => item.classList.add("animating"));
// 解除注释以停止动画
// setTimeout(() => {
// items.forEach(item => item.classList.remove("animating"));
// }, 3000);
<!-- 语言: lang-css -->
.item {
position: absolute;
}
.item.item-a {
margin-left: 100px;
}
.item.item-b {
margin-left: 200px;
}
.item.item-c {
margin-left: 300px;
}
.animating.item-a {
animation: fall 3s linear infinite;
}
.animating.item-b {
animation: fall-reverse 5s linear infinite;
}
.animating.item-c {
animation: fall-reverse 4s linear infinite;
}
@keyframes fall {
0% {
top: 0;
left: 0;
transform: rotateY(0deg);
}
50% {
top: 50%;
left: 50%;
transform: rotateY(180deg);
}
100% {
top: 100%;
left: 0;
transform: rotateY(360deg);
}
}
@keyframes fall-reverse {
0% {
top: 0;
right: 0;
transform: rotateY(0deg);
}
50% {
top: 50%;
right: 50%;
transform: rotateY(180deg);
}
100% {
top: 100%;
right: 0;
transform: rotateY(360deg);
}
}
<!-- 语言: lang-html -->
<div class="item item-a">A</div>
<div class="item item-b">B</div>
<div class="item item-c">C</div>
<!-- 结束代码片段 -->
英文:
I would recommend to try a different approach, try using CSS to do the animations and tranformations, here it is a base example, only to explain the idea of CSS animations
CSS animations will always run faster than javascript, and you can perform animations in a easier and cleaner way
Even you can repeat the animation infinite and with javascript or different css clases generate stagger items and then is up to your imagination
Hope it helps
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const items = document.querySelectorAll(".item");
items.forEach(item => item.classList.add("animating"));
// uncomment this to stop the animation
// setTimeout(() => {
// items.forEach(item => item.classList.remove("animating"));
// }, 3000);
<!-- language: lang-css -->
.item {
position: absolute;
}
.item.item-a {
margin-left: 100px;
}
.item.item-b {
margin-left: 200px;
}
.item.item-c {
margin-left: 300px;
}
.animating.item-a {
animation: fall 3s linear infinite;
}
.animating.item-b {
animation: fall-reverse 5s linear infinite;
}
.animating.item-c {
animation: fall-reverse 4s linear infinite;
}
@keyframes fall {
0% {
top: 0;
left: 0;
transform: rotateY(0deg);
}
50% {
top: 50%;
left: 50%;
transform: rotateY(180deg);
}
100% {
top: 100%;
left: 0;
transform: rotateY(360deg);
}
}
@keyframes fall-reverse {
0% {
top: 0;
right: 0;
transform: rotateY(0deg);
}
50% {
top: 50%;
right: 50%;
transform: rotateY(180deg);
}
100% {
top: 100%;
right: 0;
transform: rotateY(360deg);
}
}
<!-- language: lang-html -->
<div class="item item-a">A</div>
<div class="item item-b">B</div>
<div class="item item-c">C</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论