Dual Viewer

Horizontal With Videos

The dual viewer can hold any type of content. This one holds some html5 videos from gfycat. The first is Moon and cloudlapse and the second is Pouring Beauty Iceland.

Markup

The markup is nearly identical. <img>s have been replaced by <video>s and the scrubber bounds element now has inline styles defining its width.

<div id="dual-viewer-videos" class="odo-dual-viewer">
  <div class="odo-dual-viewer__wrap odo-dual-viewer__overlay">
    <div class="odo-dual-viewer__inner">
      <div class="odo-dual-viewer__object">
        <video class="odo-dual-viewer__media" autoplay loop>
          <source src="https://zippy.gfycat.com/BestReflectingJunco.webm" type="video/webm">
          <source src="https://zippy.gfycat.com/BestReflectingJunco.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>

  <div class="odo-dual-viewer__wrap odo-dual-viewer__underlay">
    <div class="odo-dual-viewer__inner">
      <div class="odo-dual-viewer__object">
        <video class="odo-dual-viewer__media" autoplay loop>
          <source src="https://zippy.gfycat.com/EsteemedJovialHoneybadger.webm" type="video/webm">
          <source src="https://zippy.gfycat.com/EsteemedJovialHoneybadger.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>

  <div class="odo-dual-viewer__scrubber">
    <div class="odo-dual-viewer__scrubber-handle grabbable"></div>
  </div>

  <!-- Not part of odo-dual-viewer.css - absolutely positioned -->
  <p class="dual-viewer__help">Slide right or left to reveal more of one perspective.</p>

  <div class="odo-dual-viewer__scrubber-bounds" style="width:80%;margin:auto;"></div>
</div>

Setup

var vid = new OdoDualViewer(document.getElementById('dual-viewer-videos'), {
  animationDuration: 400,
  zones: [0.3, 0.4, 0.6, 0.7]
});

Zones

When the user releases the scrubber, the dual viewer uses the position of scrubber as a percentage as a zone. The default zones option is [0.33, 0.33, 0.66, 0.66]. The first value in the array represents the lower zone. If the scrubber position (as a percent) is less than that value, the dual viewer will animate to 0 percent (within the boundaries). The second and third values create a zone for the middle. When the scrubber is released in the middle zone, it animates to the center. The last value is the upper zone. Any value above it will animate the scrubber to 1 percent (within the boundaries).

L = lower zone
M = middle zone
U = upper zone

+-------------------------------------+
|          |   |       |   |          |
|          |   |       |   |          |
|    L     |   |   M   |   |     U    |
|          |   |       |   |          |
|          |   |       |   |          |
+-------------------------------------+
        |          |         |
       0.25       0.5       0.75

If the scrubber is released between zones, nothing will happen.

Zones work the same way for vertical dual viewers with the lower zone on top and the upper zone at the bottom.

Like the example above, zones can overlap. The lower and upper zones take precedence over the middle.

Events

The dual viewer emits a CAME_TO_REST event when the handle stops animating.

vid.on(OdoDualViewer.EventType.CAME_TO_REST, function(event) {
  switch (event.position) {
    case OdoDualViewer.Position.START:
      console.log('Handle came to rest at the start');
      break;
    case OdoDualViewer.Position.END:
      console.log('Handle came to rest at the end');
      break;
    case OdoDualViewer.Position.CENTER:
      console.log('Handle came to rest in the center');
      break;
  }
});