GOOCODE - Find your code/scripts

4 HTML5 has an important feature: DeviceOrientation, it is the underlying direction and motion sensors were advanced packaging, it allows us to easily achieve interesting features gravity sensor, compass and so on. This article will tell you with examples using HTML5 motion and direction of gravity sensors to achieve the phone a shake effect.

DeviceOrientation has two events:
1, deviceOrientation: encapsulates the incident direction of the sensor data, you can still get the direction of the data on the phone state, such as mobile phones which angle, position, orientation and so on.
2, deviceMotion: encapsulates the event the motion sensor data, you can get the sports movement acceleration phone state and other data.

HTML
There is a div # hand, to place a hand in the picture on the page, div # result is used to display the results of information after shaking.

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

We can use CSS3 to enhance the results page, use the -webkit-animation animation dynamic effects of hand picture details, please download the source code view.

javascript
"Shake" the action that is "within a certain period of time the device a certain distance," so shaking acquired by devicemotion monitoring equipment x, y, z-axis values of the rate of change within a certain time frame, that is to determine whether the device has carried out shaking. In order to prevent the normal movement of miscarriage of justice, the rate of change needs to set an appropriate threshold.
Judgment means shaking HTML5 code we use already packaged shake.js, Project address is: https: //github.com/alexgibson/shake.js.

<script src="shake.js"></script> 

First instantiate Shake, then start listening device movement, movement monitoring equipment, callback listener result: shakeEventDidOccur.

window.onload = function() {
    var myShakeEvent = new Shake({
        threshold: 15
    });

    myShakeEvent.start();

    window.addEventListener('shake', shakeEventDidOccur, false);

    function shakeEventDidOccur () {
		var result = document.getElementById("result");
		result.className = "result";
		var arr = ['Thinkpad Notebook','Iphone6 Plus','Great dinner','Football'];
		var num = Math.floor(Math.random()*4);
		result.innerHTML = "Congratulations, you get "+arr[num]+"!";
		setTimeout(function(){
            result.className = "result result-show";
        }, 1000);
    }
};

Here, the function shake Event Did Occur () can be customized, in this case the result is returned after shaking displayed on the page, see the DEMO demonstration.