Рубрика CSS
Создание сайта с автоматической прокруткой
Добрый вечер всем, сегодня мы будем погружаться в JQuery. То, что мы будем создавать, представляет собой небольшой сайт, благодаря меню которого, при нажатии, мы будем перемещаться к нужному нам разделу.
Итак начнем …
Нарезка изображений из готовых файлов PSD.
Прежде чем мы начнем, создайте новую папку с названием «template» а в ней еще 3 папки. Это папки с названиями “Images”, “Js” и “Stylesheets”.
Скачиваем готовый PSD файл, а затем открываем его в фотошопе. PSD должен выглядеть следующим образом.
Мы должны нарезать 3 изображения из файла PSD, которые необходимы для демонстрации, остальное можно сделать в CSS. В качестве изображений мы возьмем кусочки с фоном, заголовком и названием меню.
Для нарезки изображений используем инструмент прямоугольная область и сохраняем их в папке для изображений. Не забудьте каждому изображению задать прозрачный фон и сохранить файлы как «bg.png», «title.png» и «top.png».
Создание HTML разметки.
Внутри папки «template» создайте пустой файл HTML, а в папке «Stylesheets» пустой файл CSS. После этого открываем оба файла в вашем любимом редакторе кода.
Внутри вашего HTML файла создаем разметку, которая выглядит следующим образом.
<DIV id=&qout;top&qout;>
<DIV id=&qout;homepage&qout;>
</DIV><!--homepage-->
<DIV id=&qout;about&qout;>
</DIV><!--about-->
<DIV class=&qout;top&qout;>
</DIV><!--top-->
<DIV id=&qout;gallery&qout;>
</DIV><!--gallery-->
<DIV class=&qout;top&qout;>
</DIV><!--top-->
<DIV id=&qout;portfolio&qout;>
</DIV><!--portfolio-->
<DIV class=&qout;top&qout;>
</DIV><!--top-->
<DIV id=&qout;contact&qout;>
</DIV><!--contact-->
<DIV class=&qout;top&qout;>
</DIV><!--top-->
</DIV><!--container-->Давайте рассмотрим эту разметку поближе.
- DIV Top – основной контейнер, который содержит все элементы нашего макета.
- DIV Title - это div в котором будет размещаться заголовок страницы.
- DIV Navigation – div, в котором будет располагаться вся навигация страницы.
- DIV Homepage, About, Gallery, Portfolio and Contact – являются элементами div, до которых анимация прокручивает страницу вниз, при нажатии кнопкой мыши на соответствующий элемент навигации.
- Класс Top – промежуточный класс, разделяющий блоки друг от друга и содержащий ссылку «обратно вверх» (Back To Top).
Добавляем наши элементы.
Внутрь тега Div «Title» вставьте изображение «title.png».
<div id="title">
<img src="images/title.png" alt="jQuery Animated Scroll" />
</div><!--title ends-->Внутри тега Div «Navigation» создаем неупорядоченный список для пунктов навигации. Каждая ссылка должна содержать класс «Scroll», этот класс необходим для прокрутки анимации. Кроме того, следует принять к сведению то, что гиперссылки в меню навигации должны ссылаться на теги div текущей HTML страницы.
<div id="navigation">
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</div><!--navigations ends-->
Внутри каждого из разделов "Homepage, About, Gallery, Portfolio и Contact" вставить теги H1, которая будет содержать название раздела. Кроме того, внутри тега H1 добавьте описание раздела, расположенное в классе span.
<div id="homepage">
<h1>Homepage <br />
<span>This is the Homepage</span></h1>
</div><!--homepage ends-->
<div id="about">
<h1>About <br />
<span>This is the About Page</span></h1>
</div><!--about ends-->
<div>
</div><!--top ends-->
<div id="gallery">
<h1>Gallery <br />
<span>This is the Gallery Page</span></h1>
</div><!--gallery ends-->
<div>
</div><!--top ends-->
<div id="portfolio">
<h1>Portfolio <br />
<span>This is the Portfolio Page</span></h1>
</div><!--portfolio ends-->
<div>
</div><!--top ends-->
<div id="contact">
<h1>Contact <br />
<span>This is the Contact Me Page</span></h1>
</div><!--contact ends-->
<div>
</div><!--top ends-->Наконец внутри классов «Top» добавляем теги P, содержащие фразу «обратно вверх» (Back To Top), и добавляем ссылку на верх страницы. Не забудьте добавить класс «Scroll» к ссылке, без него JQuery работать не будет.
<div id="homepage">
<h1>Homepage <br />
<span>This is the Homepage</span></h1>
</div><!--homepage ends-->
<div id="about">
<h1>About <br />
<span>This is the About Page</span></h1>
</div><!--about ends-->
<div>
<p><a href="#top">Back To Top</a></p>
</div><!--top ends-->
<div id="gallery">
<h1>Gallery <br />
<span>This is the Gallery Page</span></h1>
</div><!--gallery ends-->
<div>
<p><a href="#top">Back To Top</a></p>
</div><!--top ends-->
<div id="portfolio">
<h1>Portfolio <br />
<span>This is the Portfolio Page</span></h1>
</div><!--portfolio ends-->
<div>
<p><a href="#top">Back To Top</a></p>
</div><!--top ends-->
<div id="contact">
<h1>Contact <br />
<span>This is the Contact Me Page</span></h1>
</div><!--contact ends-->
<div>
<p><a href="#top">Back To Top</a></p>
</div><!--top ends-->Добавляем CSS.
Код CSS для всех наших элементов выглядит следующим образом.
body {
background-image: url(../images/bg.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#top {
width: 950px;
margin-top: 50px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#title {
margin: auto;
width: 495px;
clear: both;
}
#navigation {
float:left;
width:100%;
overflow:hidden;
position:relative;
margin-top: 20px;
margin-bottom: 20px;
}
#navigation ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#navigation ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:#666666;
text-decoration:none;
line-height:1.3em;
}
#navigation ul li a:hover {
color:#000000;
}
#navigation ul li a.active, #navigation ul li a.active:hover {
color:#000000;
font-weight:bold;
}
#homepage {
float: left;
width: 950px;
height: 800px;
}
#about, #gallery, #portfolio, #contact {
float: left;
width: 950px;
height: 600px;
}
h1 {
color: #5a5a5a;
font-size: 24px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
span.description {
color: #9f9f9f;
font-size: 12px;
}
.top {
background-image: url(../images/top.png);
background-repeat: no-repeat;
float: left;
height: 48px;
width: 950px;
padding-bottom: 35px;
background-position: bottom;
margin-bottom: 20px;
}
.top p {
text-align: center;
color: #999999;
font-size: 10px;
}
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #000000;
}
a:active {
color: #666666;
}Добавляем jQuery.
Загрузите последнюю версию библиотеки jQuery и поместите файл библиотеки в Вашу папку “JS”.
Затем, откройте блокнот и сохраните чистый файл в папке “JS” под названием “Scroll.js”. Далее скопируйте представленный ниже код.
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});
});Теперь проверьте свой HTML файл в браузере и посмотрите как это работает.
Вот и все, наслаждайтесь.
