Skip to content

Instantly share code, notes, and snippets.

@bnvk

bnvk/cs3_panorama.html

Created May 4, 2013 22:11
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 bnvk/5518938 to your computer and use it in GitHub Desktop.
Save bnvk/5518938 to your computer and use it in GitHub Desktop.
Download ZIP
Nifty CSS3 + JS panorama code by @barnabywalters
Raw
cs3_panorama.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Panorama by Barnaby Walters</title>
<style type="text/css">
.panorama-container {
width: 750px;
}
.scrolling-panorama {
max-width: 100%;
-webkit-animation: scrolling-background infinite linear 150s;
-moz-animation: scrolling-background infinite linear 150s;
box-shadow: inset rgba(51, 101, 71, 0.6) 0 0 10em;
}
@keyframes scrolling-background {
from {
background-position-x: 0%;
}
to {
background-position-x: 200%;
}
}
@-webkit-keyframes scrolling-background {
from {
background-position-x: 0%;
}
to {
background-position-x: 200%;
}
}
</style>
</head>
<body>
<div class="panorama-container">
<div class="scrolling-panorama" style="height: 500px; background-image: url(https://brennannovak.com/uploads/panoramas/Grettisgata_16_small.jpg);"></div>
</div>
<script type="text/javascript">
(function () {
var images = document.querySelectorAll('img.scrolling-panorama');
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('load', function (event) {
var img = event.target;
var div = document.createElement('div');
div.classList.add('scrolling-panorama');
div.style.height = img.naturalHeight + 'px';
div.style.backgroundImage = 'url(' + img.src + ')';
img.parentElement.appendChild(div);
img.parentElement.removeChild(img);
});
}
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment