JS/jQuery

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

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

1

Верстка и скрипты

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

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

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

jQuery:

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

Чистый JS:

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

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

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

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

Плавное появление только один раз

Реализовать можно на сессиях 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>

Или 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>
02 февраля 2019
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...