krhoyt/spinning-color-wheel.html

## spinning-color-wheel.html
<html>
<head>

<title>Spinning Color</title>

<!-- Styles -->
<style type="text/css">
@-webkit-keyframes spin {
    from {
        transform: rotate( 0deg );
    }

    to {
        transform: rotate( 360deg );
    }
}

.cover {
    background-color: white;
    border-radius: 80px;
    box-shadow: 0px 0px 5px 5px rgba( 0, 0, 0, 0.30 );
    height: 60px;
    margin-left: 10px;
    margin-top: 10px;
    width: 60px;
}

.finger {
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: spin;
    -webkit-animation-timing-function: linear;
    background-image: url( 'color.wheel.png' );
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 80px;
    position: absolute;
    visibility: hidden;
    width: 80px;
}
</style>

<!-- Application -->
<script type="text/javascript">
// Constants
var FINGER_RADIUS = 40;

// Global
var finger = null;

// Called when the mouse is down on the document
// Positions and displays touch interaction indicator
function doDocumentDown( event )
{
    // No dragging the page please
    event.preventDefault();

    // Position and display interaction indicator
    finger = document.querySelector( ".finger" );
    finger.style.left = ( event.clientX - FINGER_RADIUS ) + "px";
    finger.style.top = ( event.clientY - FINGER_RADIUS ) + "px";
    finger.style.visibility = "visible";

    // Movement event listeners
    document.addEventListener( "mousemove", doDocumentMove );
    document.addEventListener( "mouseup", doDocumentUp );
}

// Called while the mouse is down and moving on the document
// Repositions interaction indicator to follow mouse
function doDocumentMove( event )
{
    // No dragging the page please
    event.preventDefault();

    // Position the indicator
    finger = document.querySelector( ".finger" );
    finger.style.left = ( event.clientX - FINGER_RADIUS ) + "px";
    finger.style.top = ( event.clientY - FINGER_RADIUS ) + "px";
}

// Called when the mouse is released from the document
function doDocumentUp()
{
    // Remove event listeners
    document.removeEventListener( "mousemove", doDocumentMove );
    document.removeEventListener( "mouseup", doDocumentUp );

    // Hide indicator
    finger.style.visibility = "hidden";
    finger = null;
}

// Called to initialize application
// Adds event listener for mouse down on document
function doWindowLoad()
{
    // Event listener
    document.addEventListener( "mousedown", doDocumentDown );
}

// Initialize application
window.addEventListener( "load", doWindowLoad );
</script>

</head>
<body>

<!-- Touch animation -->
<!-- Reused throughout -->
<div class="finger">
    <div class="cover"></div>
</div>

</body>
</html>
	<html>
	<head>

	<title>Spinning Color</title>

	<!-- Styles -->
	<style type="text/css">
	@-webkit-keyframes spin {
	from {
	transform: rotate( 0deg );
	}

	to {
	transform: rotate( 360deg );
	}
	}

	.cover {
	background-color: white;
	border-radius: 80px;
	box-shadow: 0px 0px 5px 5px rgba( 0, 0, 0, 0.30 );
	height: 60px;
	margin-left: 10px;
	margin-top: 10px;
	width: 60px;
	}

	.finger {
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: spin;
	-webkit-animation-timing-function: linear;
	background-image: url( 'color.wheel.png' );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 80px;
	position: absolute;
	visibility: hidden;
	width: 80px;
	}
	</style>

	<!-- Application -->
	<script type="text/javascript">
	// Constants
	var FINGER_RADIUS = 40;

	// Global
	var finger = null;

	// Called when the mouse is down on the document
	// Positions and displays touch interaction indicator
	function doDocumentDown( event )
	{
	// No dragging the page please
	event.preventDefault();

	// Position and display interaction indicator
	finger = document.querySelector( ".finger" );
	finger.style.left = ( event.clientX - FINGER_RADIUS ) + "px";
	finger.style.top = ( event.clientY - FINGER_RADIUS ) + "px";
	finger.style.visibility = "visible";

	// Movement event listeners
	document.addEventListener( "mousemove", doDocumentMove );
	document.addEventListener( "mouseup", doDocumentUp );
	}

	// Called while the mouse is down and moving on the document
	// Repositions interaction indicator to follow mouse
	function doDocumentMove( event )
	{
	// No dragging the page please
	event.preventDefault();

	// Position the indicator
	finger = document.querySelector( ".finger" );
	finger.style.left = ( event.clientX - FINGER_RADIUS ) + "px";
	finger.style.top = ( event.clientY - FINGER_RADIUS ) + "px";
	}

	// Called when the mouse is released from the document
	function doDocumentUp()
	{
	// Remove event listeners
	document.removeEventListener( "mousemove", doDocumentMove );
	document.removeEventListener( "mouseup", doDocumentUp );

	// Hide indicator
	finger.style.visibility = "hidden";
	finger = null;
	}

	// Called to initialize application
	// Adds event listener for mouse down on document
	function doWindowLoad()
	{
	// Event listener
	document.addEventListener( "mousedown", doDocumentDown );
	}

	// Initialize application
	window.addEventListener( "load", doWindowLoad );
	</script>

	</head>
	<body>

	<!-- Touch animation -->
	<!-- Reused throughout -->
	<div class="finger">
	<div class="cover"></div>
	</div>

	</body>
	</html>