Rotate Circle Pure Javascript

Developer
Parth Viroja
Size
2,896 Kb
Views
44,528
  1. Rotate Circle Pure Javascript Previews
  2. Rotate Circle Pure Javascript HTML Codes
  3. Rotate Circle Pure Javascript CSS Codes
  4. Rotate Circle Pure Javascript JS Codes

How do I make an rotate circle pure javascript?

You can rotate menu using mouse... its a pure javascript. What is a rotate circle pure javascript? How do you make a rotate circle pure javascript? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.

Rotate Circle Pure Javascript Previews
IQ Test

Rotate Circle Pure Javascript - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rotate Circle Pure Javascript</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ring-wrapper"> <div id="layer-1" class="ring layer-1"> <div class="ring-display"> <div class="label"><span>A</span></div> <div class="label"><span>B</span></div> <div class="label"><span>C</span></div> <div class="label"><span>D</span></div> <div class="label"><span>E</span></div> <div class="label"><span>F</span></div> <div class="label"><span>G</span></div> <div class="label"><span>H</span></div> <div class="label"><span>I</span></div> <div class="label"><span>J</span></div> <div class="label"><span>K</span></div> <div class="label"><span>L</span></div> </div> <div class="interaction"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Rotate Circle Pure Javascript - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600);
html { width: 100%;
}
body { background: lightcoral; padding: 50px; font-family: "Lato"; font-weight: 300;
}
.ring-wrapper { position: relative; display: block; width: 500px; height: 500px; margin: 0 auto; overflow: hidden;
}
.ring { display: block; width: 100px; height: 100px; position: absolute; top: 0; transition: transform 0.25s, box-shadow 0.25s; overflow: hidden; border-radius: 100%;
}
.ring-display { width: 100%; height: 100%; display: block; border-radius: 100%; overflow: hidden; position: absolute;
}
.interaction { width: 100%; height: 100%; display: block; border-radius: 100%; position: absolute; cursor: pointer;
}
.ring:hover + .ring { transition: box-shadow 0.25s;
}
.layer-1 { width: 500px; height: 500px; border-radius: 100%;
}
.label { top: 50%; width: 100%; height: 100%; text-align: center; transform-origin: 50% 0; position: absolute; //transform:rotate(0deg) translate(0, -50%); pointer-events: none; color: #000; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); line-height: 100px; font-size: 2em; transition: color 1s; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.label span { display: inline-block; margin: 0 auto; width: 80px; height: 80px; line-height: 80px; background: #fff; border-radius: 50%;
}
.label:nth-child(1) { transform: rotate(0deg) translate(0, -50%); //transform: rotate(360deg) translate(0, -50%);
}
.label:nth-child(2) { transform: rotate(30deg) translate(0, -50%);
}
.label:nth-child(3) { transform: rotate(60deg) translate(0, -50%);
}
.label:nth-child(4) { transform: rotate(90deg) translate(0, -50%);
}
.label:nth-child(5) { transform: rotate(120deg) translate(0, -50%);
}
.label:nth-child(6) { transform: rotate(150deg) translate(0, -50%);
}
.label:nth-child(7) { transform: rotate(180deg) translate(0, -50%);
}
.label:nth-child(8) { transform: rotate(210deg) translate(0, -50%);
}
.label:nth-child(9) { transform: rotate(240deg) translate(0, -50%);
}
.label:nth-child(10) { transform: rotate(270deg) translate(0, -50%);
}
.label:nth-child(11) { transform: rotate(300deg) translate(0, -50%);
}
.label:nth-child(12) { transform: rotate(330deg) translate(0, -50%);
}

Rotate Circle Pure Javascript - Script Codes JS Codes

circle('layer-1'); function circle(id) { var el = document.getElementById(id); var elDisplay = el.children[0]; var elInteraction = el.children[1]; var offsetRad = null; var targetRad = 0; var previousRad; try { elInteraction.addEventListener('mousedown', down); } catch (err) { console.log("Interaction not found"); } function down(event) { offsetRad = getRotation(event); previousRad = offsetRad; window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); } function move(event) { var newRad = getRotation(event); targetRad += (newRad - previousRad); previousRad = newRad; elDisplay.style.transform = 'rotate(' + (targetRad / Math.PI * 180) + 'deg)'; } function up() { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); } function getRotation(event) { var pos = mousePos(event, elInteraction); var x = pos.x - elInteraction.clientWidth * .5; var y = pos.y - elInteraction.clientHeight * .5; return Math.atan2(y, x); } function mousePos(event, currentElement) { var totalOffsetX = 0; var totalOffsetY = 0; var canvasX = 0; var canvasY = 0; do { totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft; totalOffsetY += currentElement.offsetTop - currentElement.scrollTop; } while (currentElement = currentElement.offsetParent) canvasX = event.pageX - totalOffsetX; canvasY = event.pageY - totalOffsetY; return { x: canvasX, y: canvasY }; } }
Rotate Circle Pure Javascript - Script Codes
Rotate Circle Pure Javascript - Script Codes
Home Page Home
Developer Parth Viroja
Username parthviroja
Uploaded September 03, 2022
Rating 3
Size 2,896 Kb
Views 44,528
Do you need developer help for Rotate Circle Pure Javascript?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Parth Viroja (parthviroja) Script Codes
Name
Card border collspan
Text Shapes
Custom checkbox and radio with menu
Slide up down
Ripple Effect
Upload Image Form
Css Dropdown Design
Filter, sort grid item
Right side menu tab with icon
3D-box
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!