How to use jQuery (or anything else) to make items fade in on page load?

Report · Apr 28, 2017

Is there a quick and easy way to make DIVs (all of them, across the website) fade into view after loading instead of just appearing? Something super-quick that won't slow down the user experience any; to demonstrate that some additional effort was put in. I'm already linking to jQuery, so that's available as a resource.

Whether everything fades in at once, or in the order the browser reads them, doesn't matter to me. The latter is probably prettier to watch unfold (at least compared to your average website rendering itself).

PS: I wrote 'DIVs' but would be just as content if it applied to everything, including images or other items not contained in DIVs. I just want it to affect AT LEAST the DIVs.

EDIT: Will settle for a fade-out / fade-in during page transitions (including the original page load) if that's easier, but I doubt it is.

Report · Apr 28, 2017

See live demo

Alt-Web :: Fading Page Load Demo

Tutorial:

jQuery Fade In Background on Page Load - http://alt-web.com/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 28, 2017

https://forums.adobe.com/people/Nancy+OShea wrote
See live demo
Alt-Web :: Fading Page Load Demo
Tutorial:
jQuery Fade In Background on Page Load - http://alt-web.com/
Nancy

Thanks, but the word 'background' is throwing me off, here... what elements will this affect?

Report · Apr 28, 2017

https://forums.adobe.com/people/Under+S. wrote
what elements will this affect?

Everything! That is everything inside the background container.

Here's another example applied to individual elements. View source to see the code.

Alt-Web Demos :: jQuery Slide and Fade on Page Load

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 28, 2017

If you want something stupidly simple you can use the callback function to fade in one div after another has loaded, example:

<!DOCTYPE html>

<html>

<head>

<title>Fade In Elements</title>

$(document).ready(function() {

$('header, .col-1, .col-2, .col-3').hide();

$('header').fadeIn(2000, function(){

$('.col-1').fadeIn(1000, function(){

$('.col-2').fadeIn(1000, function(){

$('.col-3').fadeIn(1000);

});

</script>

<style>

* {

box-sizing: border-box;

}

header {

background-color: #ededed;

width: 90%;

margin: 0 auto 25px auto;

padding: 20px;

}

.col-wrapper {

display: flex;

width: 93.3%;

margin: 0 auto;

}

.col-wrapper div {

width: 30%;

background-color: #ededed;

margin: 0 1.66%;

padding: 20px;

}

</style>

</head>

<body>

<h1>Header</h1>

</header>

<div class="col-1">Column 1</div>

<div class="col-2">Column 2</div>

<div class="col-3">Column 3</div>

</div>

</body>

</html>

Report · Apr 28, 2017

You might also want to investigate something like this example:

https://codepen.io/annalarson/pen/GesqK