HTML 5 page transitions

后端未结

关注

 2  688

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-transitio

相关标签:

2条回答

迷失自我

2021-02-05 22:51

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>

0 讨论(0)

没有蜡笔的小新

2021-02-05 22:59

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().

0 讨论(0)