Как сделать прокручиваемую сплэш заставку с помощью CSS3 и jQuery

Как сделать прокручиваемую сплэш заставку с помощью CSS3 и jQuery

От автора: Отличный способ привлечь внимание посетителя своего веб-сайта – это «сплэш-заставка». Однако сделать его удачно – очень непростая задача по одной простой причине: сплэш -заставки легко раздражают пользователей.

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

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

Если хотите увидеть то, что мы строим, то вот демопример. А здесь можно скачать все исходные файлы.

Разметка

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

В общем, нам нужно создать два div’а. Один с классом splash и второй с классом wrapper. (Класс wrapper может уже существовать, если вы применяете этот метод к существующему веб-сайту, поэтому вам, возможно, придется изменить имя этого класса).

Собственно, вот и все, что нужно для семантики. Но, естественно, мы добавим некий фиктивный контент и заголовки для того, чтобы в демопримере можно было на что-то посмотреть. Нам также понадобится добавить на экран-заставку стрелку-указатель, которая покажет пользователю, что его можно прокрутить (так как это и есть способ убрать начальный экран и показать основное содержимое). Так что вот вам простая разметка, вся она находится внутри тэга body:

Итак, давайте объясню немного детальнее, что здесь происходит: мы начинаем с div’а splash. Внутри него находится заголовок и индикатор прокрутки (который здесь показан в виде изображения стрелочки, но, естественно, может оказаться чем угодно). Затем мы закрываем этот div и открываем другой, с классом wrapper. Внутри него находится исходное содержимое сайта, которое для каждого случая будет разным, а у нас здесь оно очень простое: заголовок, некоторая навигация, область основного контента и нижний колонтитул. Затем добавляется jQuery из Google API, так как мы будем использовать его функциональность, и, наконец, делается ссылка на другой файл .js – свой собственный – где мы напишем код jQuery.

Вы, может быть, заметили в области экрана-заставки имя класса fade-in. Мы применим этот класс для того, чтобы добавить к некоторым элементам красивую анимацию CSS3 и сделать начальный экран более мощным. Естественно, если посмотреть на результаты сейчас, то в действительности там пока ничего нет, нам еще требуется назначить стили. Кстати о стилях, давайте-ка перейдем к CSS…

Стили

Давайте постараемся сделать стили простыми и удобными. Все они – простой CSS. Начнем с имени класса .fade-in. (Его нужно заявить вверху нашего файла CSS для того, чтобы далее можно было объявить разное время задержки анимации остальных элементов.)

Сначала заявляем keyframes и вызываем анимацию fadeIn. Непрозрачность варьируется от 0 до 1. Затем напрямую выбираем имя класса, определяем его непрозрачность равной 0 и вызываем к только что определенной нами анимации, назначая ей длительность в 0,3сек. и задержку в 0,5сек.

Теперь рассмотрим CSS, необходимый для экрана-заставки:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Итак, у нас здесь имеется несколько основных стилей body, некоторый отступ заголовка от верха, где мы задерживаем усиление анимации еще на полсекунды. Поэтому у нее есть свое собственное появление. Ссылка-стрелка позиционирована абсолютно для того, чтобы всегда находиться посредине и внизу экрана. Ее задержка окончательного появления на экране – еще полсекунды. Добавляем несколько переходов CSS3 для того, чтобы анимировать ее расположение при состоянии проведения мышью :hover. Наконец, немного меняем медиазапросы, чтобы на маленьких экранах она смотрелась еще лучше. Но, конечно, эти стили будут меняться в зависимости от вашего дизайна.

jQuery

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

Сначала обертываем несколько первых утверждений в функцию document ready для того, чтобы действие выполнялось только при полной загрузке страницы. Поэтому для начала проверяем, виден ли наш экран-заставка. Если да, то делаем упаковщик невидимым (так у нас пропадет мелькание содержимого при загрузке фонового изображения, а также это нужно для окончательной анимации проявления при переходе на страницу). Затем добавляем к обработчику щелчка стрелки функцию. Теперь, если пользователь щелкнет по ней, экран-заставка сдвинется вверх (и таким образом исчезнет), а затем снова анимируем непрозрачность упаковщика до 1.

Этот небольшой блок кода (почти) такой же, как тот, который мы применим сразу после функции $(window).scroll. При прокрутке пользователем заставка сдвигается вверх и одновременно анимируется обратно к верху страницы (с тем, чтобы пользователь не начинал с середины страницы), а непрозрачность элемента-упаковщика анимируется. Кроме того, добавляем строку $(window).off(“scroll”);, которая не дает окну действительно прокручиваться тогда, когда нам это не требуется. При первой прокрутке пользователя нам нужно всего лишь вызвать анимацию, а не прокрутить страницу на самом деле. Но как только уберется заставка, страница станет прокручиваться нормально.

Заключение

Итак, перед вами – очень простое (легковесное), но элегантное решение начального экрана, добавленного поверх вашего сайта, а исчезает оно при прокрутке или когда пользователь щелкает по особому элементу. Не стесняйтесь использовать этот код и модифицировать его как вам угодно.

Как я уже упоминал вначале, эту технику можно применять любым количеством способов, так что дерзайте!

Автор: Harry Atkins

Источник: http://www.webdesignerdepot.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree