Design a Interactive 360-degree Product Viewer using HTML CSS and JavaScript
Creating an interactive 360-degree product viewer with an attractive user interface using HTML, CSS, and JavaScript is a simple, interactive resource that can be used to provide a virtual tour of your product. In this article, we will create an Interactive 360-degree Product Viewer using HTML, CSS, and JavaScript.
Approach
- Create an HTML structure for your product viewer with an image section and two buttons.
- Now style the viewer container and buttons using the CSS. Set dimensions, colors, and positioning according to your design preferences.
- Use JavaScript to handle the interactivity by writing functions differently for the previous and next buttons.
- Make an update function such that it rotates an HTML element with the id ‘productImage’ around the Y-axis.
- Test your interactive 360-degree product viewer in different browsers and devices to ensure it works as expected.
Example: In this example, we will see the design of a product viewer with a 360-degree viewer.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "style.css" > < script src = "script.js" defer></ script > < title >The 360° Product Viewer</ title > </ head > < body > < div class = "product-viewer" > < div class = "viewer-container" > < img src = "/image/car.png" class = "product-image" id = "productImage" alt = "Product Image" > </ div > < div class = "controls" > < button id = "prevBtn" class = "control-button" > Previous </ button > < button id = "nextBtn" class = "control-button" > Next </ button > </ div > </ div > </ body > </ html > |
CSS
/* style.css */ body { display : flex; justify- content : center ; align-items: center ; height : 100 vh; margin : 0 ; } .product-viewer { display : flex; flex- direction : column; align-items: center ; width : 400px ; } .viewer-container { position : relative ; width : 100% ; overflow : hidden ; box-shadow: 0 0 10px rgba( 0 , 0 , 0 , 0.2 ); } .product-image { width : 100% ; transition: transform 0.5 s; } .controls { display : flex; justify- content : space-between; width : 100% ; margin-top : 10px ; } .control-button { padding : 10px 20px ; background-color : #000000 ; color : #fff ; border : none ; cursor : pointer ; border-radius: 5px ; transition: background-color 0.3 s; } .control-button:hover { background-color : #0000FF ; } |
Javascript
// script.js const productImage = document.getElementById( 'productImage' ); const nextBtn = document.getElementById( 'nextBtn' ); const prevBtn = document.getElementById( 'prevBtn' ); const topBtn = document.getElementById( 'topBtn' ); const bottomBtn = document.getElementById( 'bottomBtn' ); let currentFrame = 1; const totalFrames = 36; nextBtn.addEventListener( 'click' , () => { if (currentFrame < totalFrames) { currentFrame++; update(); } }); prevBtn.addEventListener( 'click' , () => { if (currentFrame > 1) { currentFrame--; update(); } }); function update() { const rotation = (currentFrame - 1) * (360 / totalFrames); productImage.style.transform = `rotateY(${rotation}deg)`; } |
Output: