—»     —»   Непринужденные фоновые изображения на весь экран с помощью jQuery
  Раздел: Руководства   Нет комментариев  

Непринужденные фоновые изображения на весь экран с помощью jQuery



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

Мы также воспользуемся функциями @font-face и rgba для того, чтобы сохранить некоторое ощущение современности. Давайте приступим!

Демо-файл

Для того, чтобы полностью понять и ощутить то, над чем мы сегодня будем работать, ознакомьтесь с данным демо-файлом. Для того, чтобы оценить работу jQuery, попробуйте поменять размер окна и следите за тем, что происходит.

Посмотреть демо

Непринужденные фоновые изображения на весь экран с помощью jQuery

Теперь, когда вы увидели то, как это работает, давайте начнем!

Этап 1: Обзаведитесь плагином Fullscreenr

Непринужденные фоновые изображения на весь экран с помощью jQuery

Первое, что нам нужно сделать, это перейти на официальный веб-сайт плагина и скачать его. Возьмите JS-файлы из архива и скопируйте их в папку с основной платформой веб-сайта: html, css, а также папка с изображениями.

Этап 2: Начинаем разработку HTML

Для того, чтобы начать работу с кодом HTML, скопируйте данный код в чистый документ и свяжите его с файлом CSS и двумя файлами js.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Design Shack + Fullscreenr</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!-- javascript codes -->
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Этап 2: Выбираем фоновое изображение

Перед тем, как мы внесём код для размещения фонового изображения, нам нужно знать его размер. Это означает, что сначала, естественно, нам нужно выбрать изображение.

Мы воспользовались изображением от пользователя сервиса Flickr - Faisal.Saeed. Здесь изображение снежной горы, которое идеально подойдёт нашему веб-сайту.

Непринужденные фоновые изображения на весь экран с помощью jQuery

Далее мы изменяем размер изображения на 907х680 пикселей. Это именно те показатели, которыми мы воспользуемся в следующем этапе.

Этап 3: Интеграция отрывка кода Fullscreenr

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

<script type="text/javascript">  
    var FullscreenrOptions = {  width: 907, height: 680, bgID: '#bgimg' };
    jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

Всё, что вам нужно сделать для собственного проекта – изменить показатели длины и ширины изображения, которое выбрали вы.

Этап 4: Тело HTML-кода

Далее на демо странице также есть отрывок кода HTML, которым мы тоже воспользуемся. Его структура может показаться вам немного необычной, но здесь все действительно сделано ради интеграции фонового изображения в основной контейнер (realBody), что облегчает вам задачу. Если вам не нравятся имена Div’ов, которые использовал разработчик, то смело меняйте их на более привлекательные и удобные вам.

<body>
    <!-- This is the background image -->
    <img id="bgimg" src="img/mountains-907x680.jpg" />

    <!-- Here the "real" body starts, where you can put your website -->
    <div id="realBody">

    <!-- Here the "real" body ends, do not place content outside this div unless you know what you are doing -->
    </div>
</body>

Как вы можете видеть, всё, что мы здесь только что сделали, нужно для того, чтобы интегрировать фоновое изображение.

Этап 5: Добавляем CSS

Наконец-то мы подошли к коду CSS. Для того чтобы всё заработало правильно, воспользуйтесь приведенным ниже кодом – скопируйте его в документ CSS в папке с вашим веб-сайтом. Это важно для того, чтобы содержимое прокручивалось корректно и сохраняло позиции и выравнивание.

body {
    overflow:hidden;
    padding:0;margin:0;
    height:100%;width:100%;
}

#bgimg {
    position:absolute;
    z-index: -1;
}

#realBody{
    position:absolute;
    z-index: 5;    
    overflow:auto;
    height:100%;width:100%;
    background: url('../img/raster.png');
}

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

Непринужденные фоновые изображения на весь экран с помощью jQuery

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

Непринужденные фоновые изображения на весь экран с помощью jQuery

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

Этап 6: Добавляем DIV и заголовок фонового изображения

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

<body>
    <img id="bgimg" src="img/mountains-907x680.jpg" />

    <div id="realBody">
        <div id="container">
            <h1>Welcome to Hoth</h1>
        </div>
    </div>
</body>

Далее вносим стили этих элементов в CSS-код (внесите этот код в дополнение к CSS, приведенному выше).

#container {
    width: 800px;
    height: 1000px;
    margin: auto;
    margin-top: 60px;
    padding-top: 10px;
    background:rgba(0,0,0,.8);

}

#container h1 {
    color:#fff;
    font-family: 'KitchenpoliceRegular', sans-serif;
    font-size:60px;
    font-weight: normal;
    text-decoration:none;
    text-align:center;
}

@font-face {
    font-family: 'KitchenpoliceRegular';
    src: url('KITCHENPOLICE-webfont.eot');
    src: local('‚&#242;&#8747;'), url('KITCHENPOLICE-webfont.woff') format('woff'), url('KITCHENPOLICE-webfont.ttf') format('truetype'), url('KITCHENPOLICE-webfont.svg#webfontCRDciSXC') format('svg');
    font-weight: normal;
    font-style: normal;
}

