スマホで画像をランダムに移動させる。 使用例） ImageAnimation().initialize("honyy_bee", "/js/test/bee.png", $(window).width(), $(window).height()); ※HTMLのID、移動させる画像（上向きに指向性があるもの）、移動範囲の幅、移動範囲の高さ

gistfile1.js

(function () {
  var offsetX = 0;
	var offsetY = 0;
	var offsetScroolY = 0;
	
	var currentDeg = 0;
	var currentX = 0;
	var currentY = 0;
	var dX = 0;
	var dY = 0;
	var startLen = 5;
	
	var currentLen = startLen;
	var currentDirection = 1;
	var currentRotate = 0;
	
	var dest = null;
	
	var isTapEvent = false;
	
	var timerChangeDest = 0;
	
	var timerId = 0;
	
	var ImageAnimation = window.ImageAnimation = function (ele) {
		return new ImageAnimation.fn.init(ele);
	};

	ImageAnimation.fn = {
		 init : function (ele) {
			this.prop = ele;
		}

		, initialize : function (id, image, width, height) {
			if ($("#" + id).length == 0) {
				var target = $('<p id="' + id + '"><img src="' + image + '" /></p>').appendTo("body");
				
				target.css({
					display: "none",
					position: "absolute",
					top: 0,
					left: 0,
					"z-index": 10000,
					width: 40,
					height: 30,
					"padding-top": 10,
					"text-align": "center",
				});
				
			} else {
				var target = $("#" + id);
			}
			if ($("#" + id + "_dest").length == 0) {
				dest = $('<p id="' + id + '_dest"></p>').appendTo("body");
				
				dest.css({
					position: "absolute",
					top: 0,
					left: 0,
					"z-index": 10000,
					width: 5,
					height: 5
				});
			} else {
				dest = $("#" + id + "_dest");
			}
			
			target.css("top", Math.round(height / 2) + "px");
			target.css("left", Math.round(width / 2) + "px");
			target.show();

			setTimeout(function() {
				ImageAnimation().start(target);
			}, 3000);
			
			//$(window).bind("mousemove", function(event) {
			$(window).bind("touchstart", function(event) {
				isTapEvent = true;
				destX = event.pageX - offsetX;
				destY = event.pageY - offsetY;
			});
			
			$(window).bind("scroll", function() {
				offsetScroolY = $(document).scrollTop();
			});
		}
		
		, start : function (target) {
			timerId = setInterval(function() {ImageAnimation().move(target);}, 50);
			
			offsetX = target.offset().left;
			offsetY = target.offset().top;
			
			timerChangeDest = setTimeout(ImageAnimation().changeDest, 1000);
		}
		, move : function (target) {
			var destX = dest.offset().left - offsetX;
			var destY = dest.offset().top - offsetY;
			
			var distance = Math.sqrt(Math.pow((destY - currentY), 2) + Math.pow((destX - currentX), 2));
			if (distance < 15) {
				nextX = currentX + (Math.floor(Math.random() * 10) - 5);
				nextY = currentY + (Math.floor(Math.random() * 10) - 5);
				
			} else {
				if (destX == currentX) {
					var rotate = 0;
				} else if (destX < currentX) {
					var rotate = Math.atan((destY - currentY) / (destX - currentX));
					var nextX = currentX - currentLen * Math.cos(rotate);
					var nextY = currentY - currentLen * Math.sin(rotate);
				} else {
					var rotate = Math.atan((destY - currentY) / (destX - currentX));
					var nextX = currentX + currentLen * Math.cos(rotate);
					var nextY = currentY + currentLen * Math.sin(rotate);
				}

				dX = nextX - currentX;
				dY = nextY - currentY;
				if (dX != 0) {
					currentRotate = Math.atan(dY / dX);
					if (dX < 0) {
						currentRotate -= (Math.PI / 2);
					} else {
						currentRotate += (Math.PI / 2);
					}
				} else {
					currentRotate = Math.PI / 2;
				}
			}
		
			ImageAnimation().setTransition(target, "transition-duration", "50ms");
			ImageAnimation().setTransition(target, "transform", "translate3d(" + nextX + "px, " + nextY + "px, 0px) rotate(" + currentRotate + "rad)");
			ImageAnimation().setTransition(target, "transition-timing-function", "linear");
			
			currentX = nextX;
			currentY = nextY;
		}
		
		, stop : function () {
			clearInterval(timerId);
			timerId = 0;
			
			var nextX = currentX + 1 * dX;
			var nextY = currentY + 1 * dY;
			
			ImageAnimation().setTransition(target, "transition-duration", "300ms");
			ImageAnimation().setTransition(target, "transform", "translate3d(" + nextX + "px, " + nextY + "px, 0px) rotate(" + currentRotate + "rad)");
		}
		
		, setTransition : function (target, property, value) {
			target.css("-webkit-" + property, value);
			target.css("-moz-" + property, value);
			target.css("-o-" + property, value);
			target.css("" + property, value);
		}
		
		, changeDest : function () {
			clearTimeout(timerChangeDest);
			
			if (isTapEvent) {
				timerChangeDest = setTimeout(ImageAnimation().changeDest, 10000);
			} else {
				var destX = $(window).width() * Math.random();
				var destY = $(window).height() * Math.random() + offsetScroolY;
				ImageAnimation().setTransition(dest, "transition-duration", "2s");
				ImageAnimation().setTransition(dest, "transform", "translate3d(" + destX + "px, " + destY + "px, 0px)");
				ImageAnimation().setTransition(dest, "transition-timing-function", "linear");
				
				timerChangeDest = setTimeout(ImageAnimation().changeDest, 1000);
			}
			isTapEvent = false;
		}
	};
	ImageAnimation.fn.init.prototype = ImageAnimation.fn;
}
)();