ReactRotate360 is a plugin to create 360 degree showcases. Inspired on Apple iPhone 360 showcase.
Made with React and HTML5.
Works with videos or images.
To build the examples locally, run:
npm install
gulp dev
Then open localhost:8000
in a browser.
The plugin uses input[type=range]
for the slide. You can check the support here.
You can use this plugin with videos (mp4, ogg or webm).
var sources = [
'path/to/videos/video.mp4',
'path/to/videos/video.oggtheora.ogv',
'path/to/videos/video.webmhd.webm'
];
React.render(<Rotate src={sources} />, document.querySelector('#video'));
// Render images
React.render(<Rotate type="image" path="examples/images" ext="png" total="43" />, document.querySelector('#images'));
.rotate-box { }
.rotate-video { }
.rotate-image { }
.rotate-range { } /* For input[type=range] */
.rotate-range::-webkit-slider-thumb { }
Attribute | Type | Use with? | Default | Description |
---|---|---|---|---|
src |
array |
video | - | Pass an array with your videos path. The plugin will create the <source> tags. |
type |
string |
both | video | Use video or image |
path |
string |
image | - | Pass the path of your images. The images need follow a sequence. The first image need start with 1. e.g: 1.png, 2.png, 3.png ... 30.png |
ext |
string |
image | jpg |
The extension of your images. |
total |
string or int |
image | - | Pass the quantity of your images. |
IE 10+ ✔ | Latest ✔ | Latest ✔ | Images ✔ Videos :( | Latest ✔ |
No license. Use as you wish.
Copyright (c) 2015 Cezar Luiz.