Скроллинг контента на JQuery и CSS

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

 

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

Начало страницы до увеличения текстовой информации.

 

 

Скроллинг вниз и заметное увеличение текста.

 

 

Ну, а теперь разберем все в деталях, как это сделать.

 

 

Подключаем файл стилей CSS.

 

<link rel="stylesheet" type="text/css" href="style.css"/>

 

Подключаем библиотеку jquery.min.js

 

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

 

Подключаем файл bottom.js, он нужен будет относительно для увеличения и уменьшения контента, без него скрипт работать не будет.

 

<script type="text/javascript" src="bottom.js"></script>

 

 

 

Ну, а теперь сама страница. Для начала прописываем идентификатор wrapper тегу div, он будет держать весь контент по определенной ширине и по центру. Далее идет идентификатор main, указанный в теге div, он придает и поддерживает блоки при скроллинге вверх, то есть если Вы без перезагрузки вернетесь скроллингом вверх к началу страницы.

Далее идет часть с текстом, с тегом div и идентификатором maininner, затем сам текст с классом content. И чуть ниже два блока одинаковые по структуре, ну разные по свойствам.

 

<!--Начало страницы-->
<div id="wrapper">

<!--Поддерживаем блоки при возврате скроллинга-->
<div id="main">

<!--Часть с текстом-->
<div id="maininner">

<!--Текст-->
<div class="content">
<p><? include("text.php"); //Подключаем текст?></p>
</div>

</div>

<!--Левый блок-->
<aside id="sidebar_left">
<div class="sidebar_name">Левый блок</div>
</aside>

<!--Правый блок-->
<aside id="sidebar_right">
<div class="sidebar_name">Правый блок</div>
</aside>

</div>
</div>

 

 

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

 

#wrapper
{
width: 1055px;
margin: 0 auto;
}

#sidebar_right
{
width: 215px;
background: #ffb879;
float:left;
left: 10px;
position: relative;
}

#sidebar_left
{
width: 220px;
background: #ffb879;
float:left;
left: -630px;
position: relative;
}

#maininner
{
width: 620px;
float:left;
left: 220px;
position: relative;
}

.sidebar_name
{
color: #fff;
font-size: 30px;
margin: 24px;
}

.content
{
text-align: justify;
}

 

 

Спасибо Вам большое за внимание к данному уроку скроллинг контента при на JQuery и CSS. Удачи и успехов Вам в реализации!