—»     —»   Создаем фоновое изображение с поддержкой скроллинга при помощи CSS3 и jQuery
  Раздел: Руководства   Нет комментариев  

Создаем фоновое изображение с поддержкой скроллинга при помощи CSS3 и jQuery

Создаем фоновое изображение с поддержкой скроллинга при помощи CSS3 и jQuery

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

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

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

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


Разметка

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

На самом деле, нам нужно создать 2 div-элемента. Один с классом splash, и второй с классом wrapper (класс wrapper уже может использоваться в некоторых ваших проектах, поэтому вам, возможно, придется заменить его другим).

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

Итак, предлагаем вам простую разметку, где все содержится в тэге 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>

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

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

Стилизация

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

@-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;
}

С самого начала мы определяем ключевые кадры и запускаем нашу анимацию fadein. Она сменяет уровень плотности отображения с 0 до 1. Затем мы напрямую определяем класс, и указываем, что уровень плотности должен составлять 0. Затем запускаем только что указанную анимацию, и устанавливаем продолжительность равную 0.3s с задержкой 0.5s.

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

.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;
}

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

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

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;}
}

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

jQuery

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

$(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);
});
});

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

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

В завершение

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

Как уже было отмечено выше, этот эффект можно изменять и дополнять, так что дальше все исключительно в ваших руках! Дерзайте!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 5319   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031