Menu
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.
757
You can use the built-in @keyframe at-rule, which controls the steps of an animated sequence by defining the style of each keyframes. To use keyframes, you simply create a @keyframes rule and give it a name. That name is then used as a property to match an animation to its keyframe declaration.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With