Здесь у нас достаточно большой отрезок кода, но он очень простой. Для начала, мы задаем ширину и высоту контейнера, а затем выставляем поля на auto. Это дает нам вертикальную полоску, которая автоматически остается выровненной по центру страницы. Цвет фона контейнера мы применили с помощью rgba. Это поможет нам добиться красивого эффекта прозрачности контейнера, а также придает привлекательный эффект изображению, которое виднеется из-под контейнера.

Далее, нам нужно применить некоторые основные стили заголовку, а также оформить текст посредством @font-face. Мы воспользовались шрифтом под названием Kitchen Police, а также набором от FontSquirrel.

На данном этапе ваша страница должны выглядеть примерно так.

Непринужденные фоновые изображения на весь экран с помощью jQuery

Этап 7: Добавляем изображение заголовка

Следующий этап максимально прост. Всё, что вам нужно сделать – это добавить изображение, которое имеет ту же ширину, что и контейнер (800 пикселей).

<body>
    <img id="bgimg" src="img/mountains-907x680.jpg" />

    <div id="realBody">
        <div id="container">
            <h1>Welcome to Hoth</h1>
            <img src="img/walkers.jpg" />
        </div>
    </div>
</body>

После этого ваше изображение сразу должно встать на своё место, больше ничего не нужно добавлять.

Непринужденные фоновые изображения на весь экран с помощью jQuery

Этап 8: Добавляем текст

В этом этапе мы собираемся добавить немного текста на страницу, а далее мы добавим сетку с изображениями. Так как текст гипотетически будет примыкать к изображениям, мы расположим всё это в DIV’е под названием «grid».

<body>
    <img id="bgimg" src="img/mountains-907x680.jpg" />

    <div id="realBody">
        <div id="exampleDiv">
            <h1>Welcome to Hoth</h1>
            <img src="img/walkers.jpg" />

            <div id="grid">
                <h2>Good Times on Hoth:</h2>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>

        </div>
    </div>
</body>

Для того, чтобы стилизовать текст, нам нужно добавить поле от верхней границы div’а. Далее мы применяем основной цвет, размер и позиционирование тэгам h2 и paragraph. Учтите, что мы также воспользовались некоторыми привелегиями @font-face. На этот раз – Lobster.

#grid {
    margin-top: 20px;
}

#grid h2{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    font-size: 30px;
    font-family: 'Lobster', sans-serif;
    margin-bottom: 3px;
    font-weight: normal;
}


#grid p{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    margin-bottom: 3px;
    font-size: 12px;
    font-family: helvetica, sans-serif;
    margin-top: 0px;
    width: 650px;
    line-height: 18px;
}

@font-face {
    font-family: 'Lobster';
    src: url('Lobster_1.3-webfont.eot');
    src: local('‚&#242;&#8747;'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

Непринужденные фоновые изображения на весь экран с помощью jQuery

Этап 9: Добавляем галерею

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

<body>
    <img id="bgimg" src="img/mountains-907x680.jpg" />

    <div id="realBody">
        <div id="container">
            <h1>Welcome to Hoth</h1>
            <img src="img/walkers.jpg" />

            <div id="grid">
                <h2>Good Times on Hoth:</h2>
                <p>Lorem ipsum dolor sit...</p>
                <a href="http://ow.ly/35afM"><img src="img/hoth1.jpg" /></a>
                <a href="http://ow.ly/35ah9"><img src="img/hoth2.jpg" /></a>
                <a href="http://ow.ly/35aim"><img src="img/hoth3.jpg" /></a>
                <a href="http://ow.ly/35ajg"><img src="img/hoth4.jpg" /></a>
                <a href="http://ow.ly/35ajY"><img src="img/hoth5.jpg" /></a>
                <a href="http://ow.ly/35alw"><img src="img/hoth6.jpg" /></a>
            </div>

        </div>
    </div>
</body>

В качестве финального штриха, мы внесем сюда несколько полей и границ для того, чтобы наша таблица стала более стильной.

#grid img {
    margin: 20px 10px 20px 10px;
    border: 3px solid #000;
}

#grid a:hover img{
    border: 3px solid #fff;
}

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

Непринужденные фоновые изображения на весь экран с помощью jQuery

Заключение

jQuery вместе с плагином Fullscreenr предлагают самый легкий способ интеграции адаптируемого фонового изображения. Если вам хочется попробовать какие-либо еще эффекты, не забудьте изучить способы реализации от Криса Койиера (Chris Coyier) на сайте CSS-Tricks. Крис предлагает три возможных альтернативных варианта, один из которых работает на чистом коде CSS и, кстати говоря, работает гораздо лучше большинства примеров, которые нам встречались.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

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

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

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


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031