EffectHub.com: your best source for gaming

Recommendation

More Effects...

function fillInfo(data){
	$('#personInfo .image').attr('style','background-image: url('+data.pic_url+')');
	$('#personInfo .name').html(data.displayName);
	$('#personInfo .username').html(data.country_name);
	$('#personInfo .bg').attr('href','/user/'+data.id);
	setTimeout(function(){
		$('#personInfo').addClass('open');
	},1000);
}

var starCanvas = document.createElement('canvas');
//document.getElementById('body').appendChild(starCanvas);
var size = window.innerWidth;
starCanvas.width = size;
starCanvas.height = size;
var context = starCanvas.getContext('2d');
for(var y = 0; y < size; y++){
	for(var x = 0; x < size; x++){
		var grav = 0;

var dx = x - size/2,
		    dy = y - size/2

var dist = Math.floor(Math.sqrt(dx * dx + dy * dy));

grav = (size*10 / (dist * dist)) * 1;
		context.fillStyle = "rgba(255,255,255,"+grav*0.1+")";
		context.fillRect(x,y,1,1);
	}
}

var hoverCanvas = document.createElement('canvas');
var hoverCanvas2 = document.createElement('canvas');
//document.getElementById('body').appendChild(starCanvas);
var size2 = window.innerWidth/2;
hoverCanvas.width = size2;
hoverCanvas.height = size2;
hoverCanvas2.width = size2;
hoverCanvas2.height = size2;
var context2 = hoverCanvas.getContext('2d');
var context3 = hoverCanvas2.getContext('2d');
var curSrc = '';
function drawImg(imgSrc,callback){
	var img = new Image();
	img.crossOrigin = "effecthub.com";
	var error = false;
	img.onload = work;
	img.onerror= function(){
		
		
	}
	function work(){
		context2.clearRect(0,0,size2,size2);
		curSrc = imgSrc;
		context3.drawImage(img, size2*0.47, size2*0.47,size2*0.06,size2*0.06);

context2.drawImage(starCanvas,0,0,size2,size2);

var lightData = context3.getImageData(0, 0, size2, size2).data;
		for(var y = 0; y <= size2; y++){
			for(var x = 0; x <= size2; x++){
				var grav = 0;

var dx = x - size2/2,
				    dy = y - size2/2

var dist = Math.floor(Math.sqrt(dx * dx + dy * dy));

if(dist < size2*0.02){
					l = (y * size2 + x) * 4;
					p = [lightData[l],lightData[l+1],lightData[l+2],lightData[l+3]];
					var b = p[2];
					var g = p[1];
					var r = p[0];

context2.fillStyle = "rgba("+r+","+g+","+b+",255)";
					context2.fillRect(x,y,1,1);
				}

}
		}
		callback(hoverCanvas);
	}
	if(curSrc != imgSrc){
		img.src = imgSrc;
	} else {
		callback(hoverCanvas);
	}
}

var opts = {
	speed: {
		min: 0.001,
		max: 0.001
	},
	speedAverage: 150000, //Ms
	zCamera: 32,
	mobile_zCamera: 15
};

var ww = window.innerWidth,
    wh = window.innerHeight;

var PI = Math.pi;
var followMouse = true;

var renderer = new THREE.WebGLRenderer({
	canvas: document.querySelector("canvas"),
	alpha: true
});
renderer.setSize(ww, wh);
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 2000);
camera.position.set(0, 0, opts.zCamera);
camera.destinationLook = new THREE.Vector3();

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(0.3, 0.3);
mouse.activated = false;
document.querySelector("canvas").addEventListener("mouseup", onMouseUp);
document.querySelector("canvas").addEventListener("touchstart", onMouseUp);
window.addEventListener("mousemove", detectSphereMouse);

var clickables = [],
    hoverables = [];
var clickedItem = null;
var hoveredItem = null;

window.addEventListener("resize", function() {
	ww = window.innerWidth;
	wh = window.innerHeight;
	camera.aspect = ww / wh;
	camera.updateProjectionMatrix();
	renderer.setSize(ww, wh);
});

