Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
360 degree image viewing

360 degree image viewing

Using NPM kaleidoscope package to view 360 degree images and videos. This picture is one I took using my #Giroptic IO camera on 6th of May in Aarhus, Denmark.

A Pen by Sten Hougaard on CodePen.

License.

<div id="container360"></div>
<div class="info">
<h1>NPM kaleidoscope package</h1>
<a href="https://github.com/thiagopnts/kaleidoscope" target="_blank">kaleidoscope</a>
</div>
<h1 id="info"><a href="http://www.aarhus2017.dk/en/">City of #Aarhus</a></h1>
(function() {
var viewer = new Kaleidoscope.Image({
source: 'https://dl.dropboxusercontent.com/u/3260327/cdn/Fil%2009-05-2017%2011.09.12.jpeg',
containerId: '#container360',
height: window.innerHeight,
width: window.innerWidth,
});
viewer.render();
window.onresize = function() {
viewer.setSize({height: window.innerHeight, width: window.innerWidth});
};
})();
<script src="https://cdn.rawgit.com/thiagopnts/kaleidoscope/master/dist/kaleidoscope.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);
html, body, #container360 {
font-family: 'Inconsolata', monospace ;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.info {
pointer-events: none;
user-select: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
text-shadow: 0 0 7px black;
height: 4.5em;
color: white;
position: absolute;
bottom: 0;
background: hsla(120,100%,100%,.1);
box-sizing: border-box;
padding: .5em;
}
a {
color: white;
pointer-events: all;
transition: all .4s;
}
h1 {
margin: 0;
padding: 0;
}
#info {
position: absolute;
top: .5em;
left: .5em;
}
#info a {
text-decoration: none;
color: hsla(120,100%,100%,.7);
}
#info a:hover, .info a:hover {
color: yellow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment