3D Perspective Image Rotator With Reflections – ImageRotatorJS

Category: Gallery , Javascript | September 24, 2016
0 Comment
Demo Download
Author:mjza
Views Total:1,263 views
Official Page:Go to website
Last Update:September 24, 2016
License:MIT

Preview:

3D Perspective Image Rotator With Reflections – ImageRotatorJS

Description:

ImageRotatorJS is a pure JavaScript library for creating an 3D image rotator with realistic perspective and reflections. Each image may be ‘Zoomed’ as it approaches the center bottom of the rotator to give a 3D effect. The ‘Zoom’ is specified in the initialization call and is applied to the width, height and font size of the image.

How to use it:

Download and import the ImageRotator-min.js into the webpage.

<script src="ImageRotator-min.js"></script>

The elements to be displayed in the rotator are defined in the HTML code and must be assigned a class name which includes a unique string of characters. These elements must be nested in a parent DIV. This parent DIV must be assigned a unique ID name and the width and height will determine the horizontal and vertical dimensions of the rotator. For example:

<div id="Ellipse">
 <img class="RotatingIcon"  src="img/img11.jpg">
 <img class="RotatingIcon"  src="img/img10.jpg">
 <img class="RotatingIcon"  src="img/img1.jpg">
 <img class="RotatingIcon"  src="img/img9.jpg">
 <img class="RotatingIcon"  src="img/img1.png">
 <img class="RotatingIcon"  src="img/img2.jpg">
</div>

Each application would normally be initialised from a <BODY> or window onload event call to function ‘ImageRotatorJS’. For example:

<body onload="ImageRotatorJS('Ellipse','RotatingIcon',5,110,3000, 0, 90, 40, 'white');">

Parameters:

  • parameter 0 =(string) {containerId}: the unique ID name of the parent DIV.
  • parameter 1 =(string) {elementsClass}: the unique string of element’s class name to signify inclusion.
  • parameter 2 =(digits) {rotationSpeed}: the rotation speed, 10 = fast, 500 = slow. 10 = 0.01 second
  • parameter 3 =(digits) {zoomPercentage}: the element ‘Zoom’, 0 = no Zoom, 100 = 100% Zoom.
  • parameter 4 =(digits) {holdDelay}: the initial ‘Hold’ delay. A number in milliseconds that tells how much it has to wait between rotations.
  • parameter 5 =(digits) {rotationAngle}: +/- 0~360 degree. If we assume a Z axis orthogonal to the screen, then 45 degrees cause to sloop images to the screen
  • parameter 6 =(digits) {startAngle}: +/- 0-360 degree. The initial position of the first image.
  • parameter 7 =(digits) {reflectionPercentage}: 0~100. The amount of reflection of images
  • parameter 8 =(string) {circumferenceDotsColor}: (optional) the color of the circumference (dotted), more uses for development purposes.

There are two functions to control the rotation, ‘IRJS_StartRotation’ and ‘IRJS_StopRotation’.

<!-- Calling this function will stop the ellipse rotation.-->
<!-- parameter 0 =(string) the unique ID name of the parent DIV.-->
<input type="button" name="" value="Stop" onmouseover="IRJS_StopRotation('Ellipse1');">
<!-- Calling this function will rotate the ellipse to an incremental point. -->
<!-- parameter 0 =(string) the unique ID name of the parent DIV. -->
<!-- parameter 1 =(1 | -1) the direction of rotation, 1 = clockwise, -1 = anti clockwise. -->
<!-- parameter 2 =(digits) (optional) to change the 'Hold' delay. -->
<input type="button" name="" value="Next" onclick="IRJS_StartRotation('Ellipse1',1);">
<input type="button" name="" value="Back" onclick="IRJS_StartRotation('Ellipse1',-1);">

There are two similar functions with names ‘startRotation’ and ‘stopRotation’ that you can call on ImageRotatorJS object to start or stop the rotation. Just you don’t need to pass the id of the element but the rest arguments are needed.

See Also:

You Might Be Interested In:

Leave a Reply