Pure CSS Panorama Viewer
DEMO
Pure CSS Panorama Viewer, source code really easy to use!
The source code:
<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com -->
<!-- This code come with absolutely no warranty -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance -->
<head>
<title>Pure CSS Panorama 360 Degree Animation</title>
<style type="text/css" media="screen">
@-webkit-keyframes panorama {
from { background-position: 0px; }
to { background-position: -2975px; } /* The width of the panorama image is 2975px, the panorama moves from left to right */
}
@-moz-keyframes panorama {
from { background-position: 0px; }
to { background-position: -2975px; }
}
@keyframes panorama {
from { background-position: 0px; }
to { background-position: -2975px; }
}
#anim {
width: 800px; /* Animation Container - width and height of the display box */
height: 600px;
background: url(css/images-gimme-code-2013-0027/360-panorama-2975x600px.jpg) no-repeat 0 0; /* The panorama as background image */
}
/* hover add the animation, YEAH! */
#anim:hover {
width: 800px; /* Animation Container - width and height of the display box */
height: 600px;
background: url(css/images-gimme-code-2013-0027/360-panorama-2975x600px.jpg) repeat-x; /* The as background image */
/* Animation START */
-webkit-animation: panorama 18s steps(800, end) infinite; /* 18 seconds total animation time, 800 frames x 800 pixel (the width of Animation Container) = 1 frame every 1 px scrolling, infinite loop */
-moz-animation: panorama 18s steps(800, end) infinite;
animation: panorama 18s steps(800, end) infinite;
/* Animation END */
}
</style>
</head>
<body>
<p>Pure CSS Panorama Animation - Animate Image on Mouse Enter</p>
<div id="anim"> </div>
</body>
</html>
Super Easy! I scrool the background image of 1px every one animation frame. The background have repeat-x property active so the loop is seamless.
