360-Degree Viewer

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/autocomplete.html | 2 + docs/experimentals/calendars.html | 2 + docs/experimentals/carousels.html | 2 + docs/experimentals/comparison.html | 2 + docs/experimentals/filters.html | 2 + docs/experimentals/meters.html | 2 + docs/experimentals/off-canvas.html | 2 + docs/experimentals/parallax.html | 2 + docs/experimentals/progress.html | 2 + docs/experimentals/sliders.html | 2 + docs/experimentals/timelines.html | 2 + docs/experimentals/viewer-360.html | 262 +++++++++++++++++++++++++++++++++++ 12 files changed, 284 insertions(+) create mode 100644 docs/experimentals/viewer-360.html (limited to 'docs/experimentals') diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html index 18e2f7a..c4acee8 100644 --- a/docs/experimentals/autocomplete.html +++ b/docs/experimentals/autocomplete.html @@ -166,6 +166,8 @@ Experimentals

360-Degree Viewer +
Autocomplete
Calendars diff --git a/docs/experimentals/calendars.html b/docs/experimentals/calendars.html index 91c4500..5d12ca0 100644 --- a/docs/experimentals/calendars.html +++ b/docs/experimentals/calendars.html @@ -166,6 +166,8 @@ Experimentals
- 360-Degree Viewer +
- Autocomplete
- Calendars diff --git a/docs/experimentals/carousels.html b/docs/experimentals/carousels.html index 7ec0e21..be88354 100644 --- a/docs/experimentals/carousels.html +++ b/docs/experimentals/carousels.html @@ -166,6 +166,8 @@ Experimentals
  - 360-Degree Viewer +
  - Autocomplete
  - Calendars diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html index db3ca79..e351e04 100644 --- a/docs/experimentals/comparison.html +++ b/docs/experimentals/comparison.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html index 72b2399..d87a0bf 100644 --- a/docs/experimentals/filters.html +++ b/docs/experimentals/filters.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html index 24118dc..b449c33 100644 --- a/docs/experimentals/meters.html +++ b/docs/experimentals/meters.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars diff --git a/docs/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html index 703fca0..b5b7636 100644 --- a/docs/experimentals/off-canvas.html +++ b/docs/experimentals/off-canvas.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html index 1ffa6e3..bb590c2 100644 --- a/docs/experimentals/parallax.html +++ b/docs/experimentals/parallax.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html index 686dcf2..ad96664 100644 --- a/docs/experimentals/progress.html +++ b/docs/experimentals/progress.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars diff --git a/docs/experimentals/sliders.html b/docs/experimentals/sliders.html index cd979a6..30a2768 100644 --- a/docs/experimentals/sliders.html +++ b/docs/experimentals/sliders.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html index b69413f..a1c0599 100644 --- a/docs/experimentals/timelines.html +++ b/docs/experimentals/timelines.html @@ -166,6 +166,8 @@ Experimentals
    
    +
    360-Degree Viewer +
    
    Autocomplete
    
    Calendars 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 + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + PayPal GitHub +
    +
    +
    +
    +
    SPECTRE
    +
    +
    +
    +
    + + Getting started +
    +
    +
    Installation +
    +
    Custom version +
    +
    Browser support +
    +
    What's new +
    +
    +
    +
    +
    + + Elements +
    +
    +
    Typography +
    +
    Tables +
    +
    Buttons +
    +
    Forms +
    +
    Icons +
    +
    Labels +
    +
    Code +
    +
    Media +
    +
    +
    +
    +
    + + Layout +
    +
    +
    Flexbox grid +
    +
    Responsive +
    +
    Hero +
    +
    Navbar +
    +
    +
    +
    +
    + + Components +
    +
    +
    Accordions +
    +
    Avatars +
    +
    Badges +
    +
    Bars +
    +
    Breadcrumbs +
    +
    Cards +
    +
    Chips +
    +
    Empty states +
    +
    Menu +
    +
    Modals +
    +
    Nav +
    +
    Pagination +
    +
    Panels +
    +
    Popovers +
    +
    Steps +
    +
    Tabs +
    +
    Tiles +
    +
    Toasts +
    +
    Tooltips +
    +
    +
    +
    +
    + + Utilities +
    +
    +
    Colors +
    +
    Cursors +
    +
    Display +
    +
    Divider +
    +
    Loading +
    +
    Position +
    +
    Shapes +
    +
    Text +
    +
    +
    +
    +
    + + Experimentals +
    +
    +
    360-Degree Viewer +
    +
    Autocomplete +
    +
    Calendars +
    +
    Carousels +
    +
    Comparison sliders +
    +
    Filters +
    +
    Meters +
    +
    Off-canvas +
    +
    Parallax +
    +
    Progress +
    +
    Sliders +
    +
    Timelines +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    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> +
    +
    + +
    +
    +
    +
    Documents · GitHub · Twitter · PayPal Donate · Version
    +
    Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
    +
    +
    +
    +
    + + + + + \ No newline at end of file -- cgit v1.3.1-23-gd82d

SPECTRE

360-Degree Viewer#