ハイマットフルバースト

README

- chrome,safari用
- マウス移動で適当にロックオン
- バーストはまだない

jsdoit.css

/*** display, position ***/
body {		overflow: hidden;}
#template{	display: none;}
.pointer{	position: absolute;}
.r0 {		position: absolute;}
.q0 {		position: absolute;}
.q1 { 		bottom:0px; left:0px;}
.q2 { 		bottom:0px; right:0px;}
.q3 { 		top:0px; left:0px;}
.q4 { 		top:0px; right:0px;}
.m0 {		position: absolute;}

/*** metrics ***/
.pointer{	border-width: 2px; width:0px; height:0px;}
.r0 {		width: 400px; height: 4px; border-width: 0 800px 0 0;}
.q0 {		width: 400px; height: 400px;}
.q1 {		border-width: 4px 4px 0 0;}
.q2 {		border-width: 4px 0 0 4px;}
.q3 {		border-width: 0 4px 4px 0;}
.q4 {		border-width: 0 0 4px 4px;}
.m0 {		width: 50px; height: 50px; margin: -25px 0 0 -25px;}

/*** color, style ***/
body {		background-color: #333;}
.pointer {	border-style: solid; border-color: #FFF;}
.r0 {		border-style: solid; border-color: #AF4;}
.q0 {		border-style: solid; border-color: #5F4;}
.my {		color: #DD0; font-size: 30px;
			opacity: 0.0;}
.mr {		color: #F00; font-size: 30px;}

/*** transform ***/
.pointer {	border-radius: 4px;}
._lockon>.r0 {
			width:0px; height:0;}
.r0 {		-webkit-transform-origin: top left;
			-webkit-transition-duration: 0.7s;
			-webkit-transition-property: width;
			-webkit-transition-timing-function: linear;
			-webkit-animation-duration: 0.7s;
			-webkit-animation-timing-function: linear;}
.r120 {		-webkit-animation-name: r120_r;}
.r240 {		-webkit-animation-name: r240_r;}
.r360 {		-webkit-animation-name: r360_r;}
@-webkit-keyframes r120_r {
	from {	height: 4px; -webkit-transform: rotate(45deg);}
	to {	height: 1px; -webkit-transform: rotate(165deg);}
}
@-webkit-keyframes r240_r {
	from {	height: 4px; -webkit-transform: rotate(165deg);}
	to {	height: 1px; -webkit-transform: rotate(285deg);}
}
@-webkit-keyframes r360_r {
	from {	height: 4px; -webkit-transform: rotate(285deg);}
	to {	height: 1px; -webkit-transform: rotate(405deg);}
}

.q1 {		border-radius: 0 400px 0 0;}
.q2 {		border-radius: 400px 0 0 0;}
.q3 {		border-radius: 0 0 400px 0;}
.q4 {		border-radius: 0 0 0 400px;}
._lockon>.q0 {
			border-width:0; width:0; height:0;}
.q0 {		-webkit-transition-duration: 0.7s;
			-webkit-transition-property: border-width, width, height;
			-webkit-transition-timing-function: linear;}

.my {		-webkit-animation-name: my;
			-webkit-animation-duration: 1.0s;}
@-webkit-keyframes my {
	0% {	opacity: 0.0;}
	59% {	opacity: 0.0;}
	60% {	opacity: 1.0;}
	90% {	opacity: 1.0;}
}
.mr {		-webkit-animation-name: mr;
			-webkit-animation-duration: 1.0s;}
@-webkit-keyframes mr {
	0% {	opacity: 0.0;}
	99% {	opacity: 0.0;}
	100% {	opacity: 1.0;}
}

jsdoit.html

<div id="template">
	<div id="pointer_template">
		<div class="pointer">
			<div class="r0 r120"></div>
			<div class="r0 r240"></div>
			<div class="r0 r360"></div>
			<div class="q0 q1"></div>
			<div class="q0 q2"></div>
			<div class="q0 q3"></div>
			<div class="q0 q4"></div>
			<div class="m0 my">[　]</div>
			<div class="m0 mr">[　]</div>
		</div>
	</div>
</div>

jsdoit.js

var doc= window.document;
	
function lockon(x,y){
	var clone=doc.getElementById("pointer_template").firstElementChild.cloneNode(true);
	setTimeout(function(){
		clone.className = "pointer _lockon";
	},0);
	clone.style.left = x +"px";
	clone.style.top = y +"px";
	doc.body.appendChild(clone);
}
	
var x=null,y=null;
function ev_update_current_pos(e){
	x = e.pageX;
	y = e.pageY;
}
	
var resolution = 40;
var last_lockon_x =null, last_lockon_y=null;
function lockon_current_pos(){
	if (x !== null && y !== null && 
		resolution <= Math.max(
			Math.abs(x - last_lockon_x),
			Math.abs(y - last_lockon_y)) ){
		lockon(x,y);
		last_lockon_x=x;
		last_lockon_y=y;
	}
}
	
doc.addEventListener('mousemove',ev_update_current_pos);
setInterval(function(){
	lockon_current_pos();
},200);