The Space 'Sun&Earth' | HTML,CSS,JavaScript

x32x01 · Mar 20, 2021

The Space 'Sun&Earth' | HTML,CSS,JavaScript

===== The Code =====

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Sun &amp; Earth</title>
<style>
      body {
  margin:0px;
  height:100vh;
  padding:0px;
  overflow:hidden;
background: radial-gradient(ellipse at center, rgba(15,20,25,1) 19%,rgba(10,7,15,1) 100%);
}

#canvasContainer {
position:absolute;
z-index:-2;
background: radial-gradient(ellipse at center, rgba(255,34,0,1) 0%, rgba(219,190,3,1) 67%, rgba(255,255,255,1) 70%, rgba(247,255,3,1) 100%);
  margin-left:calc(50% - 100px);
  margin-top:calc(50vh - 100px);
  display:inline-block;
  width:200px;
  height:200px;
border-radius:180px;
box-sizing: border-box;
border:0px solid white;
box-shadow: 0px 0px 15px 5px rgba(255,233,145,1);
}

#mainstage {
  opacity:1;
  left:10%;
  top:10%;
  width:80%;
  height:80%;
  position:relative;
  overflow:hidden;
  margin:0px;
  padding:0px;
  background-color:transparent;
  border-radius:180px;
  animation: planetRotation 30s infinite;
  animation-timing-function: linear;
}
#filterContainer {
  overflow:hidden;
  position:relative;
  width:130%;
  height:130%;
  left: -17%;
  top: -17%;
  filter:blur(4px) url(#svgFilter);
}

@keyframes planetRotation {
  0%   {transform:rotate(0deg);}
  50%  {transform:rotate(180deg);}
  100% {transform:rotate(360deg);}
}

/* #backdrop, #backdrop2 {
  position:absolute;
  width:100%;
  height:100vh;
  background: rgba(76,76,76,1);
background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%);
top:0px;
left:0px;
z-index: -2;
opacity:0.1;
filter:blur(25px) url(#skyFilter);
animation: skyFlow 20s infinite;
animation-timing-function: linear;
}

@keyframes skyFlow {
  0%   {transform:scale(1,1);opacity:0.0;}
  25%  {transform:scale(1.3,1.3);opacity:0.02}
  50%  {transform:scale(1.5,1.5);opacity:0.04}
  75%  {transform:scale(1.8,1.8);opacity:0.015}
  100% {transform:scale(2,2);opacity:0.0}
}

#backdrop2 {
opacity:0;
animation-delay: 10s;
} */

@keyframes starShine {
  0%   {opacity:0.5}
  25%  {opacity:0.2}
  50%  {opacity:0.8}
  75%  {opacity:0.1}
  100% {opacity:0.5}
}

#earth {
  position:absolute;
background: radial-gradient(ellipse at center, rgba(125,185,232,1) 0%,rgba(37,186,42,1) 12%,rgba(43,136,217,1) 29%,rgba(255,232,153,1) 51%,rgba(66,183,53,1) 63%,rgba(32,124,202,1) 77%,rgba(32,124,202,1) 77%,rgba(226,255,183,1) 86%,rgba(125,185,232,1) 100%);
  z-index: 4;
  width:50px;
  height:50px;
  border-radius:180px;
  overflow:hidden;
  -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:0px solid white;
box-shadow: 0px 0px 10px 5px rgba(119,216,255,0.4);
background-size:600px 600px;
background-position: 10px 10px;
animation: earthMovement 14s infinite, gravityRotationY 20s infinite;
animation-timing-function: linear;
}

#earthGravity {
  position:absolute;
  height:50px;
  width:50px;
  background-color:transparent;
  top:calc(50% - 25px);
  left:calc(50% - 25px);
  animation: gravityRotationX 20s infinite;
  animation-timing-function: linear;
  z-index:0;
}

#earthFilterContainer {
  width:100%;
  height:100%;
  filter:url(#earthFilter);
}

