Как сделать плавное появление страницы?

Question

[Space]

Хочется, чтобы при загрузке страницы - все элементы плавно появлялись или страница как бы всплывала. Как это реализуется, подскажите?

Answer 1

[HoHsi]

1) Заводите массив (или html атрибут) с url до изображений. В таком случае браузер не будет их загружать.
2) Создаем невидимый элемент img который будет служить прелоадером.
3) Биндим на него JQ метод .load
4) При прокрутки страницы до определенного изображения, передаем url картинки прилоадеру.
5) Как только он отвечает нам, ставим этот url в src или background-image.

Можно создать несколько прелоадеров, или генерировать их при необходимости, а потом удалять.

---------------

Если же нужно что-бы загрузилась вся страница, то можно сделать div:

.loader {
  postition: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background: red;

  z-index: 99999;
}

Дальше вешаем обработчик на окно

$(window).ready ->
  $('.loader').remove()

В этом случае, сайт появится только после того, как все элементы загружены и нарисованы

Comments

[Space]

А по первой части пример?

[HoHsi]

Cosmos: ешьте, что дают

Answer 2

[Григорий]

Как вариант ...
body{display:none;}

$(document).ready(function(){
    $('body').toggle(1000);
});

https://jsfiddle.net/grigruss/x4ur1kcm/

Comments

[Space]

по какой-то причине сайт уплывает в обратную сторону и исчезает. Если же пропишу display:none - то вообще ничего не будет. Белый лист.

[Space]

В общем повесил на div и заработало, предварительно скрыв его. Спасибо.

[Григорий]

Cosmos: display:none; именно скрывает содержимое. А jQuery код, который я написал, отображает содержимое, с эффектом плавного появления. Чтобы все работало, должна быть подключена jQuery.
Страница должна грузиться уже с display:none; прописанным в CSS. jQuery код должен находиться внутри тега head страницы. Тогда всё работает.

[Григорий]

Cosmos: не за что

Answer 3

[Павел Гоголинский]

Есть плагин (он платный).
ilyabirman.ru/projects/emerge