Vertical drag to change

Developer
Marco Dell'Anna
Size
4,488 Kb
Views
56,672
  1. Vertical drag to change Previews
  2. Vertical drag to change HTML Codes
  3. Vertical drag to change CSS Codes
  4. Vertical drag to change JS Codes

How do I make an vertical drag to change?

What is a vertical drag to change? How do you make a vertical drag to change? This script and codes were developed by Marco Dell'Anna on 14 June 2022, Tuesday.

Vertical drag to change Previews
IQ Test

Vertical drag to change - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical drag to change</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Click and ...drag</p>
<div class="joystick__dummy joystick__dummy--up"></div>
<div class="joystick__dummy joystick__dummy--down"></div>
<div id="joystick" data-dumping="3" class="joystick"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vertical drag to change - Script Codes CSS Codes

html { width: 100%; height: 100%; cursor: crosshair; background: #121212;
}
p { font-family: "Montserrat"; font-size: 12px; color: #FFF;
}
.joystick__dummy { position: relative; transition: opacity 0.4s ease-out, transform 0.4s ease-out; width: 10px; height: 10px; background: transparent; border: 1px solid #fefefe; border-radius: 10px; margin: 0 0 0 -6px; opacity: 0; transform: scale(0);
}
.joystick__dummy--show { opacity: 1; transform: scale(1);
}
.joystick { position: absolute; width: 0; height: 0;
}
.joystick:after { transition: all 0.5s ease-in-out; position: absolute; content: ""; width: 150px; height: 150px; border: 1px solid #fefefe; border-radius: 150px; top: -75px; left: -75px; opacity: 0;
}
.joystick:before { transition: all 0.2s ease-in; content: ""; position: absolute; width: 50px; height: 50px; background: transparent; border: 1px solid #fefefe; border-radius: 50px; top: -26px; left: -26px;
}
.joystick--down:before { width: 10px; height: 10px; top: -6px; left: -6px; background: #fefefe;
}
.joystick--down:after { transition: all 0.2s ease-in; width: 10px; height: 10px; top: -6px; left: -6px; opacity: 1;
}

Vertical drag to change - Script Codes JS Codes

(function() { var Joystick, follow; Joystick = (function() { Joystick.prototype.status = "up"; Joystick.prototype.startCoordinate = { x: 0, y: 0 }; Joystick.prototype.defaults = { dumping: 1, disable: false, coordiantes_to_follow: { x: 0, y: 0 }, offset: { x: 0, y: 0 }, onChange: function(coordinates) {} }; Joystick.prototype.setCoordinates = function(data) { return this.options.coordiantes_to_follow = data; }; Joystick.prototype.follow = function() { var coordinates, dumping, offset, valueX, xd, yd; if (!this.element.data("dumping")) { dumping = this.element.data("dumping") || this.options.dumping; this.element.data("dumping", dumping); } else { dumping = this.element.data("dumping"); } offset = this.element.offset(); xd = this.options.offset.x + this.options.coordiantes_to_follow.x - offset.left; yd = this.options.offset.y + this.options.coordiantes_to_follow.y - offset.top; if (this.status === "up") { valueX = offset.left + xd / dumping; } else { valueX = this.startCoordinate.x; } if (this.status === "down") { if (offset.top >= (this.startCoordinate.y + 100) || offset.top <= (this.startCoordinate.y - 100 + 12)) { this.destroyDummy(); this.status = "up"; } } coordinates = { x: valueX, y: offset.top + yd / dumping }; this.element.css({ "left": coordinates.x, "top": coordinates.y }); this.options.onChange(coordinates); if (!this.disable) { return requestAnimationFrame((function(_this) { return function() { return _this.follow(); }; })(this)); } }; Joystick.prototype.createDummy = function() { this.dummy1 = $("<div class=\"joystick__dummy joystick__dummy--up\" />"); this.dummy2 = $("<div class=\"joystick__dummy joystick__dummy--down\" />"); $("body").append(this.dummy1).append(this.dummy2); $(this.dummy1).css({ "position": "absolute", "left": this.startCoordinate.x, "top": this.startCoordinate.y + 100 }).addClass("joystick__dummy--show"); return $(this.dummy2).css({ "position": "absolute", "left": this.startCoordinate.x, "top": this.startCoordinate.y - 100 }).addClass("joystick__dummy--show"); }; Joystick.prototype.destroyDummy = function() { $(this.dummy1).removeClass("joystick__dummy--show"); return $(this.dummy2).removeClass("joystick__dummy--show"); }; Joystick.prototype.addBehaviour = function() { $(document).on("mousedown", (function(_this) { return function(e) { e.preventDefault(); e.stopPropagation(); _this.status = "down"; _this.startCoordinate = { "x": e.pageX, "y": e.pageY }; $(_this.element).addClass("joystick--down"); return _this.createDummy(); }; })(this)); return $(document).on("mouseup", (function(_this) { return function(e) { _this.status = "up"; $(_this.element).removeClass("joystick--down"); return _this.destroyDummy(); }; })(this)); }; function Joystick(element, options) { this.options = $.extend({}, this.defaults, options); this.element = $(element); this.disable = this.options.disable; this.addBehaviour(); if (!this.disable) { this.follow(); } } return Joystick; })(); follow = new Joystick("#joystick", { offset: { x: 0, y: 0 } }); $(window).on("mousemove.follow", function(e) { return follow.setCoordinates({ x: e.pageX, y: e.pageY }); });
}).call(this);
Vertical drag to change - Script Codes
Vertical drag to change - Script Codes
Home Page Home
Developer Marco Dell'Anna
Username plasm
Uploaded June 14, 2022
Rating 3
Size 4,488 Kb
Views 56,672
Do you need developer help for Vertical drag to change?

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!

Marco Dell'Anna (plasm) Script Codes
Name
BLOOD - Deviation of microcosm
Antigravity FLOW
MAGNETO
DISTANCES
Connections
Follow
LOOK-AT-dark
MICROCOSM
Icosahedron
Mosaica 3D css
Create amazing video scripts 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!