Skip to content Skip to sidebar Skip to footer
Home / Css / Html

HTML 5 Page Transitions

Post a Comment
I want to make a nice, modern-looking transitions between pages. I've found this tutorial: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Solution 1:

index.htm:

<html>
<head>

<style>
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }

#mainframe.normal
{
    opacity: 1.0;
}
#mainframe.faded
{
    opacity: 0.0;
}
#mainframe
{
        /* Firefox */
        -moz-transition-property: opacity;
        -moz-transition-duration: 3s;
        /* WebKit */
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 3s;
        /* Standard */
        transition-property: opacity;
        transition-duration: 3s;
}

</style>

<script language="javascript">
function change()
{
    document.getElementById('mainframe').className="faded";
    setTimeout(function()
    {
        document.getElementById('mainframe').src='page2.htm';
        document.getElementById('mainframe').className="normal";
    }, (2 * 1000));
}
</script>
</head>

<body style="background-color:black;">
<iframe id="mainframe" class="normal" src="page1.htm"></iframe>
</body>

</html>

page1.htm

<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page1

<button onclick="parent.change();">
click me
</button>

</body>
</html>

page2.htm

<html>
<head>
</head>
<body style="background-color: pink;">
Hi, I'm page2
</body>
</html>

Solution 2:

This is based on the correct answer posted above which helped me a lot. Unfortunately, it was not working for me in chrome/linux, it worked well in firefox. I was looking for something slightly different anyway, because I wanted a common header in all pages. So here is my adatped solution.

<html>
<head>

<style>
body,html,iframe { width: 100%; height: 100%; margin: 0; border: 0; }

#mainframe.normal
{
    opacity: 1.0;
}
#mainframe.faded
{
    opacity: 0.0;
}
#mainframe
{
        /* Firefox */
        -moz-transition-property: opacity;
        -moz-transition-duration: 3s;
        /* WebKit */
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 3s;
        /* Standard */
        transition-property: opacity;
        transition-duration: 3s;
}

</style>

<!--<script language="javascript">-->
<script>
function change(page)
{
//  document.write('Hello World');
    document.getElementById('mainframe').className="faded";
    setTimeout(function()
    {
        document.getElementById('mainframe').src=page+'.html';
        document.getElementById('mainframe').className="normal";
    }, (2 * 1000));
}
</script>
</head>

<body style="background-color:black;">
    <header id="header">
        <h2 id="name">
            FRANCISCO</br>
            FRANCHETTI
        </h2>
        <nav id="pages">
            <ul id="list-nav">
                <li class="current"><a onclick="change('home')" href="#">HOME</a></li>
                <li><a onclick="change('research')" href="#">RESEARCH</a></li>
                <li><a onclick="change('teaching')" href="#">TEACHING</a></li>
                <li><a onclick="change('contact')" href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>
    <iframe id="mainframe" class="normal" src="home.html"></iframe>
</body>

</html>

Main Remarks:

  • The pages do not need to have buttons or anything, here the handler is the header which is common to all pages.
  • The href attributes are disabled because we don't want to really navigate, just repopulate the src for the iframe.
  • Now the change() function takes a parameter page that is used to determine which page to load; as said before, instead of passing the destination for the a in the href attribute, we pass it as a function argument for change().

You may like these posts

Post a Comment for "HTML 5 Page Transitions"