Inicio de CodePen Estrellas y velocidad Warp

1620 zegarkidawida

Abrir en el editor Publica tu código

Inicio de CodePen Estrellas y velocidad Warp

Recomendado

11 September 2025

Plantilla de sitio web HTML de Starbucks

16 January 2025

Ejemplo de página de destino de sitio web de películas

23 August 2025

Plantilla de sitio web de portafolio de diseñador web

HTML

CSS

html,body{height:100%;max-width:100%;margin:0;overflow:hidden;background:rgba(0,10,20,1) url(https://i.imgur.com/r838U7u.jpg) center no-repeat;background-size:cover;image-rendering: pixelated; font-family:sans-serif}
#space{width:100%}
#warp{position:absolute;z-index:9;bottom:0;left:0;right:0;margin:20px auto;color:rgba(209, 255, 255,1);border:2px solid;padding:1em;width:10em;text-align:center;font-weight:700;font-size:1.2em;display:inline-block;text-decoration:none;background:rgba(0,0,0,0.8);
transition:all 0.2s}
#warp:hover{
    box-shadow: 0 0 10px #eef, 0 0 12px #a0cdff inset;
    text-shadow: 0 0 12px #489cfa, 0 0 5px #fff;
}

/* follow me @nodws */
#btn-twtr{
  clear:both;
  color:#fff;
  border:2px solid;
  border-radius:3px;
  text-align:center;
  text-decoration:none;
  display:block;
  font-family:sans-serif;
  font-size:14px;
  width:13em;
  padding:5px 10px;
  font-weight:600;
  position:absolute;
  top:0;
  right:10%;
  margin:90vh 0;
  background:rgba(0,0,0,0.2);
  box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
  opacity:0.3
}#btn-twtr:hover{color:#fff;opacity:1}

JS

//based on an Example by @curran
window.requestAnimFrame = (function(){   return  window.requestAnimationFrame})();
var canvas = document.getElementById("space");
var c = canvas.getContext("2d");

var numStars = 1900;
var radius = '0.'+Math.floor(Math.random() * 9) + 1  ;
var focalLength = canvas.width *2;
var warp = 0;
var centerX, centerY;

var stars = [], star;
var i;

var animate = true;

initializeStars();

function executeFrame(){
  
  if(animate)
    requestAnimFrame(executeFrame);
  moveStars();
  drawStars();
}

function moveStars(){
  for(i = 0; i < numStars; i++){
    star = stars[i];
    star.z--;
    
    if(star.z <= 0){
      star.z = canvas.width;
    }
  }
}

document.getElementById('warp').addEventListener("click",function(e){
 window.warp = window.warp==1 ? 0 : 1;
window.c.clearRect(0, 0, window.canvas.width, window.canvas.height);
executeFrame();
});

executeFrame();

Recomendado

Plantilla de sitio web HTML de Starbucks

Ejemplo de página de destino de sitio web de películas

Plantilla de sitio web de portafolio de diseñador web

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS