如何讓同一班的兩個div在屏幕上移動？

我想一定div的在屏幕上移動在Javascript中，有點像this website（向下滾動），只有水平，或類似here（也垂直，但我喜歡它的水平）如何讓同一班的兩個div在屏幕上移動？

這裏是我的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%; 
}

和我的JavaScript是在script標籤：

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移動它們移動，是有辦法他們兩個在同一時間移動，但只使用一個類？

來源

2015-12-22 FlipFloop

你在尋找一些視差滾動插件嗎？ – rahul

不，只是一個移動的div – FlipFloop

你的currnet代碼有什麼問題？ – Anders

您可能會發現動畫引擎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>

希望有幫助，祝你好運！

來源

2015-12-29 00:15:58 valmsmith39a

如何讓同一班的兩個div在屏幕上移動？

回答

相關問題