1

I am looking to achieve page transition effects between 2 web domains. One being mcpixel.co.uk/new and the second being mcpaper.co.uk. I own both of the domains. I would like it so that if the link in the header is clicked, the page fade transitions to the new page, so there isn't any white or flicker between pages. Programs primarily programmed in PHP with Javascript/JQuery (Latest as of writing) and CSS.

Mock Up Page transition. Fade frome one page to the other

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
  MCPaper - Your Number #1 Minecraft Newspaper
</title>
<meta name="description" content="A newspaper with news dedicated to Minecraft!">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<script type="text/javascript" src="css/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
$('#ip').click(function() {
        $('.top-network').slideToggle("slow");
});
});
    function toggle()
    {
        $('.top-network').slideToggle("slow");
    }
</script>
 </head>
<?php 
if($_GET['ref']=='network')
{
echo "<body onload='toggle()'>";
echo "<center><div class='top-network' id='top-network'>";
<a href='http://redstonetor.ch/new/?ref=network'><img src='network/rst-networkicon.png' class="networkicons"></a>
<a href='http://mcpixel.co.uk/new/?ref=network'><img src='network/mcpixel-networkicon.png' class="networkicons"></a>
<a href='http://mcpaper.co.uk?ref=network'><img src='network/mcpaper-networkicon.png' class="networkicons"></a>
echo "</div>";
}
else
{
echo "<body>";
echo '<center><div class="top-network" id="top-network" style="display: none;">';
<a href='http://redstonetor.ch/new/?ref=network'><img src='network/rst-networkicon.png' class="networkicons"></a>
<a href='http://mcpixel.co.uk/new/?ref=network'><img src='network/mcpixel-networkicon.png' class="networkicons"></a>
<a href='http://mcpaper.co.uk?ref=network'><img src='network/mcpaper-networkicon.png' class="networkicons"></a>
echo "</div>";
}
?>
  <div class="top">
    <div class="top-container">
      <div class="ip" id="ip">
        <font color='yellow'>Click to see the RedstoneTor.ch Network</font>
      </div>

This is the code I have, I haven't tried anything as I wouldn't know where to start.

Richard Sparrow
  • 101
  • 1
  • 12
  • Can you post some of your code, at least the header part so we can see what are you using? Frames? A header div? Another element? – mehmetseckin Feb 19 '14 at 10:12
  • Code added. I haven't tried anything as I wouldn't know where to start with it. I can do what the answerer has said below, but that is not exactly what I am trying to achieve. – Richard Sparrow Feb 19 '14 at 10:34

2 Answers2

1

You can do it simply with js/jquery: On click event, fade out the page:

$('body').fadeOut('500');

Then redirect to the url you want.

Here is a tutorial: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Mihey Egoroff
  • 1,542
  • 14
  • 23
1

On click hide the current page:

$('body').fadeOut('500');

Redirect to the new page:

window.location.href = "http://stackoverflow.com";

On the new page hide everything:

<body style="display:none;">

And script:

$(document).ready(function() {
  $("body").fadeIn(2000);
});

But you might see a white page after fadeOut. It might be possible to make a better transition using an iframe...

Community
  • 1
  • 1
PiTheNumber
  • 22,828
  • 17
  • 107
  • 180
  • Again, Nice, but not what I am after. Please see animation above, page fades into the other, not out then back in. Thanks – Richard Sparrow Feb 19 '14 at 10:38
  • yes, I just added something regarding this. You could fadeIn an iframe with the new page or load the other page using ajax. You would need some [cross domain magic](http://stackoverflow.com/questions/17874730/how-to-make-cross-domain-request)... – PiTheNumber Feb 19 '14 at 10:42