Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rezzurrection Taxedermy</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
<style type="text/css">
/*<![CDATA[*/
#pages {
position:absolute;
z-Index:200;
left:20px;
top:350px;
height:500px;
}
.page {
position:absolute;
z-Index:200;
left:-1020px;
top:0px;
height:500px;
width:1000px;
background-Color:red;
font-Size:40px;
}
/*]]>*/
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script>
$(document).ready(function() {
$("#menu, #white_line, #logo").css("opacity","0");
$("#menu").stop().animate({
opacity: 0.9,
marginLeft: '50px'
}, 2400, 'easeInSine');
$("#white_line, #logo").stop().animate(
{opacity: 0.7},
{duration:2400,easing: 'easeInSine'
})
$('#menu span').mouseenter(function(element) {
$("#menu ul li").css("opacity","1");
$('#white_line').stop().animate(
{top: 40, height:300},
{duration:500,easing: 'easeOutBack'}
)
$("#menu ul li").eachDelay(function(){
$(this).stop().animate({
opacity: 1,
marginLeft: '0px',
backgroundPosition: "150px 0px"
}, 600, 'easeOutBack');
}, 30);
});
$('#menu').mouseleave(function(element) {
$("#menu ul li").eachDelay(function(index){
$(this).stop().animate({
opacity: 0,
marginLeft: '-200px',
backgroundPosition: "150px 0px"
}, 600, 'linear');
if(index == $("#menu ul li").size() -1){
$('#white_line').stop().animate(
{top: 79, height:1},
{duration:600,easing: 'easeInBack'
})
}
}, 30);
});
$('#menu ul li').mouseenter(function(element) {
$('#menu ul li').not(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '0.5'
}, 500, 'linear');
$(this).stop().animate({
backgroundPosition: "300px 0px",
opacity: '1'
}, 600, 'easeOutBounce');
$(this).find('a').css("color","#916153");
});
$('#menu ul li').mouseleave(function(element) {
$(this).stop().animate({
backgroundPosition: "150px 0px",
opacity: '1'
}, 200, 'linear');
$(this).find('a').css("color","#000");
});
});
</script>
<!--[if lt IE 9]>
<style type="text/css">
#bg {
background-image: none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
</head>
<body >
<div id="pagewrap">
<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;"></div>
<div id="content1">
<div id="filter"></div>
<div id="white_line"></div>
<div id="menu">
<span></span>
<ul>
<li class="item1"><a href="">Gallery</a></li>
<li class="item2"><a href="">Tips & Hints</a></li>
<li class="item3"><a href="">About</a></li>
<li class="item4"><a href="">Contact</a></li>
</ul>
</div>
</div>
<div id="logo"><img src="./Rez_Pics/RezzTax-Black2.png"></div>
</div>
<div id="pages" >
<div class="page" >Page 1</div>
<div class="page" style="background-Color:blue;" >Page 2</div>
<div class="page" style="background-Color:green;" >Page 3</div>
<div class="page" style="background-Color:#FFCC66;" >Page 4</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcSlidePage={
Open:function(id,n){
var o=this['zxc'+id],a;
if (o){
a=o.lst;
a[0][0].style.zIndex='1';
this.animate(o,a[0],a[0][4],a[0][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
this.animate(o,a[1],a[1][4],a[1][2],new Date(),o.ms,'c',Math.PI/(2*o.ms));
a=o.lst=o.ary[n];
a[0][0].style.zIndex='2';
this.animate(o,a[0],a[0][4],a[0][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
this.animate(o,a[1],a[1][4],a[1][3],new Date(),o.ms,'s',Math.PI/(2*o.ms));
}
return false;
},
init:function(o){
var id=o.MenuID,pgs=document.getElementById(o.PagesID),f=o.From,t=o.To,ms=o.Animate,f=typeof(f)=='number'?f:0,t=typeof(t)=='number'?t:0,clds=pgs.childNodes,m=document.getElementById
(id),as=m.getElementsByTagName('A'),a,ary=[],z0=0;
for (;z0<clds.length;z0++){
a=as[ary.length];
if (a&&clds[z0].nodeType==1){
this.addevt(a,'click','Open',id,ary.length);
ary.push([[clds[z0],'left',f,t,f],[clds[z0],'',0,100,0]]);
clds[z0].style.left=f+'px';
}
}
o.ary=ary;
o.ms=typeof(ms)=='number'?ms:1000;
o.lst=o.ary[0];
this['zxc'+id]=o;
},
animate:function(o,a,f,t,srt,mS,s,i){
clearTimeout(a[5]);
var oop=this,ms=new Date()-srt,n=s=='s'?(t-f)*Math.sin(i*ms)+f:s=='c'?t-(t-f)*Math.cos(i*ms):(t-f)/mS*ms+f;
if (isFinite(n)){
a[4]=Math.max(f<0||t<0?n:0,n);
a[1]?a[0].style[a[1]]=a[4]+'px':oop.opc(a[0],a[4]);
}
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,s,i); },10);
}
else {
a[4]=t;
a[1]?a[0].style[a[1]]=t+'px':oop.opc(a[0],t);
t==a[2]?a[0].style.zIndex='0':null;
}
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
}
}
zxcSlidePage.init({
MenuID:'menu',
PagesID:'pages',
From:-1020,
To:20,
Animate:1000
});
/*]]>*/
</script>
</body>
</html>
Sliding content on to the page.
Reply With Quote
Bookmarks