7.08.14, 19:39
0 комментарий
  Уроки

Создаем фоновое изображение с поддержкой скроллинга при помощи 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”);, которая предотвращает непреднамеренную прокрутку страницы. Когда пользователь начинает прокрутку, нам нужно чтобы анимация просто запустилась, но страница не прокручивалась. Но однако, сразу же после того, как заставка закончится, страница начнем прокручиваться в обычном режиме.

В завершение

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

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

Исходники в архиве.

СКАЧАТЬ

Вес файла
437.58 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204