Переходы страницы HTML 5

Я хочу сделать приятные, современные взгляды на переходы между страницами. Я нашел этот учебник: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Автор использует JQuery, чтобы заставить его работать, но я хочу сделать это в чистом HTML5. Есть ли функция HTML5 для этого, скажем, в CSS?

UPDATE

В конце 2014 года я хотел бы добавить следующий комментарий. Прежде чем делать это, подумайте дважды, не лучше ли сделать одностраничное веб-приложение AJAX с переходами CSS3 между DIV. Вопрос описывает очень особенную ситуацию, которая крайне редка. В остальных 99% случаях лучшим решением является одностраничное приложение.

Ответы

Ответ 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>

Ответ 2

Это основано на правильном ответе, опубликованном выше, что очень помогло мне. К сожалению, он не работал у меня в chrome/linux, он отлично работал в firefox. В любом случае, я искал что-то немного другое, потому что мне нужен общий заголовок на всех страницах. Итак, вот мое решение adatped.

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

Основные замечания:

  • На страницах не нужно иметь кнопки или что-то еще, здесь обработчик это заголовок, который является общим для всех страниц.
  • Атрибуты href отключены, потому что мы не хотим действительно перемещаться, просто запомните src для iframe.
  • Теперь функция change() принимает параметр page, который используется для определения загружаемой страницы; как говорилось ранее, вместо этого передачи адресата для a в атрибуте href, мы передайте его как аргумент функции для change().