#earth:after {
  content:'';
  display:block;
  position:relative;
  top:-105%;
  left:0px;
  width:110%;
  height:110%;
  z-index:100;
  animation: shadowMovement 20s infinite;
  animation-timing-function: linear;
background: linear-gradient(90deg, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}

@keyframes earthMovement {
  0%   {transform:rotate(0deg);background-position:10px 10px;}
  100% {transform:rotate(-360deg);background-position:10px 610px;}
}

@keyframes shadowMovement {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

@keyframes gravityRotationX {
  0% {
    z-index:400;
    transform:translateX(-350px);
    animation-timing-function: ease-in;
  }
  25% {
    transform:translateX(0px);
    animation-timing-function: ease-out;
  }
  34% {
    z-index:-1000;
  }
  34.1% {
    z-index:4;
  }

  50% {
    transform:translateX(350px);
    animation-timing-function: ease-in;
  }
  75% {
    transform:translateX(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform:translateX(-350px);
    animation-timing-function: ease-in;
  }
}

@keyframes gravityRotationY {
  0% {
    transform:translateY(-0px) scale(1,1) ;
    animation-timing-function: ease-out;
    transform-origin: top top;
  }
  25% {
    transform:translateY(-60px) scale(.7,.7) ;
    animation-timing-function: ease-in;
  }
  50% {
    transform:translateY(0px) scale(1,1);
    animation-timing-function: ease-out;
  }
  75% {
    transform:translateY(60px) scale(1.3,1.3);
    animation-timing-function: ease-in;
  }
  100% {
    transform:translateY(0px) scale(1,1);
    animation-timing-function: ease-out;
  }
}

#earthOrbit {
  position:absolute;
  top:calc(50% - 60px);
  left:calc(50% - 350px);
  z-index:-1;
}

.starSpearhead {
  box-sizing: border-box;
  box-shadow: 0px 0px 3px 1px rgba(143,135,255,0.3);
  width:5px;
  height:1px;
  background-color:white;
  left:-2px;
  position:relative;
  animation: starRotation 3s infinite;
  animation-timing-function: linear;
}
.starSpearhead:after {
  box-sizing: border-box;
  box-shadow: 0px 0px 3px 1px rgba(143,135,255,0.3);
  content:'';
  display:block;
  width:1px;
  position: absolute;
  height: 5px;
  background-color: white;
  left: 2px;
  top: -2px;
}
.starTail {
  transform-origin: top center;
  position: absolute;
}

@keyframes starRotation {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

@keyframes shootingStarAnimation1 {
  0% {
    opacity:0;
    transform:translate(100px,100px);
  }
  50% {
    opacity:1;
    transform:translate(200px,200px);
  }
  100% {
    opacity:0;
    transform:translate(300px,300px);
  }
}

@keyframes shootingStarAnimation2 {
  0% {
    transform:translate(-100px,100px);
    opacity:0;
  }
  50% {
    transform:translate(-200px,200px);
    opacity:1;
  }
  100% {
    transform:translate(-300px,300px);
    opaicty:0;
  }
}

@keyframes shootingStarAnimation3 {
  0% {
    transform:translate(-100px,-100px);
    opacity:0;
  }
  50% {
    transform:translate(-200px,-200px);
    opacity:1;
  }
  100% {
    transform:translate(-300px,-300px);
    opaicty:0;
  }
}

@keyframes shootingStarAnimation4 {
  0% {
    transform:translate(100px,-100px);
    opacity:0;
  }
  50% {
    transform:translate(200px,-200px);
    opacity:1;
  }
  100% {
    transform:translate(300px,-300px);
    opaicty:0;
  }
}
    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">

<div id="canvasContainer"><div id="filterContainer"><canvas id="mainstage"></canvas></div></div>
<svg id="weirdFilter">
<filter id="svgFilter">
<feTurbulence id="turbulence" type="turbulence" baseFrequency="0.05" numOctaves="15" />
<feDisplacementMap id="displacement" in="SourceGraphic" scale="25" />
</filter>
<filter id="skyFilter">
<feTurbulence id="turbulence1" type="turbulence" baseFrequency="0.009" numOctaves="15" />
<feDisplacementMap id="displacement1" in="SourceGraphic" scale="200" />
</filter>
<filter id="earthFilter">
<feTurbulence id="turbulence2" type="fractalNoise" baseFrequency="0.2" numOctaves="50" />
<feTurbulence id="turbulence1" type="turbulence" baseFrequency="0.05" numOctaves="5" />
<feColorMatrix type="matrix" values="1     1     0     0     0
              1     1     1     0     0
              0     0     1     0     0
              0     0     0     1     0 " />
</filter>
</svg>

<div id="earthGravity">
<div id="earth">
<div id="earthFilterContainer"></div>
</div>
</div>
<div id="earthOrbit">
<svg height="120" width="700">
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(255,255,255,0)" />
<stop offset="100%" stop-color="rgba(255,255,255,0.3)" />
</linearGradient>
<ellipse cx="350" cy="60" rx="350" ry="60" fill="none" stroke="url(#gradient)" stroke-width="1" />
</svg>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script id="rendered-js">
      function initiate() {
  var TO_RADIANS = Math.PI / 180;
  var canvas = document.getElementById("mainstage");
  var context = canvas.getContext("2d");
  canvas.width = document.getElementById("canvasContainer").clientWidth;
  canvas.height = document.getElementById("canvasContainer").clientHeight;
  var bubbleArray = [];
  setUpArray(bubbleArray);
  main();
  var then = Date.now();
  function main() {
    var now = Date.now();
    var delta = now - then;
    update();
    render();
    then = now;
    requestAnimationFrame(main);
  };
  function setUpArray(array) {
    let startColors = [
    "rgba(218,104,11,1)", // orange
    //"rgba(45,0,0,1)", // deep deep red
    //"rgba(226,13,23,1)", // red
    //"rgba(143,7,7,1)", // deep red
    "rgba(255,246,76,1)", // yellow
    "rgba(255,246,76,1)"];


    let endColors = [
    "rgba(218,104,11,0)", // orange
    //"rgba(45,0,0,0)", // deep deep red
    //"rgba(226,13,23,0)", // red
    //"rgba(143,7,7,0)", // deep red
    "rgba(255,246,76,0)", // yellow
    "rgba(255,246,76,0)"];


    for (y = 0; y < 150; y++) {
      var angle = Math.round(Math.random() * 360);
      var targetAngle = Math.round(Math.random() * 360);
      var init = new Date();
      var colorPick = Math.floor(Math.random() * startColors.length);
      var object = {
        id: y,
        initiation: 0,
        speed: Math.random(),
        angle: angle,
        targetAngle: targetAngle,
        innerSize: Math.random() + 1,
        outerSize: Math.random() * 20 + 2,
        x: Math.floor(Math.random() * canvas.width),
        y: Math.floor(Math.random() * canvas.height),
        color: startColors[colorPick],
        endColor: endColors[colorPick] };

      array.push(object);
    }
  }

  function update() {
    for (y = 0; y < bubbleArray.length; y++) {
      if (bubbleArray[y].x < -25 || bubbleArray[y].x > canvas.width + 25 ||
      bubbleArray[y].y < -25 || bubbleArray[y].y > canvas.height + 25)
      {
        bubbleArray[y].x = Math.floor(Math.random() * canvas.width);
        bubbleArray[y].y = Math.floor(Math.random() * canvas.height);
        bubbleArray[y].innerSize = Math.random() + 1,
        bubbleArray[y].outerSize = Math.random() * 20 + 3,
        bubbleArray[y].initiation = 0.20;
        bubbleArray[y].angle = Math.round(Math.random() * 360);
        bubbleArray[y].targetAngle = Math.round(Math.random() * 360);
      } else
      {
        bubbleArray[y].angle += Math.random() * .50 - 0.25;
      }
      bubbleArray[y].x -= bubbleArray[y].speed * Math.cos(bubbleArray[y].angle * TO_RADIANS);
      bubbleArray[y].y += bubbleArray[y].speed * Math.sin(bubbleArray[y].angle * TO_RADIANS);
      if (bubbleArray[y].initiation > 0.15) {
        bubbleArray[y].initiation -= 0.03;
      } else
      {
        bubbleArray[y].initiation -= 0.0001;
      }
    }
  }

  function render() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (y = 0; y < bubbleArray.length; y++) {
      renderEntity(bubbleArray[y]);
    }
  }

  function renderEntity(object) {
    context.strokeStyle = "transparent";
    context.beginPath();
    var opacity = object.initiation;
    var gradient = context.createRadialGradient(object.x, object.y, object.innerSize, object.x, object.y, object.outerSize);
    gradient.addColorStop(0.000, object.color);
    gradient.addColorStop(1.000, object.endColor);
    context.fillStyle = gradient;
    context.arc(object.x, object.y, 25, 0, 2 * Math.PI);
    context.fill();
    context.stroke();
  }
}
initiate();

doStars();

function doStars() {
  let width = document.body.clientWidth;
  let height = document.body.clientHeight;
  for (y = 0; y < 200; y++) {
    var star = document.createElement('div');
    star.style.width = "2px";
    star.style.height = "2px";
    star.style.zIndex = "-1";
    star.style.backgroundColor = "rgba(255,255,255,1)";
    star.style.borderRadius = "180px";
    star.style.position = "absolute";
    star.style.opacity = 0.5;
    star.style.zIndex = -10000;
    star.style.left = Math.floor(Math.random() * width) + 'px';
    star.style.top = Math.floor(Math.random() * height) + 'px';
    if (y < 100) {
      star.style.animation = "starShine";
      star.style.animationIterationCount = "infinite";
      star.style.animationTimingFunction = "linear";
      star.style.animationDuration = Math.floor(Math.random() * 5 + 5) + "s";
    }
    document.body.append(star);
  }
}

document.body.addEventListener("click", function () {shootingStar();});

function shootingStar() {
  let width = document.body.clientWidth;
  let height = document.body.clientHeight;
  let star = document.createElement('div');
  let starId = "star" + new Date().getTime();
  star.id = starId;
  let starSparkle = document.createElement('div');
  let starTail = document.createElement('div');
  starTail.className = "starTail";
  starSparkle.className = "starSpearhead";
  starTail.style.width = "1px";
  starTail.style.height = "35px";
  starTail.style.zIndex = "-1";
  starTail.style.background = "radial-gradient(circle at top center, rgba(255,255,255,1) 0%, rgba(2,0,36,0) 85%)";
  starTail.style.borderRadius = "180px";
  star.style.position = "absolute";
  star.style.opacity = 0;
  star.style.zIndex = -10000;
  star.style.left = Math.floor(Math.random() * width) + 'px';
  star.style.top = Math.floor(Math.random() * height) + 'px';
  let rotation = Math.floor(Math.random() * 4) + 1;
  starTail.style.transform = "rotate(" + (45 + rotation * 90) + "deg)";
  star.style.animation = "shootingStarAnimation" + rotation;
  star.style.animationIterationCount = 1; //"infinite";
  star.style.animationTimingFunction = "linear";
  star.style.animationDuration = Math.floor(Math.random() * 2 + 1) + "s";
  document.body.append(star);
  document.getElementById(starId).append(starSparkle);
  document.getElementById(starId).append(starTail);
};

function shootingStarsFire() {
  setTimeout(function () {shootingStar();shootingStarsFire();}, Math.random() * 500 + 1000);
}

shootingStarsFire();
      //# sourceURL=pen.js
    </script>
<script src="https://static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js"></script>
</body>
</html>

The Space 'Sun&Earth' | HTML,CSS,JavaScript

x32x01

ADMINISTRATOR

Similar Threads