JQuery.momentus

Developer
Aaron Levine
Size
5,092 Kb
Views
2,024
  1. JQuery.momentus Previews
  2. JQuery.momentus HTML Codes
  3. JQuery.momentus CSS Codes
  4. JQuery.momentus JS Codes

How do I make an jquery.momentus?

A velocity/momentum event dispatcher for jQuery. What is a jquery.momentus? How do you make a jquery.momentus? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.

JQuery.momentus Previews
IQ Test

JQuery.momentus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery.momentus</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="square2"></div>
<div class="square"></div>
<div class="display"> <h1>jQuery.momentus a Velocity and Momentum Plugin</h1>Drag / Scroll<br/>X: 0.0, Y: 0.0<br/>vX: 0.00, vY: 0.00
</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>

JQuery.momentus - Script Codes CSS Codes

.square { box-sizing: border-box; position: absolute; left: -10000px; top: -10000px; display: inline-block; width: 20000px; height: 20000px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjEwMCUiIGN5PSI1MCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMjElIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMSIvPjxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMSIvPjxzdG9wIG9mZnNldD0iMzUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iNTAlIiByPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 0 -50px; background: -moz-radial-gradient(100% 50%, circle, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)), -moz-radial-gradient(0% 50%, circle, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)) 0 -50px; background: -webkit-radial-gradient(100% 50%, circle, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(0% 50%, circle, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)) 0 -50px; background: radial-gradient(circle at 100% 50%, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)), radial-gradient(circle at 0% 50%, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)) 0 -50px; background-size: 330px 112px;
}
.square2 { box-sizing: border-box; position: absolute; left: -5000px; top: -5000px; display: inline-block; width: 10000px; height: 10000px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIyMSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PHN0b3Agb2Zmc2V0PSIzNCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4zIi8+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.3) 21%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)); background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.3) 21%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)); background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.3) 21%, rgba(0, 0, 0, 0.3) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)); background-size: 200px 200px;
}
.display { position: absolute; left: 50%; top: 50%; display: inline-block; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;
}
html, body { width: 100%; height: 100%; padding: 0; margin: 0; background: #1c1c1c; color: #fff; overflow: hidden; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

JQuery.momentus - Script Codes JS Codes

jQuery.fn.momentus = function(cfg){ /******** Initialize *****************/ var now = Date.now || function(){return (new Date()).valueOf()}, start_point = {x: 0, y: 0}, last_point = {x: 0, y: 0}, current_coords = {x: 0, y: 0}, last_coords = {x: 0, y: 0}, velocity = {x: 0, y: 0}, last_time = now(), inertia_time = last_time, /******** End Initialize *************/ /******** Configuration **************/ /** * @cfg {Number} mass : The unitless mass of this Momentus */ mass = cfg.mass || 1000, /** * @cfg {Number} u : The friction coefficient */ u = 'u' in cfg ? cfg.u : 4, /** * @cfg {Number} wheelRatio : The amount to divide mousewheel deltas by (to get desired sensitivity) */ wheel_ratio = cfg.wheelRatio || 1000, /** * @cfg {Number} mouseRatio : The amount to divide mousemove deltas by */ mouse_ratio = cfg.mouseRatio || 20, /** * @cfg {Number} touchRatio : The amount to divide touchmove deltas by */ touch_ratio = cfg.touchRatio || 1, /** * @cfg {Function} onChange : Callback called when any change is made to position or velocity * @param {Object} coordinates {x: current_x, y: current_y} * @param {Object} velocity {x: current_vX, y: current_vY} */ on_change = cfg.onChange || function(){}, /** * @cfg {Number} frameRate : If requestAnimationFrame is not supported, the fps at which to update */ frame_rate = cfg.frameRate || 60; /******** End Configuration **************/ function calculateVelocity(e){ var time = now(), delta_time = time - last_time, vel_x = velocity.x + ((last_coords.x/delta_time)/(e.pageX ? mouse_ratio : touch_ratio) ), vel_y = velocity.y + ((last_coords.y/delta_time)/(e.pageY ? mouse_ratio : touch_ratio) ); vel_x = !isNaN(vel_x) ? vel_x : 0; vel_y = !isNaN(vel_y) ? vel_y : 0; return {x: vel_x, y: vel_y}; } $(this).on('mousedown touchstart', function(e){ e.preventDefault(); var x = e.pageX || e.originalEvent.touches[0].pageX, y = e.pageY || e.originalEvent.touches[0].pageY; last_coords = {x: 0, y: 0}; start_point = {x: x, y: y}; velocity = {x: 0, y: 0}; on_change(current_coords, velocity); $('body').on('mousemove touchmove', function(e){ e.preventDefault(); var vel = calculateVelocity(e); last_time = now(); var x = e.pageX || e.originalEvent.touches[0].pageX, y = e.pageY || e.originalEvent.touches[0].pageY, delta_x = x - start_point.x, delta_y = y - start_point.y; last_point = start_point; start_point = {x: x, y: y}; last_coords.x = delta_x; last_coords.y = delta_y; current_coords.x += delta_x; current_coords.y += delta_y; on_change(current_coords, vel); }); $('body').on('mouseup touchend', function(e){ velocity = calculateVelocity(e); on_change(current_coords, velocity); inertia_time = null; $('body').off('mousemove touchmove mouseup touchend'); }); }); $(this).on('wheel mousewheel', function(e){ if(velocity.x == 0 && velocity.y == 0) inertia_time = now(); var delta_x = e.originalEvent.deltaX || 0, delta_y = e.originalEvent.deltaY || 0; velocity.x -= delta_x/wheel_ratio; velocity.y -= delta_y/wheel_ratio; }); (function inertia(){ velocity.x = !isNaN(velocity.x) ? velocity.x : 0; velocity.y = !isNaN(velocity.y) ? velocity.y : 0; if(!inertia_time){ inertia_time = now(); } else if(velocity.x != 0 || velocity.y != 0){ var time = now(), force_x = velocity.x * u, force_y = velocity.y * u, acc_x = force_x/mass, acc_y = force_y/mass, delta_time = time - inertia_time, vel_x = velocity.x - (acc_x * delta_time), vel_y = velocity.y - (acc_y * delta_time); vel_x = !isNaN(vel_x) ? vel_x : 0; vel_y = !isNaN(vel_y) ? vel_y : 0; velocity.x = vel_x; velocity.y = vel_y; var delta_x = vel_x * delta_time, delta_y = vel_y * delta_time; last_coords.x = current_coords.x; last_coords.y = current_coords.y; current_coords.x += delta_x; current_coords.y += delta_y; inertia_time = time; on_change(current_coords, velocity); } if(window.requestAnimationFrame){ requestAnimationFrame(inertia); }else{ setTimeout(inertia, 1000/frame_rate); } })(); return this;
}
/************************ Demo *****************************/
$('body').momentus({ u: 3, wheelRatio: 1000, onChange: function(coords, velocity){ $('.square').css({ left: coords.x - 10000, //minus the original starting point top: coords.y - 10000 }); $('.square2').css({ left: coords.x/2 - 5000, //minus the original starting point top: coords.y/2 - 5000 }); $('.display').html( 'X: '+coords.x.toFixed(1)+', Y: '+coords.y.toFixed(1) + '<br/>' + 'vX: '+velocity.x.toFixed(2)+', vY: '+velocity.y.toFixed(2) ) }
});
JQuery.momentus - Script Codes
JQuery.momentus - Script Codes
Home Page Home
Developer Aaron Levine
Username Aldlevine
Uploaded January 30, 2023
Rating 3
Size 5,092 Kb
Views 2,024
Do you need developer help for JQuery.momentus?

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!

Aaron Levine (Aldlevine) Script Codes
Name
Flashy Rating Page
Custom Scroll with Momentum and Parallax
Progress
Popup Modal
CRT TV Page Load Animation
Canvas Falloff Test
Card Mockup
IOS-7 style slide-toggle
Nav-Bar and Tab-Bar Layout
Random Gradients - JS
Create amazing love letters 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!