javascript - Random Positioning Images

On my Solar System website I am looking to have a large amount of small shining white circles (Maybe 1 or 2px big) dotted in random places on the background each time the website is visited. The circles don't have to be scr="" images, it can just be plain white coloured circles.

html {
  background-color: #000;
}
.sun {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;
}
.earth {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  box-shadow: green 0 0 25px;
}
.earth-orbit {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  /*border-radius: 50%;*/
  /*border: 1px dotted gray;*/
  -webkit-animation: spin-right 10s linear infinite;
}
.moon {
  height: 10px;
  width: 10px;
}
.moon-orbit {
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin-left: -12.5px;
  margin-bottom: -37px;
  border: 1px solid rgba(255, 0, 0, 0.1);
  border-radius: 50%;
  -webkit-animation: spin-right 1s linear infinite;
}
@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Vanishing Act</title>
  <link rel='stylesheet' type='text/css' href='stylesheet.css' />
  <script type='text/javascript' src='script.js'></script>
</head>

<body>
  <img class="sun" src="sun_transparent.png">
  </div>
  <div class="earth-orbit">
    <div class='moon-orbit'>
      <img class="moon" src=".png" />
    </div>

    <img class="earth" src=".png" />
  </div>
</body>

</html>

html {
  background-color: #000;
}
.sun {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  box-shadow: rgb(204, 153, 0) 0px 0px 50px 0px;
}
.earth {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  box-shadow: green 0 0 25px;
}
.earth-orbit {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  /*border-radius: 50%;*/
  /*border: 1px dotted gray;*/
  -webkit-animation: spin-right 10s linear infinite;
}
.moon {
  height: 10px;
  width: 10px;
}
.moon-orbit {
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin-left: -12.5px;
  margin-bottom: -37px;
  border: 1px solid rgba(255, 0, 0, 0.1);
  border-radius: 50%;
  -webkit-animation: spin-right 1s linear infinite;
}
@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Vanishing Act</title>
  <link rel='stylesheet' type='text/css' href='stylesheet.css' />
  <script type='text/javascript' src='script.js'></script>
</head>

<body>
  <img class="sun" src="sun_transparent.png">
  </div>
  <div class="earth-orbit">
    <div class='moon-orbit'>
      <img class="moon" src="https://dl.dropboxusercontent./u/24899062/cc/moon.png" />
    </div>

    <img class="earth" src="https://dl.dropboxusercontent./u/24899062/cc/earth.png" />
  </div>
</body>

</html>

Share Improve this question edited Aug 18, 2015 at 23:34 Kijewski 26k14 gold badges107 silver badges147 bronze badges asked Dec 7, 2014 at 0:27 user4191887 2773 silver badges15 bronze badges

1 And, what's your question? Where did you get stuck? – David Thomas Commented Dec 7, 2014 at 0:29
My question is how could I do it, I don't want to just individually position each star, I need javascript to do it for me and randomize it too. – user4191887 Commented Dec 7, 2014 at 0:32
Okay, but where did you get stuck..? – David Thomas Commented Dec 7, 2014 at 0:34
That is my problem, I have no idea of how I would do it. – user4191887 Commented Dec 7, 2014 at 0:35

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

That's a nice effect.

You can create a star class:

.star {
  position: fixed;
  width: 1px;
  height: 1px;
  background: white;
}

To ensure that stars are always behind the solar system objects, apply a z-index to your solar system images:

img {
  z-index: 1;
}

You can add random stars to the sky by giving them left/top coordinates based on multiplying Math.random() by the screen's width and height:

for(var i = 0 ; i < 500 ; i++) {
  var x = Math.random()*screen.width;
  var y = Math.random()*screen.height;
  var star= document.createElement('div');
  star.className= 'star';
  star.style.left= x+'px';
  star.style.top= y+'px';
  document.body.appendChild(star);
}

html {
  background-color: #000;
}

img {
  z-index: 1;
}

.star {
  position: fixed;
  width: 1px;
  height: 1px;
  background: white;
}

.sun {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50%;
}
.earth {
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
.earth-orbit {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  /*border-radius: 50%;*/
  /*border: 1px dotted gray;*/
  -webkit-animation: spin-right 10s linear infinite;
}
.moon {
  height: 10px;
  width: 10px;
}
.moon-orbit {
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin-left: -12.5px;
  margin-bottom: -37px;
  border: 1px solid rgba(255, 0, 0, 0.1);
  border-radius: 50%;
  -webkit-animation: spin-right 1s linear infinite;
}
@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

<img class="sun" src="http://www.mprgroup/images/august2011/sun_transparent.png">  
<div class="earth-orbit">
  <div class='moon-orbit'>
    <img class="moon" src="http://space-facts./wp-content/uploads/moon-transparent.png" />
  </div>
  <img class="earth" src="http://space-facts./wp-content/uploads/earth-transparent.png" />
</div>

Instead of "polluting" the DOM with a large number of object which ultimately can contribute to the page being rendered slower, why not consider a solution using canvas to draw the stars into?

This will be a single, but larger, DOM element but can be redrawn very fast and you have some artistic freedom as well if needed:

// load images (just one in this example)
sun = new Image();
sun.onload = function() {
  renderStars(750, 0.5, 1.5);
}
sun.src = "http://www.mprgroup/images/august2011/sun_transparent.png";

function renderStars(count, minSize, maxSize) {
  var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),

    i = 0,
    x, y, size;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  for (; i < count; i++) {
    x = canvas.width * Math.random();
    y = canvas.height * Math.random();
    size = minSize + (maxSize - minSize) * Math.random();

    // draw circle
    ctx.moveTo(x + size, y);
    ctx.arc(x, y, size, 0, 2 * Math.PI);
    ctx.closePath();
  }

  ctx.fillStyle = "#fff";
  ctx.fill();

  var r = 100; // image "radius"
  ctx.drawImage(sun, (canvas.width - r) * 0.5, (canvas.height - r) * 0.5, r, r);
}

 document.getElementById("refresh").onclick = function() {
  renderStars(750, 0.5, 1.5)
};

#canvas {background: #000}
#refresh {position: fixed}

<button id="refresh">@</button>
<canvas id="canvas" width="500" height="500"></canvas>

Finally draw the sun etc. on top of the stars (drawImage(sun, x, y [,width, height]));

The canvas needs to redrawn every time its size changes.

To set the canvas to fill the window (assuming you use CSS to place it fixed in the top left corner):

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Random Positioning Images - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)