function onMouseUp(e) {
	if (e.type === "touchstart") {
		mouse.x = (e.touches[0].clientX / ww) * 2 - 1;
		mouse.y = -(e.touches[0].clientY / wh) * 2 + 1;
	} else {
		mouse.x = (e.clientX / ww) * 2 - 1;
		mouse.y = -(e.clientY / wh) * 2 + 1;
	}
	raycaster.setFromCamera(mouse, camera);

function detectSphereMouse(e) {

if (!mouse.activated) {
		mouse.activated = true;
	}
	if(followMouse == true){
		mouse.x = (e.clientX / ww) * 2 - 1;
		mouse.y = -(e.clientY / wh) * 2 + 1;
	}
	var ratio = 0.2;

if (clickedItem) {
		ratio = Math.PI * 0.6;
	}
	TweenMax.to(camera.rotation, 1, {
		ease: Back.easeOut,
		y: -mouse.x * ratio,
		x: mouse.y * ratio
	});

raycaster.setFromCamera(mouse, camera);
	var intersects = raycaster.intersectObjects(hoverables, true);
	var lh = hoveredItem;
	if (hoveredItem) {
		TweenMax.to(hoveredItem.scale, 1.5, {
			ease: Elastic.easeOut.config(1.55, 0.2),
			x: 10,
			y: 10,
			z: 1
		});
	}
	if (intersects.length > 0) {
		document.body.style.cursor = "pointer";
		hoveredItem = intersects[0].object;
		if(hoveredItem.userData.type == 'hoverSphere'){
			hoveredItem = intersects[0].object.parent.children[1];
		}
		if(hoveredItem){
			var data = hoveredItem.userData;
			drawImg(data.pic_url,function(i){
				hoverMap = new THREE.Texture(i);
				hoverMap.needsUpdate = true;
				hoveredItem.material.map = hoverMap;
			});
		}

if(hoveredItem != clickedItem){
			
			var stretch = 1.3;
			TweenMax.to(hoveredItem.scale, stretch, {
				ease: Back.easeOut,
				x: 10 * stretch,
				y: 10 * stretch,
				z: 1 * stretch
			});
		}
	} else {
		if(hoveredItem != undefined){
			hoveredItem.material.map = starMap;
		}
		document.body.style.cursor = "default";
		hoveredItem = null;
	}
};

var hoverMap = new THREE.Texture(hoverCanvas);
hoverMap.needsUpdate = true;
var starMap = new THREE.Texture(starCanvas);
starMap.needsUpdate = true;

var solarSystem = new THREE.Object3D();
solarSystem.position.x = 0; solarSystem.position.y = 0; solarSystem.position.z = 0;
scene.add(solarSystem);

var meMat = new THREE.SpriteMaterial({
	map: starMap,
	transparent: false,
	useScreenCoordinates: false,
	color: 0xffffff // CHANGED
});
var sun = sprite = new THREE.Sprite(meMat);
sun.scale.set( 100, 100, 1 );
sun.position.x = 0; sun.position.y = 0; sun.position.z = 0;
solarSystem.add(sun);

var followersHolder = new THREE.Object3D();
followersHolder.position.x = 0; followersHolder.position.y = 0; followersHolder.position.z = 0;
scene.add(followersHolder);
var follower = function(data){
	var followerHolder = new THREE.Object3D();
	followerHolder.x = 0; followerHolder.y = 0; followerHolder.z = 0;
	var orbit = ((Math.floor(Math.random() * 300) + 100) / 75);

var speed = (Math.random() * opts.speed.max) - opts.speed.max;
	if(speed < 0) { speed -= opts.speed.min; } else { speed += opts.speed.min; }
	followerHolder.userData.speed = speed;

var mat = new THREE.SpriteMaterial({
		map: starMap,
		transparent: false,
		useScreenCoordinates: false,
		opacity: 1
	});

var sprite = new THREE.Sprite(mat);
	sprite.scale.set( 10, 10, 1 );
	sprite.userData.data = data;

sprite.position.x = (orbit + 7) * (0.5 * (3 + 1));
	clickables.push(sprite);

var hoverGeom = new THREE.SphereGeometry( 0.6, 8, 8 );
	var hoverMat = new THREE.MeshBasicMaterial( {color: 0x222222, transparent: true, opacity: 0, wireframe: true, wireframeLinewidth: 1, visible: false} );
	var hoverSphere = new THREE.Mesh( hoverGeom, hoverMat );
	hoverSphere.userData.type = 'hoverSphere';
	hoverSphere.position.x = (orbit + 7) * (0.5 * (3 + 1));

hoverables.push(hoverSphere);

followerHolder.rotation.y = Math.random() * 8;
	followerHolder.rotation.x = Math.random() * 8;
	followerHolder.rotation.z = Math.random() * 8;
	followersHolder.add(followerHolder); 
	followerHolder.add( hoverSphere );
	followerHolder.add(sprite);

stars.push(followerHolder);
}

function updateFollowers(){
	for(var i = 0; i <= stars.length; i++){
		var star = stars[i];
		if(stars[i] != undefined){
			star.children[0].rotation.x += star.userData.speed / 10;

if(star.children[1].cameraMustFollow){
				star.children[1].updateMatrixWorld();
				var vector = new THREE.Vector3();
				vector.setFromMatrixPosition( star.children[1].matrixWorld );

camera.lookAt(vector);
				
				
				
				TweenMax.to(camera.position, 2, {
					x: vector.x,
					y: vector.y-2,
					z: vector.z + 3,
					ease: Power1.easeOut
				});
			} else {
				star.rotation.y += star.userData.speed / 20;
				star.rotation.z += star.userData.speed;
			}
		}
	}
}

var requestframe = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
    // IE Fallback, you can even fallback to onscroll
    function (callback) {
	    window.setTimeout(callback, 1000 / 60);
    };

function render(){
	requestframe(render);

updateFollowers();

renderer.render(scene, camera);
}

function init (){

for(var i = 0; i <= followers.length; i++){
		new follower(followers[i]);
	}
	render();
}

CSS

body {
  background-color: #222;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

canvas {
  position: relative;
  z-index: 0;
}

#instructions {
  padding: 20px;
  width: 300px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #FFF;
  z-index: 5;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 13px;
}
#instructions p {
  padding-top: 20px;
}

