Price is Right Wheel - Better Inertia
How do I make an price is right wheel - better inertia?
This one now uses "real" phyisics. What is a price is right wheel - better inertia? How do you make a price is right wheel - better inertia? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.
Price is Right Wheel - Better Inertia - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Price is Right Wheel - Better Inertia</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>
<h1>Spin Me</h1>
<h2>Updated to use my new jQuery.momentus plugin</h2>
<h2>Drag / Scroll</h2>
<div class="wheels"> <div class="wheel"> <div>- Zero -</div> <div>- One -</div> <div>- Two -</div> <div>- Three -</div> <div>- Four -</div> <div>- Five -</div> <div>- Six -</div> <div>- Seven -</div> <div>- Eight -</div> <div>- Nine -</div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Price is Right Wheel - Better Inertia - Script Codes CSS Codes
.wheels { box-sizing: border-box; position: absolute; left: 50%; top: 50%; display: inline-block; padding: 0; text-align: center; width: 50%; height: 10rem; cursor: -webkit-grab; cursor: grab; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; -moz-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); -ms-transform: translate(-50%, -50%);
}
.wheels .wheel { box-sizing: border-box; position: relative; display: inline-block; padding: 0; margin: 0; height: 100%; width: 100%; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform-origin: 100% 25%; -ms-transform-origin: 100% 25%; -webkit-transform-origin: 100% 25%; transform-origin: 100% 25%;
}
.wheels .wheel > div { box-sizing: border-box; position: absolute; display: inline-block; width: 100%; height: 50%; line-height: 5rem; text-align: center; z-index: 0; background: #C43; border: solid 2px #333; outline: 1px solid transparent; -ms-backface-visibility: hidden;
}
.wheels .wheel > div:nth-of-type(1) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 122px); background: rgba(255, 128, 128, 0.8);
}
.wheels .wheel > div:nth-of-type(2) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 36deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 36deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 36deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 36deg) translate3d(0, 0, 122px); background: rgba(255, 204, 128, 0.8);
}
.wheels .wheel > div:nth-of-type(3) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 72deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 72deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 72deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 72deg) translate3d(0, 0, 122px); background: rgba(230, 255, 128, 0.8);
}
.wheels .wheel > div:nth-of-type(4) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 108deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 108deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 108deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 108deg) translate3d(0, 0, 122px); background: rgba(153, 255, 128, 0.8);
}
.wheels .wheel > div:nth-of-type(5) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 144deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 144deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 144deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 144deg) translate3d(0, 0, 122px); background: rgba(128, 255, 179, 0.8);
}
.wheels .wheel > div:nth-of-type(6) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 122px); background: rgba(128, 255, 255, 0.8);
}
.wheels .wheel > div:nth-of-type(7) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 216deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 216deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 216deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 216deg) translate3d(0, 0, 122px); background: rgba(128, 179, 255, 0.8);
}
.wheels .wheel > div:nth-of-type(8) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 252deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 252deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 252deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 252deg) translate3d(0, 0, 122px); background: rgba(153, 128, 255, 0.8);
}
.wheels .wheel > div:nth-of-type(9) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 288deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 288deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 288deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 288deg) translate3d(0, 0, 122px); background: rgba(230, 128, 255, 0.8);
}
.wheels .wheel > div:nth-of-type(10) { -moz-transform: perspective(500px) rotate3d(1, 0, 0, 324deg) translate3d(0, 0, 122px); -ms-transform: perspective(500px) rotate3d(1, 0, 0, 324deg) translate3d(0, 0, 122px); -webkit-transform: perspective(500px) rotate3d(1, 0, 0, 324deg) translate3d(0, 0, 122px); transform: perspective(500px) rotate3d(1, 0, 0, 324deg) translate3d(0, 0, 122px); background: rgba(255, 128, 204, 0.8);
}
@-moz-keyframes spin { 0% { -moz-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } 100% { -moz-transform: rotate3d(1, 0, 0, -360deg); transform: rotate3d(1, 0, 0, -360deg); }
}
@-webkit-keyframes spin { 0% { -webkit-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } 100% { -webkit-transform: rotate3d(1, 0, 0, -360deg); transform: rotate3d(1, 0, 0, -360deg); }
}
@keyframes spin { 0% { -moz-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); -webkit-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } 100% { -moz-transform: rotate3d(1, 0, 0, -360deg); -ms-transform: rotate3d(1, 0, 0, -360deg); -webkit-transform: rotate3d(1, 0, 0, -360deg); transform: rotate3d(1, 0, 0, -360deg); }
}
h1, h2 { text-align: center;
}
h2 { margin-bottom: 0;
}
html, body { display: inline-block; width: 100%; height: 100%; padding: 0; margin: 0; background: #666; color: #fff; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
Price is Right Wheel - Better Inertia - 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 = 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;
}
$('.wheel').momentus({ u: 1, mass: 1000, wheelRatio: -1000, mouseRatio: 6, onChange: function(coords, velocity){ console.log('update'); $('.wheel > div').each(function(i){ var angle = -(coords.y/2) + (360/10)*i; $(this).css('transform', 'perspective(500px) rotate3d(1,0,0,'+angle+'deg) translate3d(0,0,122px)'); }); }
});
/*
(function(){ var startY, // px curRot = 0, // deg vel = 0, // deg/ms lastRot, // deg lastTime, // ms lastY, // px mass = 1000, // virtual u = 1, // virtual iStartTime = Date.now(); $('.wheel').on('mousedown touchstart', function(e){ vel = 0; e.preventDefault(); startY = e.pageY/2 || e.originalEvent.touches[0].pageY/2; $('body').on('mousemove touchmove', function(e){ e.preventDefault(); var newY = e.pageY/2 || e.originalEvent.touches[0].pageY/2, difRot = (newY - startY); // deg curRot -= difRot; lastY = startY; startY = newY; lastRot = difRot; lastTime = Date.now(); //Each side has to be transformed individually due to IE's BS $('.wheel > div').each(function(i){ var angle = curRot + (360/10)*i; console.log(i, angle); $(this).css('transform', 'perspective(500px) rotate3d(1,0,0,'+angle+'deg) translate3d(0,0,122px)'); }); }); $('body').on('mouseup touchend', function(){ var newTime = Date.now(), difTime = newTime - lastTime; vel -= (lastRot / difTime)/(e.pageY ? 6 : 1); iStartTime = null; $('body').off('mousemove touchmove mouseup touchend'); }); }); (function inertia(){ if(iStartTime == null){ //Prevents it from doing a double rotation in a given frame iStartTime = Date.now(); } else if(vel != 0){ var force = vel * u, acc = force/mass, newTime = Date.now(), time = newTime - iStartTime; iStartTime = newTime; vel -= acc * time; var rotDif = (vel * time); curRot += rotDif; $('.wheel > div').each(function(i){ var angle = curRot + (360/10)*i; $(this).css('transform', 'perspective(500px) rotate3d(1,0,0,'+angle+'deg) translate3d(0,0,122px)'); }); } requestAnimationFrame(inertia); })(); $(document).on('touchmove', function(e){ e.preventDefault(); });
})();*/
Developer | Aaron Levine |
Username | Aldlevine |
Uploaded | January 30, 2023 |
Rating | 4.5 |
Size | 5,730 Kb |
Views | 2,024 |
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!
Name | Size |
Flashy Rating Page | 4,375 Kb |
Card Mockup | 6,436 Kb |
IOS-7 style slide-toggle | 4,131 Kb |
Nav-Bar and Tab-Bar Layout | 3,936 Kb |
Pure CSS Rating Scale | 2,706 Kb |
Colorful Slider Graph | 5,199 Kb |
JQuery.momentus | 5,092 Kb |
CRT TV Page Load Animation | 2,498 Kb |
A Pen by Aaron Levine | 4,042 Kb |
Canvas Falloff Test | 2,989 Kb |
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!
Name | Username | Size |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!