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

02.02.2019

16966

Эффект плавного появления страницы хорошо подходит для рекламных сайтов и лэндингов. Сделать его можно с помощью 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

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

Пример

Если отключен JavaScript

В браузерах с отключенным 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