From b058afc44ab1f2bc142fadf12df063dd56ed1f8a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 25 Nov 2018 16:21:08 +0800 Subject: Add 360-Degree Viewer --- docs/experimentals/viewer-360.html | 262 +++++++++++++++++++++++++++++++++++++ 1 file changed, 262 insertions(+) create mode 100644 docs/experimentals/viewer-360.html (limited to 'docs/experimentals/viewer-360.html') diff --git a/docs/experimentals/viewer-360.html b/docs/experimentals/viewer-360.html new file mode 100644 index 0000000..83882f1 --- /dev/null +++ b/docs/experimentals/viewer-360.html @@ -0,0 +1,262 @@ + + + + 360-Degree Viewer - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + + + + + + + +
+
+
+ PayPalGitHub +
+
+ +
+
+
+

360-Degree Viewer

+

CSS ONLY

+
+
+ + + +
+
+ + +
+
+

360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS.

+
+
+
+ +
+
+
+
+

+ Photo credits: Microsoft Surface Pro 6

+

You will need to use your own product image sprite (all angle of photos in one image) and define variables to use this component. The default image number is 36.

+ 
<div class="viewer-360">
+  <input class="viewer-slider slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
+  <figure class="viewer-image" style="background-image:url('...');"></figure>
+</div>
+
+
+ +
+
+ +
+
+
+ + + + + \ No newline at end of file -- cgit v1.3.1-26-gca13