A Pen by icewater.

CSS-Panorama-Viewer-Skeleton.markdown

CSS Panorama Viewer Skeleton

This is for teaching purpose.

Forked from linmic's Pen CSS Panorama Viewer Skeleton.

A Pen by icewater on CodePen.

License.

index.html

<div id="pano_viewer" class="icon-eye-open">
  <div id="cube_box">  
    <div id="cube">
      <img class="front" src="http://s.cdpn.io/19243/front.JPG" width="3000" height="3000"> 
      <img class="left" src="http://s.cdpn.io/19243/left.JPG" width="3000" height="3000">
      <img class="right" src="http://s.cdpn.io/19243/right.JPG" width="3000" height="3000"> 
      <img class="back" src="http://s.cdpn.io/19243/back.JPG" width="3000" height="3000">
      <img class="top" src="http://s.cdpn.io/19243/up.JPG" width="3000" height="3000"> 
      <img class="bottom" src="http://s.cdpn.io/19243/down.JPG" width="3000" height="3000">
    </div>
  </div>
</div>
<button id="btn_animation">auto</button>
<button id="btn_toggle_eye">eye</button>

script.js

(function() {
  var x1,
      y1,
      moving = false,
      $viewer = $('#pano_viewer'),
      $cube = $('#cube'),
      w_v = $viewer.width(), // width of viewer
      h_v = $viewer.height(), // height of viewer
      c_x_deg = 0, // current x
      c_y_deg = 0,
      perspective = 450; // current y

  $viewer.on('mousedown', function(e) {
    x1 = e.pageX - $(this).offset().left;
    y1 = e.pageY - $(this).offset().top;

    moving = true;
    e.preventDefault();
  });

  $(document).on('mousemove', function(e) {
    if( moving === true ) {
      x2 = e.pageX - $viewer.offset().left;
      y2 = e.pageY - $viewer.offset().top;

      var dist_x = x2 - x1,
          dist_y = y2 - y1,
          perc_x = dist_x / w_v,
          perc_y = dist_y / h_v,
          deg_x = Math.atan2(dist_y, perspective) / Math.PI * 180,
          deg_y = -Math.atan2(dist_x, perspective) / Math.PI * 180,
          i,
          vendors = ['-webkit-', '-moz-', ''];

      c_x_deg += deg_x;
      c_y_deg += deg_y;
      c_x_deg = Math.min(90, c_x_deg);
      c_x_deg = Math.max(-90, c_x_deg);

      c_y_deg %= 360;

      deg_x = c_x_deg;
      deg_y = c_y_deg;

      for(i in vendors) {
        $cube.css(vendors[i] + 'transform', 'rotateX(' + deg_x + 'deg) rotateY(' + deg_y + 'deg)');
      }

      x1 = x2;
      y1 = y2;
    }
    e.preventDefault();
  }).on('mouseup', function(e) {
    moving = false;
    e.preventDefault();
  });

  $('#btn_animation').on('click', function() {
    $(this).toggleClass('active');
    $('#cube').toggleClass('animate');
  });
  
  $('#btn_toggle_eye').on('click', function() {
    $('#pano_viewer').toggleClass('icon-eye-open');
  });
})();

style.scss

@import "compass/css3";
@import "compass/reset";
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');

$global_view: false; // demo the whole cube with viewer in it
$normal_mode: true; // hide the view outside the viewer, on works when $global_view is false

$piece_radius: 1200px;
$overlap_offset: 0;
$viewer_width: 700px;
$viewer_height: 400px;
$viewer_perspective: $piece_radius / 2;

@if $global_view == true {
  $piece_radius: 400px;
  $viewer_perspective: 2200px;
  $viewer_width: 350px;
  $viewer_height: 200px;
}

$z_offset: $piece_radius / 2 - $overlap_offset;

@-webkit-keyframes roll {
  0% { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); }
  50% { -webkit-transform: rotateX(0) rotateY(360deg) rotateZ(0); }
  100% { -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(0); }
}

@-moz-keyframes roll {
  0% { -moz-transform: rotateX(0) rotateY(0) rotateZ(0); }
  50% { -moz-transform: rotateX(0) rotateY(360deg) rotateZ(0); }
  100% { -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(0); }
}

@keyframes roll {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
  50% { transform: rotateX(0) rotateY(360deg) rotateZ(0); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0); }
}

button {
  display: block;
  float: left;
  padding: 5px 10px;
  margin: 5px 0 0 5px;
  font-size: 14px;
  @include transform(translateZ(9999px));
}

body {
  min-width: $viewer_width + 40px;
  font-family: 'Roboto Slab', Sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  background: #ccc url('http://s.cdpn.io/19243/textured_paper.jpg') repeat;
}

#pano_viewer {
  outline: 3px solid #0095d9;
  //@include box-shadow(0 0 15px #666);
  //background: transparent url('http://s.cdpn.io/19243/eyes_1.png') center no-repeat;
  cursor: move;
  background-size: cover;
  position: absolute;
  text-align: center;
  font-size: $viewer_height;
  line-height: $viewer_height;
  left: 50%;
  top: 50%;
  margin-left: -1 * $viewer_width / 2;
  margin-top: -1 * $viewer_height / 2;
  width: $viewer_width;
  height: $viewer_height;
  
  @if $normal_mode and $global_view == false {
    overflow: hidden;
  }
  
  &:focus {
    cursor: move;
  }
}

#cube_box {
  position: absolute;
  left: 0;
  top: 0;
  @if $global_view { outline: 5px solid #badcad; }
  @include perspective($viewer_perspective);
  @include transform-origin($piece_radius $piece_radius 0);
  @include transform-style(preserve-3d);
  @include transition(perspective 1.4s ease-in-out);
  width: $piece_radius * 2;
  height: $piece_radius * 2;
  margin-left: ( $viewer_width - $piece_radius * 2 ) / 2;
  margin-top: ( $viewer_height - $piece_radius * 2 ) / 2;
}

#cube {
  @if $global_view { outline: 5px solid #ec6d71; }
  @include transform-style(preserve-3d);
  @include transform(rotate3d(0, 0, 0));
  cursor: move;
  position: relative;
  width: $piece_radius * 2;
  height: $piece_radius * 2;
  
  @if $global_view { background: rgba(#fff, 0.5); }

  &.animate {
    -webkit-animation: roll 20s linear infinite;
    -moz-animation: roll 20s linear infinite;
    animation: roll 20s linear infinite;
  }

  img {
    position: absolute;
    opacity: 0.8;
    @if $global_view { opacity: 0.6; }
    background-color: rgba(#eee, 0.7); // needed hack
    top: $piece_radius / 2;
    left: $piece_radius / 2;
    width: $piece_radius;
    height: $piece_radius;
    @include transition(all 1s ease);
    
    &.front { @include transform(translate3d(0, 0, -$z_offset)); }
    &.left { @include transform(rotate3d(0, 1, 0, 90deg) translate3d(0, 0, -$z_offset)); }
    &.right { @include transform(rotate3d(0, 1, 0, -90deg) translate3d(0, 0, -$z_offset)); }
    &.back { @include transform(rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -$z_offset)); }
    // top panel's transformation would depend on how we make the cut of panorama
    &.top { @include transform(rotate3d(1, 0, 0, -90deg) translate3d(0, 0, -$z_offset)); }
    &.bottom { @include transform(rotate3d(1, 0, 0, 90deg) translate3d(0, 0, -$z_offset)); }
  }
}