Как сделать splash-заставку с прокруткой на CSS3 и jQuery

Splash-заставка – отличный способ привлечь внимание посетителя сайта. Однако создать хороший splash непросто. Заставка легко может стать раздражающим фактором для посетителей.

Хорошая заставка должна работать быстро и легко закрываться пользователем. Она должна быть визуально привлекательной, хорошо заметной и стимулирующей пользователя выбрать нужную ссылку, чтобы узнать подробности:


Такие заставки хорошо работают в среде одностраничных прокручивающихся сайтов или сайтов баннерного стиля, которые стали популярны вместе с «плоским» интерфейсом. Таким же образом можно оформить фоновое видео, которое тоже весьма популярно в последнее время.

Сегодня я хочу показать вам метод достижения такого эффекта, который вы легко сможете доработать под свои нужды.

Если вы хотите посмотреть, чего именно мы добьёмся, обратите внимание на демонстрационный сайт. Файлы, используемые этой демонстрацией, можно загрузить здесь.

Содержание

Разметка

Мы постараемся оставить разметку очень простой, чтобы наш пример можно было легко встроить в любой имеющийся сайт.

Разметка состоит из двух блоков <div>, один – класса splash, а другой – wrapper. Блок wrapper может уже существовать, если вы хотите встроить нашу заставку в готовый дизайн, так что вы можете изменить имя этого класса.

Вот и всё, что нам нужно с точки зрения семантики. Но для примера нам понадобится «рыба»: произвольный контент и заголовки, чтобы вы смогли понять, как пример будет выглядеть вживую.

Ещё нам понадобится манипулятор в виде стрелки, который мы поместим в наш splash, чтобы пользователь мог прокрутить его вниз. Прокрутка вниз и будет являться методом, который уберёт заставку и покажет пользователю основной контент сайта.

Так что содержимое нашего тега <body> будет таковым:

<div class="splash fade-in">
  <h1 class="splash-title fade-in">SPLASH SCREEN TITLE</h1>
  <a href="#" class="splash-arrow fade-in"><img src="img/down-arrow.png" alt="" /></a>
</div> <!-- END .splash -->
<div class="wrapper">
  <header class="cf">
    <h1><a href="#">Page Title</a></h1>
    <nav>
   <ul>
       <li><a href="#" class="active">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Work</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    </nav>
  </header>
  <section id="main-content">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, velit sapiente facere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias at nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, error, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Error, soluta autem consequatur mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem</p>
    <br />
    <hr />
  </section>
  <footer>
    <p>&copy; 2013 - Splash Screen</p>
  </footer>
</div> <!-- END .wrapper -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

Рассмотрим нашу разметку подробнее. В начале расположен блок splash. Он имеет заголовок и манипулятор прокрутки (в нашем случае – стрелку, но вы можете поставить туда любую картинку или пиктограмму, лишь бы её назначение оставалось очевидным). Далее расположен блок wrapper.

В нём расположен пользовательский контент, который может быть каким угодно, но в нашем случае лучше оставить его максимально простым: заголовок, навигация, основной текст и подвал. Для скриптовой функциональности мы включим в страницу сначала jQuery с Google CDN, а потом и наш собственный скрипт.

Обратите внимание также на класс fade-in в блоке splash. При помощи этого класса мы добавим в наш пример CSS3-анимационные эффекты, чтобы он выглядел более профессионально. И раз уж мы заговорили о CSS

Стили

Снова постараемся сделать всё просто и функционально. В нашем примере используется чистый CSS. Прежде всего, определим класс fade-in, чтобы не пролистывать файл каждый раз, когда мы захотим поправить временные параметры в анимации:

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.3s;
    -moz-animation-duration:0.3s;
    animation-duration:0.3s;

    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

Вначале мы задаём ключевые кадры и задаём растворение от значения прозрачности (opacity) 0 до 1. Потом мы устанавливаем прозрачность нужного класса в 0. Потом мы прокручиваем нашу анимацию с задержкой 0,5 секунды и длительностью 0,35 секунд.

Теперь познакомимся с атрибутами, применяемыми к содержимому нашей заставки:

.splash {
     background: url('../img/splash-bg.jpg') center center;
     background-size: cover;
     background-attachment: fixed;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     min-height: 360px;
     z-index: 999;
     text-align: center;
 }

В центр блока мы помещаем фоновое изображение (в нашем примере это чёрно-белая фотография улицы) так, чтобы оно покрывало наш экран полностью, независимо от размера, и фиксируем его, чтобы оно не перемещалось при прокрутке. Далее мы задаём блоку фиксированные координаты так, чтобы он перекрывал весь экран.

