Restricting Javascript based Background Animation to some Particular Div

1

I have been trying to use an Animated Background, using Javascript I found on this link : https://codepen.io/nashvail/pen/wpGgXO

It's working fine. But the problem is that once implemented, it's all over the screen.

I want the animations to be in some particular DIV element of my web page.

Help me Out.

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.body.append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;

  border-radius: 100%;

  opacity: 0.7;

}

<div class="ball">

</div>

javascript css

share|improve this question

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

add a comment | 

1

I have been trying to use an Animated Background, using Javascript I found on this link : https://codepen.io/nashvail/pen/wpGgXO

It's working fine. But the problem is that once implemented, it's all over the screen.

I want the animations to be in some particular DIV element of my web page.

Help me Out.

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.body.append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;

  border-radius: 100%;

  opacity: 0.7;

}

<div class="ball">

</div>

javascript css

share|improve this question

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

add a comment | 

1

1

1

I have been trying to use an Animated Background, using Javascript I found on this link : https://codepen.io/nashvail/pen/wpGgXO

It's working fine. But the problem is that once implemented, it's all over the screen.

I want the animations to be in some particular DIV element of my web page.

Help me Out.

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.body.append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;

  border-radius: 100%;

  opacity: 0.7;

}

<div class="ball">

</div>

javascript css

share|improve this question

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

I have been trying to use an Animated Background, using Javascript I found on this link : https://codepen.io/nashvail/pen/wpGgXO

It's working fine. But the problem is that once implemented, it's all over the screen.

I want the animations to be in some particular DIV element of my web page.

Help me Out.

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.body.append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;

  border-radius: 100%;

  opacity: 0.7;

}

<div class="ball">

</div>

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.body.append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;

  border-radius: 100%;

  opacity: 0.7;

}

<div class="ball">

</div>

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.body.append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;

  border-radius: 100%;

  opacity: 0.7;

}

<div class="ball">

</div>

javascript css

javascript css

share|improve this question

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

share|improve this question

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

share|improve this question

share|improve this question

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

edited Nov 22 '18 at 9:22

Salomon Zhang

8651427

8651427

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

asked Nov 22 '18 at 8:16

zeeshan alizeeshan ali

5315

5315

add a comment | 

add a comment | 

3 Answers
3

active

oldest

votes

2

Like this?

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}%`;

  ball.style.top = `${Math.floor(Math.random() * 100)}%`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.getElementById("box").append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

#box{

  width: 300px;

  height: 300px;

  border: 1px solid red;

  position: relative;

  overflow: hidden;

}

<div id="box"></div>

share|improve this answer

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

add a comment | 

2

The issue is, you are appending balls to the body. That's why they are appearing all over the screen. You have to make a container with some width and height and append the created balls to that container only:

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.querySelector('.ballContainer').append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

.ballContainer{

  width: 350px;

  height: 175px;

  border: 1px solid gray;

  position: relative;

  overflow: hidden;

  background-color: lightgray;

}

<div class="ballContainer">

</div>

share|improve this answer

edited Nov 22 '18 at 10:44

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

add a comment | 

0

The balls run a random path. That means some of balls will go out of bounds (your div).

You can add CSS to hide the scroll bars.

html * {

    overflow: hidden;

}

share|improve this answer

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426495%2frestricting-javascript-based-background-animation-to-some-particular-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

2

Like this?

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}%`;

  ball.style.top = `${Math.floor(Math.random() * 100)}%`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.getElementById("box").append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

#box{

  width: 300px;

  height: 300px;

  border: 1px solid red;

  position: relative;

  overflow: hidden;

}

<div id="box"></div>

share|improve this answer

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

add a comment | 

2

Like this?

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}%`;

  ball.style.top = `${Math.floor(Math.random() * 100)}%`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.getElementById("box").append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

#box{

  width: 300px;

  height: 300px;

  border: 1px solid red;

  position: relative;

  overflow: hidden;

}

<div id="box"></div>

share|improve this answer

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

add a comment | 

2

2

2

Like this?

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}%`;

  ball.style.top = `${Math.floor(Math.random() * 100)}%`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.getElementById("box").append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

#box{

  width: 300px;

  height: 300px;

  border: 1px solid red;

  position: relative;

  overflow: hidden;

}

<div id="box"></div>

share|improve this answer

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

Like this?

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}%`;

  ball.style.top = `${Math.floor(Math.random() * 100)}%`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.getElementById("box").append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

#box{

  width: 300px;

  height: 300px;

  border: 1px solid red;

  position: relative;

  overflow: hidden;

}

<div id="box"></div>

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}%`;

  ball.style.top = `${Math.floor(Math.random() * 100)}%`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.getElementById("box").append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

#box{

  width: 300px;

  height: 300px;

  border: 1px solid red;

  position: relative;

  overflow: hidden;

}

