HTML 5 page transitions
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 t开发者_JAVA百科wice, 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.
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>
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
hrefattributes are disabled because we don't want to really navigate, just repopulate thesrcfor theiframe. - Now the
change()function takes a parameterpagethat is used to determine which page to load; as said before, instead of passing the destination for theain thehrefattribute, we pass it as a function argument forchange().
加载中,请稍侯......
精彩评论