Минимальная высота блока (min-height) служит для того, чтобы мы могли применить абсолютное позиционирование к элементам внутри блока. При помощи атрибута z-index мы убедимся, что наша заставка действительно перекрывает весь контент сайта, который также абсолютно позиционирован.

Вот и всё, что требуется от стилей для того, чтобы наша splash-заставка появилась в нужном месте, заполняя экран без изменения положения остальных элементов сайта. Теперь мы пробежимся по оставшемуся содержимому нашего файла стилей.

Оно управляет положением заголовка и стрелки-манипулятора, а также задает основное форматирование и содержит медиа-запросы:

html, body {
    width: 100%;
    height: 100%;
}

body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }
    .wrapper {
      max-width: 1000px;
      width: 90%;
      margin: 0 auto; 
}

.splash-title {
    color: white;
    font-size: 3em;
    margin-top: 100px;
    text-shadow: 0 2px 10px #000;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

a.splash-arrow {
    color: white;
    font-size: 1.2em;
    position: absolute;
    bottom: 55px;
    left: 50%;
    margin-left: -25px;
    padding: 10px;
    width: 50px;
    height: 50px;
    font-weight: bold;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
    border: 3px solid white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

a.splash-arrow:hover {
    text-decoration: none;
    bottom: 50px;
}

@media all and (max-width: 690px) {
    header h1 { width: 100%; text-align: center; }
    header nav { float: none; display: inline-block; margin: 0 auto; }
      .splash-title {font-size: 2em;}
}

@media all and (max-width: 480px) {
    .splash-title {font-size: 1.5em;}
}

Так мы отформатируем основной текст, зададим отступ для заголовка, а также задержим его анимированное появление ещё на полсекунды для большей драматичности. Позиция стрелки – абсолютная, внизу и по центру. Её появление также задерживается на 0,5 секунды.

Добавим CSS3-эффекты переходов, чтобы оживить элементы при наведении курсора. Наконец, добавим медиа-запрос, чтобы наш пример лучше выглядел на маленьких экранах. Разумеется, эти стили можно и нужно изменять в соответствии с вашим вкусом и общим дизайном вашего уже существующего сайта.

jQuery

Как мы уже сказали ранее, мы поместим файл main.js в директорию js нашего сайта. В этом файле мы напишем код, который будет убирать нашу заставку при пролистывании сайта или при нажатии на манипулятор. Вот этот код:

$(document).ready(function() {
    if($(".splash").is(":visible")) {
        $(".wrapper").css({"opacity":"0"});
    }

    $(".splash-arrow").click(function() {
        $(".splash").slideUp("800", function() {
            $(".wrapper").delay(100).animate({"opacity":"1.0"},800);
        });
    });
});

$(window).scroll(function() {
    $(window).off("scroll");
    $(".splash").slideUp("800", function() {
        $("html, body").animate({"scrollTop":"0px"},100);
        $(".wrapper").delay(100).animate({"opacity":"1.0"},800);
    });
});

Вначале мы поместим нашу основную процедуру в функцию $(window).ready(), чтобы работа скрипта была возможна только при полностью прогруженной странице.

Вначале мы убедимся, что наша splash-заставка видна. Если это так, мы сделаем блок wrapper невидимым, чтобы контент не появился на экране раньше заставки, а также чтобы анимировать появление самой заставки.

Затем мы добавим функцию, вызываемую кликом по стрелке. Эта функция заставляет заставку отодвинуться и исчезнуть, а затем анимировано возвращает непрозрачность основному контенту.

Почти такой же код мы поместим в обработчик $(window).scroll(), чтобы при прокрутке заставка отодвигалась, и пользователь видел основной контент, начиная с верхней части страницы.

Мы добавим здесь запрет прокрутки – (window).off(“scroll”), чтобы пользователь не оказывался в середине страницы после того, как наша заставка исчезнет. Но после исчезновения splash-заставки прокрутка должна работать, как обычно.

Заключение

Наше решение получилось достаточно простым и лёгким, но от этого не менее элегантным и эффектным: заставка плавно возникает при заходе на наш сайт и так же плавно уступает место основному контенту по желанию пользователя. Вы можете применить получившийся код на своём сайте.

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

Данная публикация представляет собой перевод статьи «How to create a scrollable splash screen with CSS3 and jQuery» , подготовленной дружной командой проекта Интернет-технологии.ру