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

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

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

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

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

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

Разметка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редакция Перевод статьи « How to create a scrollable splash screen with CSS3 and jQuery »