Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/draggable-knob-and-scroll-area-v3.markdown

Created May 3, 2021 15:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harunpehlivan/d5a356c0ef4ce8d9142e321f8da065e9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harunpehlivan/d5a356c0ef4ce8d9142e321f8da065e9 to your computer and use it in GitHub Desktop.
Download ZIP
Draggable knob and scroll area v3
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Draggable knob and scroll area v3</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="knobBG">
<div id="knob"></div>
</div>
<div id="content">
<div>
<div class="box box1">HARUN PEHLİVAN <div id="description">
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1615565626/IMG_20210312_185156_uqcx6i.jpg" alt="Screenshot" width="140">
<p>
22/07/1984'de
Çorum'da Doğdum Aslen Samsun'un Havza ilçesi
</p>
<p>
The language I started programming is PASCAL
</p>
</div></div>
<div class="box box2">
<a href="https://machinelearning.glitch.me/" role="button"><img class="image" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fmachinelearning.glitch.me?w=360" alt="(ML) (DL) (AI) "></a>
</div>
<div class="box box3"><a href="https://arapcaosmanlicaklavye.glitch.me/" role="button"><img class="image" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Farapcaosmanlicaklavye.glitch.me?w=360" alt="Arapça Osmanlıca Klavye"></div>
<div class="box box4"><a href="https://klavyehiztesti.glitch.me/" role="button"><img class="image" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fklavyehiztesti.glitch.me?w=360" alt="Klavye Hız Testi"></div>
<div class="box box5"><a href="https://webcalisma.glitch.me/" role="button"><img class="image" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalisma.glitch.me?w=360" alt="WEB ÇALIŞMA"></div>
<div class="box box6"><a href="http://harunpehlivan.fm.tc/" role="button"><img class="image" src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.fm.tc?w=360" alt="TTGRT"></div>
<div class="box box7"><a href="https://downloadspeedcalculator.glitch.me/" role="button"><img class="image" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fdownloadspeedcalculator.glitch.me?w=360" alt="Download Speed Calculator"></div>
<div class="box box8"> </a>
<a href="http://harunpehlivancurriculumvitae.glitch.me/" rel="nofollow" class="url">
<img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fharunpehlivancurriculumvitae.glitch.me?w=360" alt="Screenshot" width="180">
</div>
<div class="box box9"><a href="https://harunpehlivanizyon.glitch.me/" role="button"><img class="image" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivanizyon.glitch.me?w=360" alt=" HP Portfolio Page"></a></div>
</div>
</div>
<!-- partial -->
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script><script src="./script.js"></script>
</body>
</html>
Raw
script.js
var content = document.getElementById("content");
var knob = document.getElementById("knob");
var maxScroll = content.scrollHeight - content.offsetHeight;
var needsRotationUpdate = false;
var sections = 9;
function onRotateKnob() {
dragContent.scrollProxy.top(maxScroll * dragKnob.rotation / -360);
needsRotationUpdate = false;
}
function updateRotation() {
gsap.set(knob, {rotation:360 * (content.scrollTop / maxScroll)});
needsRotationUpdate = false;
}
function killTweens() {
gsap.killTweensOf([knob, dragContent.scrollProxy]);
}
content.addEventListener("mousewheel", killTweens);
content.addEventListener("DOMMouseScroll", killTweens);
content.addEventListener("scroll", function() {
needsRotationUpdate = true;
});
gsap.ticker.add(function() {
needsRotationUpdate && updateRotation();
});
//create the knob Draggable
Draggable.create(knob, {
type: "rotation",
throwProps: true,
edgeResistance: 0.85,
bounds: {minRotation:0, maxRotation:360},
onDragStart: killTweens,
onDrag: onRotateKnob,
onThrowUpdate: onRotateKnob,
snap: function(endValue) {
var step = 360 / (sections - 1);
return Math.round( endValue / step) * step;
}
});
//create the content Draggable
Draggable.create(content, {
type: "scrollTop",
edgeResistance: 0.5,
inertia: true,
onDragStart: killTweens,
snap: function(endValue) {
var step = maxScroll / (sections - 1);
return Math.round( endValue / step) * -step;
}
});
var dragContent = Draggable.get(content);
var dragKnob = Draggable.get(knob);
Raw
style.css
body{
background-color: #26292f;
}
#knobBG, #knob {
position:absolute;
background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1620054590/knob_Base_hc7dp5.png');
width:355px;
height:355px;
}
#description {
font-size:20px;
}
#knob {
background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1620054807/knob_Spinner_dgkccn.png');
z-index: 1;
}
.box {
font-size:30px;
padding: 10px;
}
#content .box {
margin-left:425px;
height: 335px;
}
#content{
height:355px;
overflow: hidden;
}
.box1{
background-color: #88b6f7;
}
.box2{
background-color: #9a9bff;
}
.box3{
background-color: #bbfb94;
}
.box4{
background-color: #ed74c4;
}
.box5{
background-color: #eb984e;
}
.box6{
background-color: #a9eaf1;
}
.box7{
background-color: #dcecf1;
}
.box8{
background-color: pink;
}
.box9{
background-color: purple;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment