Плавное появление страниц сайта

Эффект плавного появления страницы хорошо подходит для рекламных сайтов и лэндингов. Сделать его можно с помощью CSS свойств opacity, transition и JS.

В CSS, класс .body_hide изначально скрывает содержимое, класс .body_visible отображает его c плавным эффектом transition opacity.

.body_hide {
	opacity: 0;
	transition: .9s opacity ease-in-out;
}
.body_visible {
	opacity: 1;
}
CSS
К тегу <body> добавляется класс body_hide:
<!DOCTYPE html>
<html lang="ru">
<head>
	...
</head>
<body class="body_hide">
	...
</body>
</html>
HTML

В JS, с задержкой 200мс к <body> добавляется класс body_visible.

jQuery

setTimeout(function(){
	$('body').addClass('body_visible');
}, 200);
JS

Чистый JS

setTimeout(function(){
	document.body.classList.add('body_visible');
}, 200);
JS

В браузерах с отключенным JS будет выводится пустая страница, чтобы этого избежать рекомендуется добавить в <head> страницы блок <noscript>:

<noscript>
	<style>.body_hide{opacity: 1 !important;}</style>
</noscript>
HTML

Реализовать можно на сессиях PHP:

<?php
session_start();
if (isset($_SESSION['show_body'])) {
	$body_class = '';
} else {
	$_SESSION['show_body'] = true;
	$body_class = 'body_hide';
}

?><!DOCTYPE html>
<html lang="ru">
<head>
	...
</head>
<body class="<?php echo $body_class; ?>">
	...
</body>
</html>
HTML

Или Cookies:

<?php
if (isset($_COOKIE['show_body'])) {
	$body_class = '';
} else {
	setcookie('show_body', '1');
	$body_class = 'body_hide';
}

?><!DOCTYPE html>
<html lang="ru">
<head>
	...
</head>
<body class="<?php echo $body_class; ?>">
	...
</body>
</html>
HTML
02.02.2019, обновлено 19.09.2019
9081
Предыдущая запись Модальные окна на Fancybox 2
Следующая запись Диалоговые окна JS

Комментарии

, чтобы добавить комментарий.

Другие публикации

Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
8765
+5
Защита от нелегального зеркала сайта
В последнее время участились случаи появления нелегальных зеркал сайтов, делается это с целью понижения позиций в...
2996
+7
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
30905
+12
Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
24086
+3
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
28985
+10
Как скрыть блок через определенное время
Задача: на сайте выведен элемент, к примеру сообщение, через некоторое время нужно его срыть. Сделать такой прием можно...
12610
0