03-70-Magic8Ball/magic8Ball-shake.html
<!doctype html>
<title>Magic 8 Ball - Version 1</title>

<!-- = = = = = = = = =  C S S  = = = = = = = = = -->
<style>
    #eightBall {
        position:relative;
        width:300px;
        height:300px;
        /* The image used */
        background-image: url("assets/8ball1.png");
        /* Center and scale the image nicely */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    #results {
        position:absolute;
        left:100px;
        top:100px;
        color:white;
        width:100px;
        border-radius:20px;
        background-color:darkblue;
        text-align:center;
        padding-top:10px;
        padding-bottom:10px;
    }

/*    
    #eightBall:hover {
        animation: shake 0.5s;
        animation-iteration-count:infinite;
    }
*/

    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
    }

</style>

<!-- = = = = = = = = =  H T M L  = = = = = = = = = -->
<div id="header">Magic 8 Ball</div>

<div id="eightBall">
    <div id="results">This is where our random message goes</div>
</div>


<!-- = = = = = = = = =  J A V A S C R I P T  = = = = = = = = = -->
<script>

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
/* G L O B A L   V A R I A B L E S
/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

var eightBall = document.getElementById("eightBall");
eightBall.onmouseenter = eightBallMouseEnter;
eightBall.onmouseleave = eightBallMouseLeave;

var results = document.getElementById("results");

eightBallMouseLeave();

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */
/* F U N C T I O N S
/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

function eightBallMouseEnter() 
{
    console.log("Mouse Enter!");   
    eightBall.style.animation = "";
    eightBall.style.animationIterationCount = "";
    eightBall.style.backgroundImage = "url('assets/8ball2.png')";
    results.style.visibility = "visible";
}

function eightBallMouseLeave() 
{
    console.log("Mouse Leave!");   
    eightBall.style.animation = "shake 0.5s";
    eightBall.style.animationIterationCount = "infinite";
    eightBall.style.backgroundImage = "url('assets/8ball1.png')";
    results.style.visibility = "hidden";
}


</script>