Mars Globes

index.html

<script id="template" type="x-tmpl-mustache">

<section class="stage">
<figure class="ball"
style = "background: url('{{ imgUrl }}') repeat-x;"
><span class="shadow"></span></figure>
</section>

</script>


<ul>
<li><img src="images_400x400/ESP_013368_1885.jpg"></li>

<li><img src="images_400x400/ESP_013954_1780.jpg"></li>

<li><img src="images_400x400/ESP_014185_1095.jpg"></li>

<li><img src="images_400x400/ESP_014351_1995.jpg"></li>

<li><img src="images_400x400/ESP_016700_2075.jpg"></li>

<li><img src="images_400x400/ESP_017154_1390.jpg"></li>

<li><img src="images_400x400/ESP_017174_1730.jpg"></li>

<li><img src="images_400x400/ESP_019753_2000.jpg"></li>

<li><img src="images_400x400/ESP_020065_1335.jpg"></li>

<li><img src="images_400x400/ESP_020087_1515.jpg"></li>

<li><img src="images_400x400/ESP_020090_1985.jpg"></li>

<li><img src="images_400x400/ESP_020782_1610.jpg"></li>

<li><img src="images_400x400/ESP_020795_2025.jpg"></li>

<li><img src="images_400x400/ESP_020798_2040.jpg"></li>

<li><img src="images_400x400/ESP_021676_1430.jpg"></li>

<li><img src="images_400x400/ESP_021915_1005.jpg"></li>

<li><img src="images_400x400/ESP_022405_1910.jpg"></li>

<li><img src="images_400x400/ESP_026086_2115.jpg"></li>

<li><img src="images_400x400/ESP_027077_1785.jpg"></li>

<li><img src="images_400x400/ESP_027339_2060.jpg"></li>

<li><img src="images_400x400/ESP_027834_1755.jpg"></li>

<li><img src="images_400x400/ESP_027989_1425.jpg"></li>

<li><img src="images_400x400/ESP_028004_1825.jpg"></li>

<li><img src="images_400x400/ESP_028020_2560.jpg"></li>

<li><img src="images_400x400/ESP_028269_1755.jpg"></li>

<li><img src="images_400x400/ESP_028335_1755.jpg"></li>

<li><img src="images_400x400/ESP_028575_1890.jpg"></li>

<li><img src="images_400x400/ESP_028799_1565.jpg"></li>

<li><img src="images_400x400/ESP_029226_1670.jpg"></li>

<li><img src="images_400x400/ESP_030373_1755.jpg"></li>

<li><img src="images_400x400/ESP_031944_1790.jpg"></li>

<li><img src="images_400x400/ESP_032011_1425.jpg"></li>

<li><img src="images_400x400/ESP_032078_1420.jpg"></li>

<li><img src="images_400x400/ESP_032522_1345.jpg"></li>

<li><img src="images_400x400/ESP_032562_1670.jpg"></li>

<li><img src="images_400x400/ESP_032836_1790.jpg"></li>

<li><img src="images_400x400/ESP_033014_2260.jpg"></li>

<li><img src="images_400x400/ESP_033108_1800.jpg"></li>

<li><img src="images_400x400/ESP_033242_1845.jpg"></li>

<li><img src="images_400x400/ESP_033242_2315.jpg"></li>

<li><img src="images_400x400/ESP_033243_2165.jpg"></li>

<li><img src="images_400x400/ESP_033248_1520.jpg"></li>

<li><img src="images_400x400/ESP_033252_2070.jpg"></li>

<li><img src="images_400x400/ESP_033264_1640.jpg"></li>

<li><img src="images_400x400/ESP_033293_1755.jpg"></li>

<li><img src="images_400x400/ESP_033297_1745.jpg"></li>

<li><img src="images_400x400/ESP_033371_1080.jpg"></li>

<li><img src="images_400x400/ESP_033433_2650.jpg"></li>

<li><img src="images_400x400/ESP_033483_1805.jpg"></li>

<li><img src="images_400x400/ESP_033556_1890.jpg"></li>

<li><img src="images_400x400/ESP_033564_1405.jpg"></li>

<li><img src="images_400x400/ESP_033565_1945.jpg"></li>

</ul>

mars-globes.markdown

Mars Globes

css grid layout with Mars Reconnaissance Orbiter images (HiRISE)

3D css effect via https://codepen.io/donovanh/pen/GBIiv

A Pen by Lisa Ballard on CodePen.

License.

script.js

$(function() {
  $("li").each(function(index) {
    var base_url = "https://s3-us-west-1.amazonaws.com/marsfromspace.com/"
    var imgUrl = $(this).find("img")[0].src.split('/').pop();

    view = { imgUrl: base_url + imgUrl };
    var output = Mustache.render($("#template").html(), view);
    $(this).html(output);
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>

style.scss

$background-color: black;
// $container-size: 8rem; // 127px; // 106px;
$ball-size: 9rem;
$grid-gap: 1rem;

html * {
  margin: 0;
  padding: 0;
  background-color: $background-color;
}
body {
  height: 100%;
}

/* grid layout */
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($ball-size, 2fr));
  grid-gap: $grid-gap;
  // grid-auto-rows: $container-size;
  // grid-auto-columns: $container-size;
}
ul > li {
  padding: 0;
  margin: 0;
  list-style-type: none;

}

// sphere effect
// below is thanks to https://codepen.io/donovanh/pen/GBIiv
.ball {
  // display: block;
  width: $ball-size;
  height: $ball-size;
  margin: 0;
  padding: auto;
  border-radius: 50%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  background-size: auto 50%;
  background: url("http://127.0.0.1:8080/marsgrid/images_400x400/ESP_013368_1885.jpg")
    repeat-x;
}

.ball:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: -40px 10px 70px 10px rgba(0, 0, 0, 0.8) inset;
  z-index: 2;
}

.ball:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-filter: blur(0);
  opacity: 0.3;
  background: radial-gradient(
    circle at 50% 80%,
    #81e8f6,
    #76deef 10%,
    #055194 66%,
    #062745 100%
  );
}

.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0.4),
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0) 50%
  );
}
.stage {
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}