Home/ Questions/Q 6026885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:30:37+00:00

I want to make a nice, modern-looking transitions between pages. I’ve found this tutorial:

  • 0

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/

The author uses JQuery to make it work, but I want to do it in pure HTML5. Is there a feature in HTML5 to do it, say, in CSS?

UPDATE

In the end of 2014, I’d like to add the following comment. Before doing it think twice, wouldn’t it be better to make a single-page AJAX web-app with CSS3 transitions between DIVs. The question describes a very special situation which is extremely rare. In the rest 99% cases a single page app is the best solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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