Мы также воспользуемся функциями @font-face и rgba для того, чтобы сохранить некоторое ощущение современности. Давайте приступим!
Демо-файл
Для того, чтобы полностью понять и ощутить то, над чем мы сегодня будем работать, ознакомьтесь с данным демо-файлом. Для того, чтобы оценить работу jQuery, попробуйте поменять размер окна и следите за тем, что происходит.
Посмотреть демо
Теперь, когда вы увидели то, как это работает, давайте начнем!
Этап 1: Обзаведитесь плагином Fullscreenr
Первое, что нам нужно сделать, это перейти на официальный веб-сайт плагина и скачать его. Возьмите 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. Здесь изображение снежной горы, которое идеально подойдёт нашему веб-сайту.
Далее мы изменяем размер изображения на 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 покончено. Теперь у вас должно быть фоновое изображение, которое динамически адаптируется под размер окна браузера. Переход достаточно плавный и работает идеально.
В комплекте с плагином идет точечное наложение на изображение. Оно отображено ниже в увеличенном виде. Если вам не нравится этот эффект, вы можете не пользоваться им!
Если же вам нравится, то здесь уже можно остановиться и продолжить работу над своим дизайном. Если вам интересно, как и что делать дальше, то мы можем завершить статью тем, что покажем вам немного забавных вещей.
Этап 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('‚ò∫'), 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.
На данном этапе ваша страница должны выглядеть примерно так.
Этап 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>После этого ваше изображение сразу должно встать на своё место, больше ничего не нужно добавлять.
Этап 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('‚ò∫'), 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;
}Это даст нам красивый стильный текст, схожий с тем, что отображен на картинке ниже. Теперь мы можем перейти к заключительному этапу!
Этап 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 вместе с плагином Fullscreenr предлагают самый легкий способ интеграции адаптируемого фонового изображения. Если вам хочется попробовать какие-либо еще эффекты, не забудьте изучить способы реализации от Криса Койиера (Chris Coyier) на сайте CSS-Tricks. Крис предлагает три возможных альтернативных варианта, один из которых работает на чистом коде CSS и, кстати говоря, работает гораздо лучше большинства примеров, которые нам встречались.
