CODEWITHSUNDEEP
javascripthtmlcss
user4191887
user4191887

Reputation: 277

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="https://dl.dropboxusercontent.com/u/24899062/cc/moon.png" />
    </div>

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

</html>

Upvotes: 4

Views: 2776

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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.net/images/august2011/sun_transparent.png">  
<div class="earth-orbit">
  <div class='moon-orbit'>
    <img class="moon" src="http://space-facts.com/wp-content/uploads/moon-transparent.png" />
  </div>
  <img class="earth" src="http://space-facts.com/wp-content/uploads/earth-transparent.png" />
</div>

Upvotes: 5

user1693593
user1693593

Reputation:

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.net/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;

Upvotes: 3

Related Questions