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><scriptlanguage="javascript">functionchange()
{
    document.getElementById('mainframe').className="faded";
    setTimeout(function()
    {
        document.getElementById('mainframe').src='page2.htm';
        document.getElementById('mainframe').className="normal";
    }, (2 * 1000));
}
</script></head><bodystyle="background-color:black;"><iframeid="mainframe"class="normal"src="page1.htm"></iframe></body></html>

page1.htm

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

<buttononclick="parent.change();">
click me
</button></body></html>

page2.htm

<html><head></head><bodystyle="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>functionchange(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><bodystyle="background-color:black;"><headerid="header"><h2id="name">
            FRANCISCO</br>
            FRANCHETTI
        </h2><navid="pages"><ulid="list-nav"><liclass="current"><aonclick="change('home')"href="#">HOME</a></li><li><aonclick="change('research')"href="#">RESEARCH</a></li><li><aonclick="change('teaching')"href="#">TEACHING</a></li><li><aonclick="change('contact')"href="#">CONTACT</a></li></ul></nav></header><iframeid="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().

Post a Comment for "Html 5 Page Transitions"