Здравствуйте!
Хочу сделать, чтобы на главной странице основной контент плавно появлялся, для этого я использую такую конструкцию перед </body>:
$('section').css({'opacity':'0'});
$(function() {
$('section').css({'transition':'1.5s','opacity':'1'});
});
Минус в том, что такая конструкция начинает работать после загрузки, т.е. частично элементы основного контента уже показаны на экране, остальное догружается, потом начинает работу скрипт. При вторичной загрузке страницы, все работает быстро, т.к. элементы в кэше.
Есть вариант: прописать в CSS opacity:0, а потом через JS после загрузки уже делать opacity:1. Но тут вопрос: а как быть, если у юзера отключен JS? Получается, прозрачность так и останется прозрачной, без вариантов.
На сайте
www.artlebedev.ru реализовано то, что я хочу: обратите внимание на появление контента при загрузке главной страницы. Вот как у них там сделано без учета document.ready: понять не могу. Причем, если отключить JS, то контент статичен и просто стоит на месте.
Как это работает? В каком направлении реализовывать идею?