Skip to content

Instantly share code, notes, and snippets.

@jasonclark

jasonclark/gist:01e6b363f6dbfe5d94aeea6c7043b6d0

Created December 16, 2017 04:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasonclark/01e6b363f6dbfe5d94aeea6c7043b6d0 to your computer and use it in GitHub Desktop.
Save jasonclark/01e6b363f6dbfe5d94aeea6c7043b6d0 to your computer and use it in GitHub Desktop.
Download ZIP
Testing hero image swap
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 boilerplate – all you really need…</title>
<style>
section.heroimg {
display: flex;
align-items: flex-end;
margin-bottom: 2rem;
background-color: #E4DED0;
padding: 2rem;
background-size: cover;
position: relative;
padding-bottom: 33%;
}
section.heroimg { background-position: center center; } /* default */
section.heroimg.topleft { background-position: top left; }
section.heroimg.topright { background-position: top right; }
section.heroimg.bottomleft { background-position: bottom left; }
section.heroimg.bottomright { background-position: bottom right; }
@media (min-width: 1200px) {
a.logo { border-right: none !important; }
body {
margin-left: calc(50% + 40px);
}
section.heroimg {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
left: 5rem;
top: 0;
bottom: 0;
width: calc(50% - 5rem);
margin: 0;
padding: 10vh 5vw;
}
}
.geotag {
font-family: 'Pitch Sans', SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.9rem;
background-color: #000;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
display: flex;
align-items: flex-end;
max-width: 20rem;
}
.geotag:not(.expand) {
-webkit-clip-path: inset(calc(100% - 3rem) calc(100% - 3rem) 0px 0px);
-moz-clip-path: inset(calc(100% - 3rem) calc(100% - 3rem) 0px 0px);
clip-path: inset(calc(100% - 3rem) calc(100% - 3rem) 0px 0px);
}
.geotag.expand {
-webkit-clip-path: none;
-moz-clip-path: none;
clip-path: none;
}
.geotag svg {
cursor: pointer;
min-width: 3rem;
}
.geotag>div {
padding: 1rem;
min-width: calc(50% - 5rem);
}
.geotag h3 {
font-family: 'Pitch Sans', SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 0.9rem;
color: rgba(255,255,255,0.5);
margin: 0;
}
.geotag p { margin: 0; }
.geotag p.credit {
font-size: 12px;
margin-top: 0.5rem;
color: rgba(255,255,255,0.5);
}
.geotag p.credit a {
color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.25);
}
</style>
<script>
var photos = [
{
"location": "Al Jowf, Saudi Arabia",
"copyright": "&copy; 2014 CNES / Astrium, CNES / Spot Image, Digital Globe, Landsat, U.S. Geological Survey",
"filename": "al_jowf-saudi_arabia-2.jpg"
},
{
"location": "Antonio Quijarro, Bolivia",
"copyright": "&copy; 2014 CNES / Astrium, DigitalGlobe",
"filename": "antonio_quijarro-bolivia-95.jpg"
},
{
"location": "Arizona, USA",
"copyright": "&copy; 2014 CNES / Spot Image, Digital Globe, USDA Farm Service Agency",
"filename": "arizona-united_states-33.jpg"
},
{
"location": "Florida, USA",
"copyright": "&copy; 2014 DigitalGlobe, The Florida Department of Environmental Protection, U.S. Geological Survey",
"filename": "florida-united_states-10.jpg"
},
{
"location": "Garden City, USA",
"copyright": "&copy; 2014 Terrametrics",
"filename": "garden_city-united_states-53.jpg"
},
{
"location": "Ngari, Tibet",
"copyright": "&copy; 2014 CNES / Spot Image, Digital Globe",
"filename": "ngari_tibet-china-14.jpg"
},
{
"location": "Valencia, Spain",
"copyright": "&copy; 2014 DigitalGlobe, European Space Imaging",
"filename": "valencia-spain-82.jpg"
},
{
"location": "Qesm Al Wahat Ad Dakhlah, Egypt",
"copyright": "&copy; 2014 CNES / Spot Image, DigitalGlobe",
"filename": "qesm_al_wahat_ad_dakhlah-egypt-56.jpg"
}
];
var randPhoto = Math.floor(Math.random() * photos.length);
document.addEventListener('DOMContentLoaded', () => {
var heroimg = document.getElementById('heroimg');
var geoinfolocation = document.getElementById('geoinfolocation');
var geoinfocredit = document.getElementById('geoinfocredit');
// progressive enhancement
heroimg.style.backgroundImage = 'url("/assets/v1513272653/images/' + photos[randPhoto]["filename"] + '")';
geoinfolocation.innerHTML = photos[randPhoto]["location"]
geoinfocredit.innerHTML = photos[randPhoto]["copyright"]
var toggle = document.getElementById('toggle');
var trigger = document.getElementById('trigger');
trigger.addEventListener('click', () => {
toggle.classList.toggle('expand');
});
});
</script>
</head>
<body id="home">
<h1>Testing rotating image</h1>
<!-- progressively enhanced in main.js -->
<section class="heroimg" id="heroimg" style="">
<div id="toggle" class="geotag">
<svg id="trigger" class="geoicon" width="51px" height="51px" viewBox="0 0 51 51" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#777" d="M25.6875,17.4736842 C27.476494,17.4736842 28.9232456,18.9204359 28.9232456,20.7094298 C28.9232456,22.4984238 27.476494,23.9451754 25.6875,23.9451754 C23.898506,23.9451754 22.4517544,22.4984238 22.4517544,20.7094298 C22.4517544,18.9204359 23.898506,17.4736842 25.6875,17.4736842 Z M25.6875,11.5 C31.3189419,11.5 35.8925439,16.0891584 35.8925439,21.7361568 C35.8925439,26.2475329 33.5590735,29.6699561 31.1789337,32.7968065 C29.9033032,34.4613487 26.6675576,38.614926 26.6675576,38.614926 L25.6875,39.875 L24.7074424,38.614926 C24.7074424,38.614926 21.4716968,34.4613487 20.1960663,32.7968065 C17.8159265,29.6699561 15.4824561,26.2475329 15.4824561,21.7361568 C15.4824561,16.0891584 20.0560581,11.5 25.6875,11.5 Z M29.234375,31.3344984 C31.9256442,27.8187363 33.4812911,25.1274671 33.4812911,21.7050439 C33.4812911,17.3959019 29.9810855,13.8801398 25.6875,13.8801398 C21.3939145,13.8801398 17.8937089,17.3959019 17.8937089,21.7050439 C17.8937089,25.1274671 19.4493558,27.8187363 22.140625,31.3344984 C22.9651179,32.4234512 24.6141036,34.5546875 25.6875,35.9392133 C26.7608964,34.5546875 28.4098821,32.4234512 29.234375,31.3344984 Z" id="location"></path>
</svg>
<div class="geoinfo">
<h3>Photo Location</h3>
<p id="geoinfolocation"></p>
<p id="geoinfocredit" class="credit"></p>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment