How to Make Slick Page Transitions

Read The Full Tutorial.

Here you can know how to add the final touches of sites, To begin, let’s dive straight into the CSS. We’ll need to change the CSS for the and set it to display: none.

body { display: none; }

Therefore, a better solution will be adding the display:none CSS property using jQuery. If visitors have JavaScript disabled, they will still be able to see the body content.

<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
});</script>

here we need to write the jQuery code that creates the fade transition:

<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
});
</script>

Now, if we fire up our browser we can see the new transition in action! But if we click on any of the links, our site disappears like normal.

First, let’s apply a special class on the links we wish to create a fade out effect.

<a href="otherPage.html" class="transition">LINK</a>

Now, if we go back to our HTML, we can modify our script to get some great looking jQuery fades.

<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");

$("body").fadeIn(2000);

$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}
});
</script>

These page fades will look much better if you set a specified background color for the html tag similar to the color of your site’s background color in your CSS. This means when the body fades in and out, there is still a color similar to the existing background you have.

html {
/*If you had a black or close to black background*/
background-color: #000000;
}