oXPdEa

index.html

<div id="curtain1"></div>
<div id="curtain2"></div>
<div id="key"></div>

<div id="mask"></div>


<div class="title">Delve Into My...</div>

<div class="wrapper">

		<div class="write s1"><a style="text-decoration:none;color:black"  href="http://www.ramiawar.co">WORKS</a></div>
		<div class="write s2"><a style="text-decoration:none;color:black"  href="#">LIFE</a></div>
		<div class="write s3"><a style="text-decoration:none;color:black"  href="#">PAST</a></div>
		<div class="write s4"><a style="text-decoration:none;color:black"  href="mailto:rami.awar.ra@gmail.com">PRESENCE</a></div>

		<div class="stable s1"></div>
		<div class="stable s2"></div>
		<div class="stable s3"></div>
		<div class="stable s4"></div>

		<div class = "slider A" ></div>
		<div class = "slider B" ></div>
		<div class = "slider C" ></div>
		<div class = "slider D" ></div>

</div>

oXPdEa.markdown

oXPdEa

A Pen by Rami Awar on CodePen.

License.

script.js

//s1 and s3 have same width
//s1 and s2 have same height

//and so on...

//where s1 is the first quadrant, s2 is the second quadrant
//s4 is the third quadrant and s3 is the fourth quadrant
//basic trigonometry. sorry for the mixed s3 and s4 but i already wrote the code

//defining variables so custom dimensions can be given to each division



	var widths1 = $(".s1").css("width");		//only s1 and s2 widths are defined
	var widths2 = $(".s2").css("width");		//same

	var heights1 = $(".s1").css("height");		//only s1 and s3 heights are needed
	var heights3 = $(".s3").css("height");

	var lefts1 = $(".s1").css("left");			//defining position of the top left corner for these are the only needed positions
	var tops1 = $(".s1").css("top");


//setting padding for each text box


	$(".s1").css("padding-top", (parseInt(heights1))/(5/2) + 'px');
	$(".s2").css("padding-top", (parseInt(heights1))/(5/2) + 'px');
	$(".s3").css("padding-top", (parseInt(heights3))/(5/2) + 'px');
	$(".s4").css("padding-top", (parseInt(heights3))/(5/2) + 'px');


//setting width and height of each stable quadrant

	$(".s2").css("height", heights1);
	$(".s3").css("width", widths1);
	$(".s4").css("height", heights3);
	$(".s4").css("width", widths2);

//START OF DOCUMENT.READY()





$(document).ready(function(){		
	/*	$(".A").css("left", "-500px");	//setting custom initial left and top positions for intro animation to take place
		$(".B").css("top", "-500px");	//same
		$(".C").css("left", "1900px");	//same
		$(".D").css("top","1000px");
		$("#mask").hide(10);			// this mask is used to prevent user interaction before intro animation is over

		
	setTimeout(function(){

		$(".A").animate({				//animating A into the screen
          left: lefts1	
         },1500);


		$(".B").animate({				//animating B into the screen
          top: tops1
         },1500);


		$(".C").animate({				//animating C into the screen
			left:lefts1
		},1500);


		$(".D").animate({				//animating D into the screen
			top:tops1
		},1500);


		setTimeout(function(){			//setting a time to hide the mask after intro animation is over
			$("#mask").hide(100);
		},1500);



	},5500);	//this whole thing will be executed after the opening curtains animatin finishes*/

});

//END OF DOCUMENT.READY()




//setting widths of stable classes so only css is changed

	$(".slider").css("width", widths1);
	$(".slider").css("height", heights1);

//setting left and top positions of each stable class for later position and z-index referencing 


	$(".s1").css("left", lefts1);
	$(".s1").css("top", tops1);

	
	$(".s2").css("left", parseInt(lefts1)+parseInt(widths1)+'px');
	$(".s2").css("top", tops1);
	

	$(".s3").css("left", lefts1);
	$(".s3").css("top", parseInt(tops1)+parseInt(heights1)+'px');
	

	$(".s4").css("left", parseInt(lefts1)+parseInt(widths1)+'px');
	$(".s4").css("top", parseInt(tops1)+ parseInt(heights1)+'px');

//setting positions of sliders along with their width and height

	$(".A").css("left", lefts1);
	$(".A").css("top", tops1);
	$(".A").css("height", heights1);
	$(".A").css("width", parseInt(widths1) + parseInt(widths2) + 'px');
	

	$(".B").css("left", parseInt(lefts1)+parseInt(widths1)+'px');
	$(".B").css("top", tops1);
	$(".B").css("height", parseInt(heights1)+ parseInt(heights3) + 'px');
	$(".B").css("width", widths2);
	
	
	$(".C").css("left", lefts1);
	$(".C").css("top", parseInt(tops1)+parseInt(heights1)+'px');
	$(".C").css("height", heights3);
	$(".C").css("width",parseInt(widths1)+parseInt(widths2)+'px');
	

	$(".D").css("left",lefts1);
	$(".D").css("top",tops1);
	$(".D").css("height", parseInt(heights1)+parseInt(heights3)+'px');
	$(".D").css("width", widths1);


