Knob with Snap

Developer
APinix
Size
6,231 Kb
Views
8,096
  1. Knob with Snap Previews
  2. Knob with Snap HTML Codes
  3. Knob with Snap CSS Codes
  4. Knob with Snap JS Codes

How do I make an knob with snap?

Greensock Draggable with snap feature without paid throwprops plugin. Enjoy ;). What is a knob with snap? How do you make a knob with snap? This script and codes were developed by APinix on 11 January 2023, Wednesday.

Knob with Snap Previews
IQ Test

Knob with Snap - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Knob with Snap</title> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper" class="center"> <div id="knob"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAAEECAMAAAD51ro4AAACylBMVEUboeL///8boeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeIboeJs6OSeAAAA7XRSTlMAAAECBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5zdHV2d3l6e3x9fn+AgYKDhIWGh4iJ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"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Knob with Snap - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body { background: #F4F4F4;
}
.center {	margin: auto;	position: absolute;	top: 0;	left: 0;	bottom: 0;	right: 0;
}
#wrapper { width: 260px; height: 260px;
}
#knob { width: 100%; height: 100%; cursor: pointer; -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg);
}

Knob with Snap - Script Codes JS Codes

var num = 4;
var array = [];
var angle;
for(var i = 0; i < num + 1; i++) {	array.push(i*(360/num));
}
//console.log(array);
Draggable.create("#knob", {	type: "rotation",	onDrag: function() {	angle = $("#knob")[0]._gsTransform.rotation;	if (angle < 0) angle += 360;	else if (angle > 360) angle -= 360;	else if (angle == 360) angle = 360;	//console.log("ANGLE:", angle);	},	onDragEnd: function() {	TweenMax.to("#knob", .3, {rotation:closest(array, angle) + "_short"});	}
});
function closest(array, num) {	var i = 0;	var minDiff = 1000;	var ans;	for(i in array) {	var m = Math.abs(num-array[i]);	if(m < minDiff){	minDiff = m;	ans = array[i];	}	}	return ans;
}
Knob with Snap - Script Codes
Knob with Snap - Script Codes
Home Page Home
Developer APinix
Username aPinix
Uploaded January 11, 2023
Rating 3.5
Size 6,231 Kb
Views 8,096
Do you need developer help for Knob with Snap?

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!

APinix (aPinix) Script Codes
Name
CSS Clock
Scroll Horizontal Edge Shadows
IOS7 Flat Toggle
Fire on Resize Finish
Pure CSS Tooltip
Guided Tour Tooltip
CSS Spinner
SASS Clock
CSS Infinite 360
AppStore Flat Hollow Badge
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!