Scrolling Planet Test

2D rotating globe effect using background scrolled with CSS animation.

by the_voder

HTML

<div id="planet">
    <!-- This a is animated to track the scrolling background image -->
    <a href="#" id="london"></a>
</div>

CSS

body {
  background-color: #ddd;
}

#planet {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 100px auto;
  border-radius: 50%;
  background-color: #aaa;
  background-image: url("https://storage.needpix.com/rsynced_images/world-map-297446_1280.png");
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: left center;
  animation: scrollmap 5s infinite;
  animation-timing-function: linear;
  opacity: 0.75;
}

/* This hack keeps the #planet element square while retaining responsive width */
#planet:after {
  content: "";
  display: block;
  padding-bottom: 100%;
  /* Apple radial gradient to pseudo-element */
  background-image: radial-gradient(farthest-corner at 20% 20%,
      rgba(255, 255, 255, 0.75) 0%, rgba(0, 0, 0, 0.9) 100%);
}

/* Keyframes for background animation */
@keyframes scrollmap {
  from {
    background-position: 0 center;
  }

  to {
    background-position: 200% center;
  }
}

/* London marker <a> */
#london {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 94%;
  top: 27%;
  border-radius: 50%;
  background-color: red;
  animation: scrolllondon 5s infinite;
  animation-timing-function: linear;
}

/* Keyframes for london marker */
@keyframes scrolllondon {
  from {
    left: 94%;
  }

  to {
    /*
    End left-pos is (-) 200 - start position %
    ie -(200 - 94)%
    Should be -106% but had to tweak to not drift
    */
    left: -107%;
  }
}