I would like to know if it is possible to make fadings between two HTML-Documents. I have a few HTML-Pages but let's make an example with two of them.
index.html, jobs.html
On both I have a menu with <a> buttons. What I want to do is:
I click on <a href="jobs.html" id="jobs">Jobs</a> and index.html (which I am currently on) fades out and jobs.html fades in. Something like fading between divs but with a whole HTML document.
Any helps is much appreciated.
I would like to know if it is possible to make fadings between two HTML-Documents. I have a few HTML-Pages but let's make an example with two of them.
index.html, jobs.html
On both I have a menu with <a> buttons. What I want to do is:
I click on <a href="jobs.html" id="jobs">Jobs</a> and index.html (which I am currently on) fades out and jobs.html fades in. Something like fading between divs but with a whole HTML document.
Any helps is much appreciated.
Share Improve this question asked Aug 2, 2013 at 14:18 supersizesupersize 14.9k19 gold badges85 silver badges144 bronze badges 6- 1 are you loading this jobs.html by ajax? – Brad Commented Aug 2, 2013 at 14:20
- nope! I'm making a page-switch! – supersize Commented Aug 2, 2013 at 14:20
- 2 This looks cool – musefan Commented Aug 2, 2013 at 14:21
- @supersize fade the content in on document ready and fade it out when the user leaves the page. If you want for a specific page then filter the url or add classes do body, etc – Spokey Commented Aug 2, 2013 at 14:22
- @musefan can't use css3! but thanks, I will remember this :) – supersize Commented Aug 2, 2013 at 14:23
4 Answers
Reset to default 4- Hide the body using css.
- Fade in the body
- Click a button and grab its ID
- Fade out the body
- Navigate to the new url
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: none;
}
.myBtn{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function(){
$('body').fadeIn();
$('.myBtn').click(function(){
url = $(this).attr('id') + '.html';
$('body').fadeOut(function(){
window.location = url;
});
});
});
</script>
</head>
<body>
<h1>index.html</h1>
<div class="myBtn" id="index">index</div>
<div class="myBtn" id="jobs">jobs</div>
</body>
</html>
http://jsfiddle/Dp4Hy/
PS. obviously the fiddle won't work, as you're trying to navigate to a new page, but you can still see the fade in at the beginning, and fade out when you click a button. Just need this script included for all pages to use.
Bottom line, this is not possible without some kind of pre-loading and interaction with a server side ponent
I would personally remend PJAX. http://pjax.heroku./ It allows you not only catch an event and load a document based on the event, it updates the browser state, url, title, the back button works, etc.
example sites that use it to acplish similiar behavior http://bleacherreport./articles/1716958-the-top-10-fantasy-qbs-for-2013 http://reciperehab./blog/post/the-6-best-salads-for-spring
*disclaimer, I did the second one...
Create your anchor tag and set a javascript onclick event. Call your fadeOut() function (which i've pasted below) You'll want it to fade out when you click, and when the next page loads, you'll want it to fade in:
jsfiddle: http://jsfiddle/HmGap/3/
HTML:
<script type="text/javascript">
window.onload=function(){fadeIn('body')};
</script>
<div id="body">
Content <br /><br />
<a onClick="fadeOut('body')" style="cursor:pointer">Click Me to Fade Out</a>
</div>
Javascript:
//fadeEffects
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
// opacity ranges from 0 to 1
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',100);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',100);
window.location.href = "link.html";
}
Yes, it's possible, you can append the html in DIV (like you know), or you can use iframes, to manager the fade of the iframe tag