Добрый день товарищи =).
Сегодня мы разберём очень простой и хитрый урок.
Наша задача менять футер по мере прокрутки страницы. Вот что мы будем реализовывать: Demo, Исходники. Только это дело надо смотреть не при дневном освещении - трудно разглядеть картинку подложки из-за её темных тонов.
Для начала на нужно создать html структуру страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Think Geek Fade</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="page-wrap">
<div id="fancy-fancy">
<div id="inner-wrap">
blah blah.
</div>
</div>
</div>
</body>
</html>
Далее разберём CSS (но я полагаю тут всё просто):
*
{
margin: 0; padding: 0;
}
body
{
background: #404143
url(../images/bodytiletop.jpg) repeat-x;
}
#page-wrap
{
background:
url(../images/bodytilebottom-tall.jpg)
repeat-x left bottom;
}
#fancy-fancy
{
background:
url(../images/circlepattern.png)
fixed repeat-x -275px bottom;
}
#inner-wrap
{
width: 550px; background: white;
margin: 0 auto; min-height: 2000px;
}
Ну и пробежим ещё раз по коду глазами и посмотрим логику у нас есть футер в png но сама картинка не простая
изображения чёрно белое и имеет скрытые изображения.
Мы крепим наш футер к низу сайта и при тянем градиент по ширине сайта таким образом, при прокрутке сайта, футер будет двигаться и PNG сыграет свою роль.
Ну а на этом урок завершен.
Оценить статью:
Оценивая статью, Вы подсказываете нам насколько данная информация стала
полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала
для понимания и простоты его изложения. Дополнительные комментари, вопросы,
дополнения и замечания Вы можете указать на странице
От Вас
Частичное, или полное копирование материала данной
статьи возможно лишь при размещении ссылки на данную страницу.