Menu
A some-what simple roll-over fade. Animate doesn’t want to animate, rather it’s just as if it were a CSS hover.
Everythings in PHP as I’m going to be doing some PHP **** with the page later. just don’t use 66’s and 99’s (” and “).
index.php
[code=php]<?php
$page = “<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Strict//EN’ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd’>
<html xmlns=’http://www.w3.org/1999/xhtml’ xml:lang=’en’ lang=’en’>
<head>
<meta http-equiv=’Content-Type’ content=’text/html; charset=ISO-8859-1′ />
<meta name=’Keywords’ content=’Insert Keywords Here’ />
<meta name=’Description’ content=’Description of the webpage.’ />
<title>eLusives VPS</title>
<link href=’style.css’ type=’text/css’ rel=’stylesheet’ />
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’></script>
<script type=’text/javascript’>
$(document).ready(function(){
$(‘p.splash’).fadeIn(‘slow’);
$(‘p.splash a span’).mouseover(function(){
$(this).parents(‘p.splash a’).animate({backgroundPosition:’2px -100px’},500);
});
$(‘a’).mouseout(function(){
$(this).animate({backgroundPosition:’0px 0px’},{queue:false, duration:500})
});
});
</script>
</head>
<body>
<p class=’splash’><img src=’img/px.gif’ class=’splash’ alt=’e3′ /><br />
<a href=’#forum’><span>Forum</span></a><a href=’#contact’ class=’t2′><span>Contact</span></a><a href=’#blog’><span>Blog</span></a></p>
</body>
</html>”;
echo $page;
?>
style.css
[CODE]html {
background-color:#000000;
}
body {
position:fixed;
left:23px;
right:23px;
top:23px;
bottom:23px;
background-color:#2d2d2d;
background-image:url(‘img/innerbg.png’);
border-style:dashed;
border-width:1px;
border-color:#aaaaaa;
font-family:Segoe UI, Veranda, Arial;
}
a {
color:#aaaaaa;
text-decoration:none;
}
p.splash {
margin:auto;
display:block;
width:400px;
height:500px;
text-align:center;
display:none;
}
img.splash {
background-image:url(‘img/e3.png’);
background-position:center;
background-repeat:no-repeat;
width:333px;
height:304px;
}
p.splash a {
display:inline-block;
width:109px;
height:45px;
background-image:url(‘img/buttonbg.png’);
background-repeat:none;
background-position:2px 0px;
margin-left:10px;
}
p.splash a span {
display:inline-block;
width:115px;
height:36px;
padding-top:14px;
background-image:url(‘img/buttontop.png’);
margin-left:-2px;
}
/*
p.splash a:hover {
background-position:-120px 0px;
color:#000000;
}
*/
p.splash a.t2 {
background-position:-120px 0px;
color:#000000;
}
/*
p.splash a.t2:hover {
background-position:0px 0px;
color:#aaaaaa;
}
a.lol {
text-decoration:underline;
background-image:url(‘img/buttonbg.png’);
background-position:0px 200px;
}
*/
p.splash a i {
font-style:none;
}
I’ve copy/pasted exactly what I have.
I’ll provide more info in a minute, I’m being distracted by the phone. have a look, maybe one of you more seasoned guys can see my screw-up?
Additions:
Basically, the end effect should be somewhat similar to ..
[url]http://snook.ca/archives/javascript/jquery-bg-image-animations/
To the fade.
I want to keep that glassy effect, but have the fade go on behind it so I’ve got myself a two-layer background image thing setup. I reckon a lot of you will look at it and facepalm, but this is purely conceptual atm.
When you roll over the SPAN that covers the anchor (the span contains the glassy image, the anchor has the fade-background), the anchors background position shifts upwards by 100px. By calling “Animate”, the effect should be transitional however it’s a straight cut. Experimenting with this idea, I’ve altered the code so that an image (different to what I’ve used, however almost identical code) is moved along it’s X axis. The Animate did it’s job.
So that’s lead me to believe that a Y-axis animation is not possible, however I’ve seen it being done, right before my eyes.
Maybe someone can give me a little enlightenment? Naturally, happy to provide you guys with info so if you need any, just ask.