我希望某些 div 在 Javascript 中在屏幕上移动，有点像 this website (向下滚动)，仅水平滚动，或类似 here (也是垂直的，但我更喜欢水平的)
这是我的 HTML:
<div id = "creators" class = "big-part">
<h3>Creators</h3>
<div class = "creator_name">
<h4>Name</h4>
<p>Text</p>
</div>
<div class = "creator_name">
<h4>Name</h4>
<p>Text</p>
</div>
<div class = "creator_name">
<h4>Name</h4>
<p>Text</p>
</div>
</div>
我的 CSS:
.big-part {
color: rgb(230, 230, 230);
background-color: #3c3c91;
border-radius: 21px;
padding: 0.5% 1.5%;
margin-top: 2%;
}
.creator_name {
background-color: rgb(230, 230, 230);
height: 300px;
color: #3c3c91;
border-radius: 15px;
padding: 1%;
}
.creator_name {
width: 25%;
display: inline-block;
margin: 2% 2%;
}
和我在 script 标签中的 javascript:
var creatorEl= document.getElementsByClassName("creator_name");
var startTime = new Date().getTime();
var moveTheDiv = function() {
var currTime = new Date().getTime();
var secondsElapsed = ((currTime - startTime)/1000);
var newLeft = parseFloat(secondsElapsed) * 30 + "px";
creatorEl.style.left = newLeft;
window.requestAnimationFrame(walkTheCat);
};
moveTheDiv();
谢谢!
顺便说一下，如果只有当客户端/用户向下滚动并且 div 可见时才显示此动画，那就太好了。 如果你愿意，你可以回答一半的问题，我会接受任何帮助。
编辑: 只有当我为每个 ID 添加一个 ID 并使用 ID 移动它们时，我才能让它们移动，有没有办法同时移动它们但只使用一个类？
最佳答案
您可能会发现动画引擎 Velocity.js 很有帮助。 http://julian.com/research/velocity/ (我不隶属于创作者)。
您实现类似于 jQuery 的 .animate() 方法的功能。
这是一个如何旋转 div 的例子:
$(document).ready(function(){
$('#divToAnimate').velocity(
{ rotateX: "+=0",
rotateY: "+=360",
height: '+=50px',
width: '+=100px'
},
{
duration:4000,
loop:false,
easing:'linear'
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample animation with Velocity.js</title>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<!-- Velocity.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div id="divToAnimate">Example Div to Animate</div>
</body>
</html>希望对您有所帮助，祝您好运!
关于javascript - 如何让同一类的两个 div 在屏幕上移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34424821/