#personInfo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
}
#personInfo.open .image {
  transform: scale(1);
  transition: all 500ms;
}
#personInfo.open .bg {
  left: -20px;
  width: 400px;
  transition: all 1000ms;
  box-shadow: 0px 3px 50px 4px rgba(255, 255, 255, 0.6);
}
#personInfo.open .info {
  opacity: 1;
}
#personInfo.open .thanks {
  opacity: 1;
}
#personInfo .thanks {
  transition: all 500ms;
  position: absolute;
  z-index: 5;
  top: -126px;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  white-space: nowrap;
  width: 300px;
  left: -84px;
  font-size: 50px;
  line-height: 50px;
  color: #FFF;
  transition-delay: 1200ms !important;
  text-shadow: 0px -3px 30px rgba(255, 255, 255, 0.6);
  opacity: 0;
}
#personInfo .info {
  z-index: 4;
  position: absolute;
  left: 90px;
  top: -84px;
  height: 168px;
  width: 205px;
  opacity: 0;
  transition-delay: 1200ms !important;
  transition: all 400ms;
  pointer-events: none;
}
#personInfo .name {
  line-height: 38px;
  font-size: 21px;
  font-family: Helvetica;
  font-weight: bold;
}
#personInfo .username {
  line-height: 25px;
  margin-top: 40px;
  font-family: Helvetica, sans-serif;
  color: #999;
}
#personInfo .image {
  position: relative;
  transition: all 0ms;
  transform: scale(0);
  width: 128px;
  height: 128px;
  margin-left: -64px;
  margin-top: -64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  z-index: 4;
}
#personInfo .bg {
  display: block;
  text-decoration: none;
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6);
  transition-delay: 1000ms !important;
  background-color: #666;
  width: 0px;
  height: 168px;
  position: absolute;
  top: -20px;
  margin-top: -64px;
  margin-left: -64px;
  left: 0px;
  z-index: 3;
}

HTML

Recommendation

Join Effecthub.com