Accelerometer Test

Developer
Felquis
Size
2,944 Kb
Views
12,144
  1. Accelerometer Test Previews
  2. Accelerometer Test HTML Codes
  3. Accelerometer Test CSS Codes
  4. Accelerometer Test JS Codes

How do I make an accelerometer test?

JavaScript Accelerometer Test. What is a accelerometer test? How do you make a accelerometer test? This script and codes were developed by Felquis on 08 December 2022, Thursday.

Accelerometer Test Previews
IQ Test

Accelerometer Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accelerometer Test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="lol">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo tellus, laoreet vitae pharetra sit amet, porttitor et dolor. Vestibulum malesuada nunc et rhoncus gravida. Suspendisse eget purus ac metus pharetra imperdiet ut porta nisl. Vivamus et porttitor dolor.</div>
</div>
<div class="debug"> <div class="touch"></div><br/> <div class="deviceorientation"></div>
</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>

Accelerometer Test - Script Codes CSS Codes

body { font-family: Arial; font-size: 13px;
}
.lol { width: 30%; height: 30%; display: block; position: relative; background: rgb(0, 200, 240); overflow: hidden;
}
.container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgb(240, 240, 240); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.debug { position: absolute; top: 0; left: 0; background: silver; padding: 2%;
}

Accelerometer Test - Script Codes JS Codes

alert('How test this\n\n1 - Move your cursor to left and right over the screen \n2 - Turn your smartphone to left and right (to use the Device Orientation)');
var beta, gamma, blur, touchX, $debug = $('.debug'), $lol = $('.lol'), $container = $('.container'), $touch = $('.touch'), $deviceorientation = $('.deviceorientation'), applyBlur = function (gamma) { blur = Math.abs(gamma * 0.1); $container.css({ '-webkit-filter': 'blur(' + blur + 'px)', 'filter': 'blur(' + blur + 'px)' }); }
window.addEventListener("deviceorientation", function(event) { beta = parseFloat((''+event.beta).replace(/([-\d]*).*/, '$1')); gamma = parseFloat((''+event.gamma).replace(/([-\d]*).*/, '$1')); beta = beta * 8; gamma = gamma * 8; $deviceorientation.html('beta: ' + beta + '<br> gamma: ' + gamma); applyBlur(gamma); $lol.attr('style', '-webkit-transform: translate('+gamma+'px, '+beta+'px);'+ '-moz-transform: translate('+gamma+'px, '+beta+'px);'+ '-o-transform: translate('+gamma+'px, '+beta+'px);'+ '-ms-transform: translate('+gamma+'px, '+beta+'px);'+ 'transform: translate('+gamma+'px, '+beta+'px);');
}, true);
// For desktop
$(window).on('mousemove', function (event) { applyBlur((($(window).width() / 2) - event.pageX) * 0.1);
});
/* For touch
$container.on('touchmove', function (event) { touchX = ($(window).width() / 2) - event.originalEvent.touches[0].clientY; $touch.html('Touch X: ' + touchX); applyBlur(touchX);
});
*/
Accelerometer Test - Script Codes
Accelerometer Test - Script Codes
Home Page Home
Developer Felquis
Username felquis
Uploaded December 08, 2022
Rating 3
Size 2,944 Kb
Views 12,144
Do you need developer help for Accelerometer Test?

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!

Felquis (felquis) Script Codes
Name
Suggested input
Ionic Infinite outside ion-content with ion-pane
Exemplo fazendo um prepend com innerHTML
A Pen by Felquis
Sticky Menu with VanillaJS
Vanilla JavaScript Trigger Events
Changing pseudo-element content using JavaScript
Teste prepend com Node API usando DocumentFragment
Swiper simple DEMO
Teste prepend com Node API
Create amazing blog posts 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!