//On hover animations 


	//animating sliders for first quadrant


	$(".s1").hover(function(){
	 
	  $(".A").animate({
	    left: (parseInt(widths1) + parseInt(lefts1) + 'px')
	  },{queue:false,duration:750});
	 
	  $(".D").animate({
	  	top: (parseInt(heights1) + parseInt(tops1) + 'px')
	  },{queue:false,duration:750});

	}, 

		function(){

		$(".A").animate({
	    	left: parseInt(lefts1) + 'px'
	  	},{queue:false,duration:750});
	  	
	  	$(".D").animate({
	  		top: parseInt(tops1) + 'px'
	  	},{queue:false,duration:750});

	}); 


	//animating sliders for second quadrant


	$(".s2").hover(function(){
	  
	  $(".A").animate({
	    left: ( - parseInt(widths2) + parseInt(lefts1) + 'px')
	  },{queue:false,duration:750});
	  
	  $(".B").animate({
	  	top: (parseInt(heights1) + parseInt(tops1) + 'px')
	  },{queue:false,duration:750});

	}, 
		function(){
		
		$(".A").animate({
	    	left: parseInt(lefts1) + 'px'
	  	},{queue:false,duration:750});
	  	
	  	$(".B").animate({
	  		top: parseInt(tops1) + 'px'
	  	},{queue:false,duration:750});

	}); 

	

	//animating sliders for fourth quadrant


	$(".s3").hover(function(){
	 
	  $(".D").animate({
	    top: (-parseInt(heights3) + parseInt(tops1) + 'px')
	  },{queue:false,duration:750});
	 
	  $(".C").animate({
	  	left: (parseInt(widths1) + parseInt(lefts1) + 'px')
	  },{queue:false,duration:750});

	}, 

		function(){
		
		$(".D").animate({
	    	top: parseInt(tops1) + 'px'
	  	},{queue:false,duration:750});
	  	
	  	$(".C").animate({
	  		left: parseInt(lefts1) + 'px'
	  	},{queue:false,duration:750});

	}); 


	//animating sliders for third quadrant

	$(".s4").hover(function(){

	  $(".B").animate({
	    top: (-parseInt(heights3) + parseInt(tops1) + 'px')
	  },{queue:false,duration:750});
	  
	  $(".C").animate({
	  	left: (- parseInt(widths2) + parseInt(lefts1) + 'px')
	  },{queue:false,duration:750});

	},
		 function(){

		$(".B").animate({
	    	top: parseInt(tops1) + 'px'
	  	},{queue:false,duration:750});
	  	
	  	$(".C").animate({
	  		left: parseInt(lefts1) + 'px'
	  	},{queue:false,duration:750});

	}); 

scripts

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.title{

	padding-top:100px;
	font-family:Chelsea II;
	font-size:50px;
	text-align:center;
	z-index:10100;

}



#mask{

	z-index:99999999;
	position:absolute;

}

.write{

	font-family:Chelsea;
	font-size:30px;
	z-index:10001;
	position:absolute;
	text-align:center;
	color:black;
	opacity:0;
	text-decoration: none;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;

}

.write:hover{

	opacity:1;
	-moz-transition: all 2s;
	-webkit-transition: all 2s;
}


.stable{
	position:absolute;		/**stable guide classes general properties*/
	z-index:10000;
}




.slider{				/**slider class general properties**/
	width:10px;
	height:12px;
	position:absolute;
}


/* for setting custom widths and heights*/




/***********TUTORIAL*************/

/* To change height of first and second quadrants, which have the same height, only change the height of the first i.e.S1*/

/* To change height of third and fourth quadrants, which have the same height, only change the height of the fourth i.e. S3*/


/* To change the width of the first and fourth quadrants, which have the same width, only change the width of the first i.e.S1 */

/* To change the width of the second and third quadrants, which have the same width, only change the width of the fourth i.e.S3 */

/******END OF TUTORIAL*******/

.s1{						/* first quadrant*/
	width: 200px;	
	height: 200px;
	left:500px;
	top:200px;
}

.s2{						/* second quadrant*/
	width: 200px;
	height:200px;

}

.s3{
	width: 200px;			/* fourth quadrantw*/
	height:200px;
}

.s4{						/* third quadrant */
	width: 200px;	
	height:200px;
}



/* COLORS OF SLIDERS */


.A{										
	z-index:9999;
	background-color:rgba(99, 122, 157, 0.8);
}

.B{
	z-index:9998;
	background-color:rgba(44, 53, 73, 0.8);
}

.C{
	z-index:9997;
	background-color:rgba(163, 206, 206, 0.8);
}

.D{
	z-index:9996;
	background-color:rgba(213, 206, 197, 0.8);
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />