I did a animation using javascript. Using single ball shape goes top of the page. Anybody would help how to create multiple balls like clone.. I just want the following tasks..
- Animation with multiple balls (Bottom to top)
- Each ball position (Left position only) is random.
- Infinite process.
Is it possible to achieve through javascript. Thanks in advance :)
.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
bottom: -60px;
left: 2px;
transition: 0.1s;
}
body{
overflow: hidden;
position: relative;
background: violet
}
#box{
width: 100%;
height: 100%;
}<body>
<div id="box"></div>
<script type="text/javascript">
var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet'];
var windowHeight = 0;
var parendElement;
window.onload = function () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
generateBall();
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var para = document.createElement("p");
para.setAttribute("class", 'circle');
para.style.background = colors[Math.floor(Math.random() * colors.length)];
para.style.left = leftPos + "px";
parendElement.appendChild(para);
var btmPos = 0;
var animationInterval = setInterval(function () {
if (btmPos < windowHeight) {
btmPos += 5;
} else {
console.log("yes");
clearInterval(animationInterval);
parendElement.removeChild(para);
}
para.style.bottom = btmPos + "px";
para.style.left = leftPos + "px";
}, 100);
}
</script>
</body>I did a animation using javascript. Using single ball shape goes top of the page. Anybody would help how to create multiple balls like clone.. I just want the following tasks..
- Animation with multiple balls (Bottom to top)
- Each ball position (Left position only) is random.
- Infinite process.
Is it possible to achieve through javascript. Thanks in advance :)
.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
bottom: -60px;
left: 2px;
transition: 0.1s;
}
body{
overflow: hidden;
position: relative;
background: violet
}
#box{
width: 100%;
height: 100%;
}<body>
<div id="box"></div>
<script type="text/javascript">
var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet'];
var windowHeight = 0;
var parendElement;
window.onload = function () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
generateBall();
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var para = document.createElement("p");
para.setAttribute("class", 'circle');
para.style.background = colors[Math.floor(Math.random() * colors.length)];
para.style.left = leftPos + "px";
parendElement.appendChild(para);
var btmPos = 0;
var animationInterval = setInterval(function () {
if (btmPos < windowHeight) {
btmPos += 5;
} else {
console.log("yes");
clearInterval(animationInterval);
parendElement.removeChild(para);
}
para.style.bottom = btmPos + "px";
para.style.left = leftPos + "px";
}, 100);
}
</script>
</body>- With regards to your tasks, what have you tried? If you don't know where to start, list your thought process on the matter. – Matt Way Commented Aug 23, 2016 at 10:33
2 Answers
Reset to default 5This might help you..
var canvas = {
element: document.getElementById('canvas'),
width: 600,
height: 400,
initialize: function () {
this.element.style.width = this.width + 'px';
this.element.style.height = this.height + 'px';
document.body.appendChild(this.element);
}
};
var Ball = {
create: function (color, dx, dy) {
var newBall = Object.create(this);
newBall.dx = dx;
newBall.dy = dy;
newBall.width = 40;
newBall.height = 40;
newBall.element = document.createElement('div');
newBall.element.style.backgroundColor = color;
newBall.element.style.width = newBall.width + 'px';
newBall.element.style.height = newBall.height + 'px';
newBall.element.className += ' ball';
newBall.width = parseInt(newBall.element.style.width);
newBall.height = parseInt(newBall.element.style.height);
canvas.element.appendChild(newBall.element);
return newBall;
},
moveTo: function (x, y) {
this.element.style.left = x + 'px';
this.element.style.top = y + 'px';
},
changeDirectionIfNecessary: function (x, y) {
if (x < 0 || x > canvas.width - this.width) {
this.dx = -this.dx;
}
if (y < 0 || y > canvas.height - this.height) {
this.dy = -this.dy;
}
},
draw: function (x, y) {
this.moveTo(x, y);
var ball = this;
setTimeout(function () {
ball.changeDirectionIfNecessary(x, y);
ball.draw(x + ball.dx, y + ball.dy);
}, 1000 / 60);
}
};
canvas.initialize();
var ball1 = Ball.create("blue", 4, 3);
var ball2 = Ball.create("red", 1, 5);
var ball3 = Ball.create("green", 2, 2);
ball1.draw(70, 0);
ball2.draw(20, 200);
ball3.draw(300, 330);body {
text-align: center;
}
#canvas {
position: relative;
background-color: #ccddcc;
margin: 1em auto;
}
.ball {
background-color: black;
position: absolute;
display: inline-block;
border-radius: 50%;
}<h1>Bouncing Balls</h1>
<p>These bouncing balls are made with pletely raw JavaScript,
just with divs. We don't use jQuery. We don't use canvas.</p>
<div id="canvas"></div>Just add this code
var interval = setInterval(function () {
generateBall();
}, 1000);
into your window.onload(). It works :) ..
.circle{
width: 50px;
height: 50px;
border-radius: 30px;
position: absolute;
bottom: -60px;
left: 2px;
transition: 0.1s;
}
body{
overflow: hidden;
position: relative;
background: violet
}
#box{
width: 100%;
height: 100%;
}<body>
<div id="box"></div>
<script type="text/javascript">
var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet'];
var windowHeight = 0;
var parendElement;
window.onload = function () {
parendElement = document.getElementById("box");
windowHeight = window.innerHeight;
document.body.style.height = windowHeight + "px";
console.log(document.body.style.height);
generateBall();
//Creates ball for every 1 second interval
var interval = setInterval(function () {
generateBall();
}, 1000);
};
function generateBall() {
var leftPos = Math.floor((Math.random() * window.innerWidth) - 30);
var para = document.createElement("p");
para.setAttribute("class", 'circle');
para.style.background = colors[Math.floor(Math.random() * colors.length)];
para.style.left = leftPos + "px";
parendElement.appendChild(para);
var btmPos = 0;
var animationInterval = setInterval(function () {
if (btmPos < windowHeight) {
btmPos += 5;
} else {
console.log("yes");
clearInterval(animationInterval);
parendElement.removeChild(para);
}
para.style.bottom = btmPos + "px";
para.style.left = leftPos + "px";
}, 100);
}
</script>
</body>