There are many sites with the prescribed appearance of elements when scrolling. This is already such a de facto standard for landing pages. But how to organize the appearance of elements without scrolling, but when the page loads?

We have three blocks, for example:

<div id="block1">1</div> <div id="block1">2</div> <div id="block1">3</div>

And it is necessary that when the page is fully loaded, they appear, fly out to the left or simply be transparent and acquire opacity: 1.

How to implement it?

https://jsfiddle.net/ypj3qwqe/

    1 answer 1

     $(function() { $('.block').each(function(index, el) { setTimeout(function() { if ($('#load:visible').length > 0) { $('#load:visible').hide(); } $(el).css('display', 'inline-block'); }, 2000 + 500 * index); }); }); 
     .block { background-color: red; display: none; padding: 2em; margin: 2em; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="load">Загрузка...</div> <div id="block1" class="block">1</div> <div id="block1" class="block">2</div> <div id="block1" class="block">3</div>

    • sumptuously! One question is how to assign multiple CSS properties? Or class? - malginovdesign