Skip to content

Instantly share code, notes, and snippets.

@basilleaf

basilleaf/index.html

Created July 10, 2018 04:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save basilleaf/68d042f1d7028d7d80e2fcab421b2fbc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save basilleaf/68d042f1d7028d7d80e2fcab421b2fbc to your computer and use it in GitHub Desktop.
Download ZIP
Mars Globes
Raw
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>
Raw
mars-globes.markdown
Raw
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);
});
});
Raw
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>
Raw
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%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment