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 Previews
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 |
Do you need developer help for Price is Right Wheel - Better Inertia?
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 | Size |
| Pure CSS Rating Scale | 2,706 Kb |
| Custom Scroll with Momentum and Parallax | 8,441 Kb |
| IOS-7 style slide-toggle | 4,131 Kb |
| Touch Hover | 2,764 Kb |
| Mobile App Design | 9,243 Kb |
| Colored Rain | 3,190 Kb |
| Card Mockup | 6,436 Kb |
| Sliding Single Select | 3,968 Kb |
| JQuery.momentus | 5,092 Kb |
| Canvas Falloff Test | 2,989 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Myprofile | SoufianeAbid | 2,451 Kb |
| Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
| Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
| A Pen by Manoz | Manoz | 2,424 Kb |
| Pricing Table | Semenchenko | 6,784 Kb |
| Mobile Nav Menu | AliKlein | 4,745 Kb |
| Contact | GanNichiHa | 2,514 Kb |
| Ghost | Mghayour | 11,738 Kb |
| Virtual vinyl | Davidpanik | 3,474 Kb |
| Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Do you want hide your ip address?
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!