Hi,
I need a little help with a page transition that I want to make with help of Jquery.
This is the scenario. The first page a visitor will land on is www.domain.com/index.html. index.html will be faded in and faded out and then it will execute a redirect to www.domain.com/community. I have managed to get the "faded in" part right. But the "faded out" part and the redirection I have not managed to get right at the moment.
HTML code:
Code for custom.js:
The real magic is taking place in custom.js. Right now it fades in and the redirects without a proper fade out which is what I want. This is the original source for this code: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
I need a little help with a page transition that I want to make with help of Jquery.
This is the scenario. The first page a visitor will land on is www.domain.com/index.html. index.html will be faded in and faded out and then it will execute a redirect to www.domain.com/community. I have managed to get the "faded in" part right. But the "faded out" part and the redirection I have not managed to get right at the moment.
HTML code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<title>Welcome!</title>
<style type="text/css">
* {font-family: Arial,Helvetica,Verdana,sans-serif;}
body {background-color: #FFFFFF; cursor: default;margin:0;}
h1 {font-size: 30pt; text-align:center;}
p {font-size: 14pt; text-align:center;}
.header {padding: 30px; margin:0 auto; text-align:center;}
.main {background: #ffffff; padding-top: 5px; margin:0 auto; text-align:center;height:200px;}
.footer {padding-top: 5px; margin:0 auto; text-align:center;height:100%;margin-top:20px;}
.warningband {border: none; background-image: url(styles/default/xenforo/warning_stripes.png); padding: 10px 0; width: 100%; padding: 30px;}
</style>
</head>
<body>
<!--<div class="header">-->
</br></br></br></br></br></br></br></br></br></br></br></br>
<center><p style="width: 830px; line-height: 170%; color: #9F9F9F;">Test test test test</p></center>
</div>
<!--<div class="warningband"></div>-->
<div class="main">
<!--<h1>Sorry !</h1>-->
</br></br>
<center>
<img src="styles/xenforo/logo.jpg" alt="Test">
</center>
</div>
</body>
</html>Code for custom.js:
Code:
$(document).ready(function() {
$("body").css("display", "none");
linkLocation = 'http://www.domain.com/community/';
$("body").fadeIn(2000);
$("body").fadeOut(2000, redirectPage);
function redirectPage() {
window.location = linkLocation;
}
});