JavaScript 360 Image Rotate

This JavaScript code snippet helps you to create a 360 image rotation. It uses a “use strict” directive that enables a strict mode in JavaScript. The following few lines of code create a 360-degree image viewer by loading and appending 120 images to the “.viewer” element in the DOM. The images are loaded using a for loop that creates a new Image object for each image and sets its source URL to an Amazon S3 URL that includes a numbered sequence. The loader element updates with the percentage of images loaded.

The code then adds an event listener to the document that listens for updates from the “Impetus” library, which handles the rotation of the image viewer. The “update” function of the “Impetus” object is called with the current x-coordinate of the user’s touch or mouse position, which is used to determine which image in the array should be displayed. The code also adds an event listener to change the cursor style when the user clicks and drags on the image viewer.

How to Create JavaScript 360 Image Rotate

First of all, load the following assets into the head tag of your HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML structure for the image rotation as follows:

<article>
	<h2><span>360˚</span> Image Viewer</h2>
	<figure>
		<div class="viewer"></div>
		<figcaption>
			<span>VIA57™</span> by KiBiSi
		</figcaption>
		
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
			<path d="M16 9C8.019 9 2 11.794 2 15.5c0 3.388 5.038 6.006 12 6.432V25l5-4-5-4v2.926C8.162 19.522 4 17.412 4 15.5 4 13.376 9.132 11 16 11s12 2.376 12 4.5c0 1.301-1.93 2.694-5 3.58v2.1c4.245-1.091 7-3.176 7-5.68C30 11.794 23.981 9 16 9z"/>
		</svg>	
	</figure>
	<footer>
		<p>Grab'N'Drag – Build on <a href="http://chrisbateman.github.io/impetus/" target="_blank">impetus.js</a></p>
	</footer>
</article>

<link rel="preload" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/360-001.jpg" as="image" />

Now, Style the image rotation using the following CSS styles:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700");
.viewer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.viewer img:first-child {
  position: relative;
}
.viewer img.active {
  opacity: 1;
}
.viewer::before {
  padding-bottom: 56.25%;
  float: left;
}
.viewer::before, .viewer::after {
  content: "";
  display: table;
  clear: both;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto";
  background-color: #ECEFF1;
  padding: 1rem;
  cursor: -webkit-grab;
  cursor: grab;
}

article {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  max-width: 100vmin;
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 2px 2px 4px rgba(120, 144, 156, 0.3);
}
article h2 {
  font-size: 5vmin;
  font-weight: 500;
  line-height: 0;
  matgin: 0;
  color: orangered;
}
article h2 span {
  font-weight: 400;
  font-size: 12vmin;
  bottom: -3.2vmin;
  margin-right: -4vmin;
}
article p {
  margin: 0;
  font-size: 0.75rem;
  color: #78909C;
}
article figure {
  margin: 0;
  padding: 0;
  z-index: -1;
}
article figcaption {
  font-size: 5.5vmin;
  bottom: calc(8vmin);
  transform-origin: 0 0;
  transform: rotate(-90deg);
  color: #78909C;
  position: absolute;
  bottom: -1rem;
}
article figcaption span {
  font-weight: 700;
}
article svg {
  display: bloc;
  position: absolute;
  bottom: -3vmin;
  right: 0;
  width: 16vmin;
  height: 16vmin;
  fill: #78909C;
  opacity: 0.2;
  transform: scaleX(-1);
}
article footer p {
  position: absolute;
  right: 0;
  bottom: -2.2rem;
}
article footer p a {
  color: orangered;
  text-decoration: none;
  font-weight: 700;
}

html {
  box-sizing: border-box;
  height: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
  position: relative;
  z-index: 0;
  background-repeat: no-repeat;
}

body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

Load the following scripts before closing the body tag:

<script src='https://cdn.jsdelivr.net/npm/impetus@0.8.8/dist/impetus.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/inobounce/0.2.0/inobounce.min.js'></script>

Finally, add the following JavaScript function for its functionality:

"use strict";
//	build scene
let loaded = 0;
const viewer = document.querySelector('.viewer');
const loader = document.querySelector('h2 span');
const images = [];
for (let i = 1; i <= 120; ++i) {
    const img = new Image();
    img.src = `//s3-us-west-2.amazonaws.com/s.cdpn.io/68939/360-${('00' + i).slice(-3)}.jpg`;
    img.onload = () => loader.innerText = `${Math.round(++loaded / 120 * 360)}˚`;
    images.push(img);
    viewer.appendChild(img);
}
//	rotation handler
//	http://chrisbateman.github.io/impetus/
//	https://github.com/chrisbateman/impetus
const threshold = 5;
const total = images.length - 1;
let frame = 0;
const impetus = new Impetus({
    source: document,
    update(x) {
        // console.log(x)
        images[frame].classList.remove('active');
        frame = Math.floor(-x / threshold) % total;
        frame = frame <= 0 ? total + frame : frame;
        images[frame].classList.add('active');
    }
});
images[frame].classList.add('active');
//	cursor
addEventListener('mousedown', e => document.body.style.cursor = 'grabbing');
addEventListener('mouseup', e => document.body.style.cursor = 'grab');

That’s all! hopefully, you have successfully created the  JavaScript 360 image rotate. If you have any questions or suggestions, feel free to comment below.