Created
December 16, 2017 04:33
-
-
Save jasonclark/01e6b363f6dbfe5d94aeea6c7043b6d0 to your computer and use it in GitHub Desktop.
Testing hero image swap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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": "© 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": "© 2014 CNES / Astrium, DigitalGlobe", | |
| "filename": "antonio_quijarro-bolivia-95.jpg" | |
| }, | |
| { | |
| "location": "Arizona, USA", | |
| "copyright": "© 2014 CNES / Spot Image, Digital Globe, USDA Farm Service Agency", | |
| "filename": "arizona-united_states-33.jpg" | |
| }, | |
| { | |
| "location": "Florida, USA", | |
| "copyright": "© 2014 DigitalGlobe, The Florida Department of Environmental Protection, U.S. Geological Survey", | |
| "filename": "florida-united_states-10.jpg" | |
| }, | |
| { | |
| "location": "Garden City, USA", | |
| "copyright": "© 2014 Terrametrics", | |
| "filename": "garden_city-united_states-53.jpg" | |
| }, | |
| { | |
| "location": "Ngari, Tibet", | |
| "copyright": "© 2014 CNES / Spot Image, Digital Globe", | |
| "filename": "ngari_tibet-china-14.jpg" | |
| }, | |
| { | |
| "location": "Valencia, Spain", | |
| "copyright": "© 2014 DigitalGlobe, European Space Imaging", | |
| "filename": "valencia-spain-82.jpg" | |
| }, | |
| { | |
| "location": "Qesm Al Wahat Ad Dakhlah, Egypt", | |
| "copyright": "© 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