Flying hyperspace

flying-hyperspace.markdown

Flying hyperspace

Exploring more animation. Playing with perspectives.

A Pen by Paul on CodePen.

License.

index.pug

.frame
  .center
    h1(data-text="hyperspace") hyperspace
    -for(var i=0; i<100; i++) {
      .starHolder
        .star
          .side-1
          .side-2
    -}

style.scss

$numOfStars: 100;
$starRadius: 100px;
$animationDirection: 2;
$spaceDepth: 600px;

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: center / cover no-repeat url(https://images.unsplash.com/photo-1522012915511-fdab9ce1dbc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%,-60%);
  perspective: $spaceDepth;
  animation: perspectiveShift 25s infinite linear;
  
  h1 {
    position: relative;
    left: 12%;
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
    background: bottom/cover  url(https://images.unsplash.com/photo-1522012915511-fdab9ce1dbc1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
    background-attachment: fixed;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    
    &:before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 5%;
      text-shadow: -5px 5px 20px rgba(0,0,0,0.6),
                   -10px 10px 30px rgba(0,0,0,0.7),
                   -20px 15px 40px rgba(0,0,0,0.8),
                   -25px 20px 50px rgba(0,0,0,0.9);
      z-index: -1;
    }
  }
}

.starHolder {
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(15*$spaceDepth);
  animation: flyin infinite linear;
  @for $i from 1 to $numOfStars {
      &:nth-child(#{$i}) {
         top: random(250)-50+vh;
         left: random(250)-50+vw;
         animation-delay: $i*50ms;
         animation-duration: random($animationDirection)+1+s;
      }
   }
}

.star {
  width: $starRadius;
  height: $starRadius;
  border-radius: $starRadius;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(218, 165, 32, 0.2) 50%);
  
  .side-1 {
    content: '';
    position: absolute;
    transform: rotateX(90deg);
  }
  
  .side-2 {
    content: '';
    position: absolute;
    transform: rotateY(90deg);
  }
}

@keyframes flyin {
  0% {
    transform: translateZ(-15*$spaceDepth);
  }
  100% {
    transform: translateZ(2*$spaceDepth);
  }
}

@keyframes perspectiveShift {
   0% {
      perspective: $spaceDepth;
   }
   100% {
      perspective: $spaceDepth/1000;
   }
}