<div id="box"></div>

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}%`;

  ball.style.top = `${Math.floor(Math.random() * 100)}%`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.getElementById("box").append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

#box{

  width: 300px;

  height: 300px;

  border: 1px solid red;

  position: relative;

  overflow: hidden;

}

<div id="box"></div>

share|improve this answer

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

answered Nov 22 '18 at 8:25

KhazulKhazul

1666

1666

add a comment | 

add a comment | 

2

The issue is, you are appending balls to the body. That's why they are appearing all over the screen. You have to make a container with some width and height and append the created balls to that container only:

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.querySelector('.ballContainer').append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

.ballContainer{

  width: 350px;

  height: 175px;

  border: 1px solid gray;

  position: relative;

  overflow: hidden;

  background-color: lightgray;

}

<div class="ballContainer">

</div>

share|improve this answer

edited Nov 22 '18 at 10:44

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

add a comment | 

2

The issue is, you are appending balls to the body. That's why they are appearing all over the screen. You have to make a container with some width and height and append the created balls to that container only:

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.querySelector('.ballContainer').append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

.ballContainer{

  width: 350px;

  height: 175px;

  border: 1px solid gray;

  position: relative;

  overflow: hidden;

  background-color: lightgray;

}

<div class="ballContainer">

</div>

share|improve this answer

edited Nov 22 '18 at 10:44

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

add a comment | 

2

2

2

The issue is, you are appending balls to the body. That's why they are appearing all over the screen. You have to make a container with some width and height and append the created balls to that container only:

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.querySelector('.ballContainer').append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

.ballContainer{

  width: 350px;

  height: 175px;

  border: 1px solid gray;

  position: relative;

  overflow: hidden;

  background-color: lightgray;

}

<div class="ballContainer">

</div>

share|improve this answer

edited Nov 22 '18 at 10:44

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

The issue is, you are appending balls to the body. That's why they are appearing all over the screen. You have to make a container with some width and height and append the created balls to that container only:

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.querySelector('.ballContainer').append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

.ballContainer{

  width: 350px;

  height: 175px;

  border: 1px solid gray;

  position: relative;

  overflow: hidden;

  background-color: lightgray;

}

<div class="ballContainer">

</div>

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.querySelector('.ballContainer').append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

.ballContainer{

  width: 350px;

  height: 175px;

  border: 1px solid gray;

  position: relative;

  overflow: hidden;

  background-color: lightgray;

}

<div class="ballContainer">

</div>

// Some random colors

const colors = ["#3CC157", "#2AA7FF", "#1B1B1B", "#FCBC0F", "#F85F36"];



const numBalls = 50;

const balls = ;



for (let i = 0; i < numBalls; i++) {

  let ball = document.createElement("div");

  ball.classList.add("ball");

  ball.style.background = colors[Math.floor(Math.random() * colors.length)];

  ball.style.left = `${Math.floor(Math.random() * 100)}vw`;

  ball.style.top = `${Math.floor(Math.random() * 100)}vh`;

  ball.style.transform = `scale(${Math.random()})`;

  ball.style.width = `${Math.random()}em`;

  ball.style.height = ball.style.width;

  

  balls.push(ball);

  document.querySelector('.ballContainer').append(ball);

}



// Keyframes

balls.forEach((el, i, ra) => {

  let to = {

    x: Math.random() * (i % 2 === 0 ? -11 : 11),

    y: Math.random() * 12

  };



  let anim = el.animate(

    [

      { transform: "translate(0, 0)" },

      { transform: `translate(${to.x}rem, ${to.y}rem)` }

    ],

    {

      duration: (Math.random() + 1) * 2000, // random duration

      direction: "alternate",

      fill: "both",

      iterations: Infinity,

      easing: "ease-in-out"

    }

  );

});

.ball {

  position: absolute;  

  border-radius: 100%;

  opacity: 0.7;

  

}

.ballContainer{

  width: 350px;

  height: 175px;

  border: 1px solid gray;

  position: relative;

  overflow: hidden;

  background-color: lightgray;

}

<div class="ballContainer">

</div>

share|improve this answer

edited Nov 22 '18 at 10:44

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

share|improve this answer

share|improve this answer

edited Nov 22 '18 at 10:44

edited Nov 22 '18 at 10:44

edited Nov 22 '18 at 10:44

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

answered Nov 22 '18 at 8:30

MamunMamun

27.9k71830

27.9k71830

add a comment | 

add a comment | 

0

The balls run a random path. That means some of balls will go out of bounds (your div).

You can add CSS to hide the scroll bars.

html * {

    overflow: hidden;

}

share|improve this answer

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

add a comment | 

0

The balls run a random path. That means some of balls will go out of bounds (your div).

You can add CSS to hide the scroll bars.

html * {

    overflow: hidden;

}

share|improve this answer

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

add a comment | 

0

0

0

The balls run a random path. That means some of balls will go out of bounds (your div).

You can add CSS to hide the scroll bars.

html * {

    overflow: hidden;

}

share|improve this answer

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

The balls run a random path. That means some of balls will go out of bounds (your div).

You can add CSS to hide the scroll bars.

html * {

    overflow: hidden;

}

share|improve this answer

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

answered Nov 22 '18 at 8:36

Salomon ZhangSalomon Zhang

8651427

8651427

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426495%2frestricting-javascript-based-background-animation-to-some-particular-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here