DIR : /home/kozerus/public_html/jkwii/js/jsdoit/fragment/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/fragment

$(function(){
	
	var flickr = {};
    
	var twitter = [];
	
	var radius = 1100;
	
	var photoNum = 12;
	
	var prevID = 0;
	var currentID = 0;
	
	var currentDeg = 0;
	
	var display_list = [];
	
	var split_list = [];
	
	var mouse = {x:0, y:0};
	var btn_pos = {x:0, y:0};
	
	var isReadyToClick = true;
	
	var text_list = [
		"画面が切り替わる際の演出を魅力的につくってください。サンプルコードでは3つの画面をフェードイン・フェードアウトで切り替えています。こちらを元にして演出を加えても良いですし、もちろんJavaScript, HTML, CSSをゼロからコードを書き直してもOKです。複数の画面をクリックなどで切り替えるものであれば、自由に作成していただいて構いません。画面遷移であればスライドを切り替えるような演出であったり、スマートフォンのトランジションでも良いので、あなたの得意分野でチャレンジしてください。下記のお手本コードをFork（＝あなたなりのアレンジ）すると自動的にエントリーとなります。自由な発想をお待ちしています！"
	];
	
	init();
	
	function init(){
		getFlickr();
	}
	
	function getFlickr(){
        
        $('#loading').text("loading Flickr...");
        
		$.ajax({
			type : 'GET',
			url : 'http://www.flickr.com/services/rest/',
			data : {
				format : 'json',
				method : 'flickr.photos.search',
				api_key : '0eeac8aac4b3c6039e7ce69b914fcfe8',
				sort : 'date-posted-desc',
				tags : 'square',	// instagr.am tag
				per_page : photoNum
			},
			dataType : 'jsonp',
			jsonp : 'jsoncallback',
			success : function(data){
				var dataStat = data.stat;
				if(dataStat == 'ok'){
					flickr = data;
					//getTwitter();
                    createWorld();
				}else{
					return false;
				}
			}
		});
	}
	
	function getTwitter(){
        
        $('#loading').text("loading Twitter...");
		
		var user_list = [
			"word_bot",			//言の葉：http://twitter.com/word_bot
			"together_meigen",	//ツイッター名言bot：http://twitter.com/together_meigen
			"meigenbot"			//名言bot：http://twitter.com/meigenbot/
		];
		
		var n = Math.floor(Math.random() * user_list.length);
		
		var user_name = user_list[n];
		
		$.getJSON('http://twitter.com/statuses/user_timeline/' + user_name + '.json?callback=?', 
			function (json, status) {
				if(status == "success"){
					console.log(json);
					twitter = json;
					twitter.shuffle();
					createWorld();
				}
				else{
                    console.log("fail");
					return false;
				}
			}
		);
	}
	
	function createWorld(){
		
		//
		//	photos
		//
		
		var degree;
		
		var img0_src;
		
		var $ul = $("<ul/>").attr("id","photos");
		
		for(var i = 0; i < photoNum; i++){
			
			var $li = $("<li/>");
			var $img;
			var $p;
			
			if(i === 0){
				$p = $("<p/>").text(text_list[i]);
				$img = $("<div/>").append($p).addClass("top_text");
			}
			/*else if(i % 2 === 0){
				
				$p = $("<p/>").html("<span>@" + twitter[i].user.screen_name + "</span>" + twitter[i].text)
								.css({"background-image":"url(" + twitter[i].user.profile_image_url + ")"});
				$img = $("<div/>").append($p).addClass("twitter_text");
			}*/
			else{
				var img_obj = getImage(i);
				$img = $("<img/>").attr({src:img_obj.src, width:465, height:465, alt:img_obj.title});
			}
			
			display_list.push($img);
			
			$li.append($img);
			$ul.append($li);
			
			degree = 360 / photoNum * i - 90;
			
			var xx = radius * Math.cos(Math.PI/180 * degree);
			var yy = 0;
			var zz = radius * Math.sin(Math.PI/180 * degree);
			var rx = 0;
			var ry = -degree - 90;
			
			xx = Math.floor(xx);
			zz = Math.floor(zz);
			
			$li.css({transform:"translateX("+xx+"px) translateY("+yy+"px) translateZ("+zz+"px) rotateX("+rx+"deg) rotateY("+ry+"deg)"});
			
		}
		
		$("#world_photos").append($ul);
		
		//
		//	split
		//
		
		var $ul_split = $("<ul/>").attr("id","split");
		
		for(i = 0; i < 225; i++){
			var $li_split = $("<li/>");
			
			$img_split = display_list[0].clone();
			
			$li_split.append($img_split);
			$ul_split.append($li_split);
			
			var img_x = -(i % 15) * 31;
			var img_y = -(Math.floor(i / 15) % 15) * 31;
			$img_split.css({top:img_y + "px", left:img_x + "px"});
			
			split_list.push(i);
		}
		
		$("#world_split").append($ul_split);
		
		//
		//	world_man
		//
		
		for(i = 0; i < 3; i++){
			var $man_img = $("<img/>").attr({src:'http://jsrun.it/assets/7/R/G/s/7RGsl.gif', width:32, height:56});
			$("#world_man").append($man_img);
		}
		
		//
		//	pager
		//
		
		for(i = 0; i < photoNum; i++){
			var px = -(photoNum * 16 / 2) + 16 * i;
			var $li_page = $("<li/>").css("left", px + "px");
			var $a_page = $("<a/>").attr("href","#"+i).text(i);
			$li_page.append($a_page);
			$("#pager").append($li_page);
		}
		
		//
		//	add event
		//
		
		$('body').bind('click', onClick);
		$('body').bind('mousemove', onMouseMove);
		
		//
		//	fix
		//
		
		var ua = window.navigator.userAgent.toLowerCase();
		
		if (ua.indexOf("chrome") > -1) {
			console.log("chrome");
		}
		else if (ua.indexOf("safari") > -1) {
			$("#world_man").css({transform: "translateZ(-10px)"});
			$("#pager").css({transform: "translateY(-10px) translateZ(10px)"});
		}
		
		//
		//	init
		//
		
		$("#world_photos li:eq(0)").css({opacity:0});
        $("#butterfly").css({opacity:1});
        $("#wrap").css({"background-image":"url( http://jsrun.it/assets/e/6/T/D/e6TDx.jpg)"});
       $("#loading").remove();
		
		changePager();
		animate();
	}
	
	function createMan(){
		var $ul = $("<ul/>").addClass('man');
		
		for(var i = 0; i < 3; i++){
			var $li = $("<li/>");
			var $img = $("<img/>").attr({src:'images/flower' + n + '.png', width:64, height:112});
		}
	}
	
	//
	//	onClick
	//
	
	function onClick(e){
	
		if(!isReadyToClick){
			return false;
		}
		
		currentDeg += 360 / photoNum;
		
		prevID = currentID;
		
		currentID++;
		if(currentID >= photoNum){ currentID = 0; }
		
		transition();
	}
	
	//
	//	onMouseMove
	//
	
	function onMouseMove(e){
		mouse.x = e.clientX;
		mouse.y = e.clientY;
		//console.log(mouse.x, mouse.y);
	}
	
	//
	//	changePager
	//
	
	function changePager(){
		$("#pager li").css("opacity", 0.2);
		$("#pager li:eq(" + currentID + ")").css("opacity", 1.0);
	}
	
	//
	//	transition
	//
	
	function transition(){
		transition_zoomOut();
	}
	
	function transition_zoomOut(){
		
		var num = split_list.length;
		
		split_list.shuffle();
		
		$("#world_photos li:eq(" + prevID + ")").css({"-webkit-transition":"opacity 1.0s ease-in-out 0.5s", opacity:1});
		
		for(var i = 0; i < num; i++){
			var $li = $("#world_split li:eq(" + split_list[i] + ")");
			var delay = i/300;
			$li.css({"-webkit-transition":"-webkit-transform 1.0s ease-in-out " + delay + "s, opacity 1.0s ease-in-out " + delay + "s", "-webkit-transform":"translateZ(-" + radius + "px) rotateX(0) rotateY(0)", opacity:1});
			if(i == num - 1){
				$li.bind("webkitTransitionEnd",function(){
					$li.unbind("webkitTransitionEnd");
					
					$("#world_split").css({opacity:0});
					
					//var img_obj = getImage(currentID);
					//$("#world_split img").attr({src:img_obj.src, alt:img_obj.title});
					
					//分割イメージ更新
					
					$("#world_split li").empty();
					
					for(j = 0; j < 225; j++){
						
						var img_x = -(j % 15) * 31;
						var img_y = -(Math.floor(j / 15) % 15) * 31;
						$img_split = display_list[currentID].clone();
						$img_split.css({top:img_y + "px", left:img_x + "px"});
						
						$("#world_split li:eq(" + j + ")").append($img_split);
						
					}
					
					transition_rotate();
					changePager();
				});
			}
		}
		
		$("#btn").fadeOut(500);
		isReadyToClick = false;
	}
	
	function transition_rotate(){
		$("#world_photos").css({"-webkit-transition":"-webkit-transform 1.0s ease-in-out", "-webkit-transform":"rotateY(" + currentDeg + "deg)"});
		$("#world_photos").bind("webkitTransitionEnd",function(){
			$("#world_photos").unbind("webkitTransitionEnd");
			transition_zoomIn();
		});
	}
	
	function transition_zoomIn(){
		
		$("#world_split").css({opacity:1});
		$("#world_photos li:eq(" + currentID + ")").css({"-webkit-transition":"opacity 1.0s ease-in-out", opacity:0});
		
		var num = split_list.length;
		
		split_list.shuffle();
		
		for(var i = 0; i < num; i++){
			var $li = $("#world_split li:eq(" + split_list[i] + ")");
			var delay = i/300;
			var rx = Math.floor( Math.random() * 5 - 2.5 ) * 360;
			var ry = Math.floor( Math.random() * 5 - 2.5 ) * 360;
			$li.css({"-webkit-transition":"-webkit-transform 1.0s ease-in-out " + delay + "s, opacity 0.75s ease-in-out " + delay + "s", "-webkit-transform":"translateZ(0) rotateX(" + rx + "deg) rotateY(" + ry + "deg)", opacity:1});
			if(i == num - 1){
				$li.bind("webkitTransitionEnd",function(){
					
				});
			}
		}
		
		$("#btn").delay(1000).fadeIn(500, function(){
			isReadyToClick = true;
		});
		
	}
	
	//
	//	getDisplayObject
	//
	
	function getDisplayObject(){
		
	}
	
	//
	//	getImage
	//
	
	function getImage(n){
		var item = flickr.photos.photo[n];
		
		var itemFarm = item.farm;
		var itemServer = item.server;
		var itemID = item.id;
		var itemSecret = item.secret;
		var itemTitle = item.title;
		
		var img_src = "http://farm" + itemFarm + ".static.flickr.com/" + itemServer + "/" + itemID + "_" + itemSecret + ".jpg";
		
		return {src:img_src, title:itemTitle};
	}
	
	//
	//	animate
	//
	
	function animate() {
		
		//stalker
		var vx = mouse.x - 19;
		var vy = mouse.y - 8;
		btn_pos.x += (vx - btn_pos.x) * 0.1;
		btn_pos.y += (vy - btn_pos.y) * 0.1;
		btn_pos.x = Math.round(btn_pos.x);
		btn_pos.y = Math.round(btn_pos.y);
		$("#btn").css({top:btn_pos.y + "px", left:btn_pos.x + "px"});
		
		//hittest
		var distX = Math.abs(vx - btn_pos.x);
		var distY = Math.abs(vy - btn_pos.y);
		if(distX < 20 && distY < 8){
			$("#btn a").css({opacity:1.0});
		}
		else{
			$("#btn a").css({opacity:0.2});
		}
				
		//setTimeout(onTimer, 10);
		requestAnimationFrame( animate );
		
	}
	
	//
	//	shuffle
	//
	
	Array.prototype.shuffle = function() {
		var i = this.length;
		while(i){
			var j = Math.floor(Math.random()*i);
			var t = this[--i];
			this[i] = this[j];
			this[j] = t;
		}
		return this;
	};
	
});