Reactrotate360 NPM

ReactRotate360

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.

Examples

To build the examples locally, run:

npm install
gulp dev

Then open localhost:8000 in a browser.

Video GIF Demo

Images GIF Demo

Image GID Demo

Usage

The plugin uses input[type=range] for the slide. You can check the support here.

Videos

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'));

Images

// Render images
React.render(<Rotate type="image" path="examples/images" ext="png" total="43" />, document.querySelector('#images'));

CSS Classes

.rotate-box { }
.rotate-video { }
.rotate-image { }
.rotate-range { } /* For input[type=range] */
.rotate-range::-webkit-slider-thumb { }

Documentation

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.

Browser Support


IE 10+ ✔	Latest ✔	Latest ✔	Images ✔ Videos :(	Latest ✔

On mobile, use only images.

License

No license. Use as you wish.

react react-component

react reactify

@infinitebrahmanuniverse/nolb-reactr @everything-registry/sub-chunk-2628

0.0.0

9 years ago