Здесь хотелось бы вам рассказать про сайты с горизонтальной прокруткой и о том как создать данную горизонтальную прокрутку на своем сайте.
Скачать исходники для статьи можно ниже
Применение на сайте горизонтальной прокрутки позволит вам выделиться среди остальных.
По-моему мнению, ее легче применять на отдельном поддомене сайта, например сделав страничку об авторе блога в оригинальной горизонтальной прокрутке или же сделать описание отдельных продуктов и прочее.
Примеры сайтов с горизонтальной прокруткой:
http://www.thehorizontalway.com/
http://deanoakley.com/
http://www.hasrimy.com/
http://www.lovebento.com.au/
http://www.peter-pearson.com/
А теперь приступим к непосредственному описанию как ее осуществить.
Вариант 1. Тема сайта с горизонтальной прокруткой.
Если вы используете поддомены, то данный вариант вам подойдет.
В силу очень редкого использования горизонтальной прокрутки на сайтах – тем под нее в интернете очень мало, я нашел только одну:
Скачать тему horizontal-way можно по следующей ссылке (к сожалению не нашел другого варианта):
www.wpfree.ru/download-manager.php?id=123
В данной теме стоят 4 ссылки на сайт www.wpfree.ru (это легко увидеть если воспользоваться плагином для wordpress с названием TAC), причем одна из них закодирована – это тоже можно исправить.
Как ее установить?
После закачки у вас появиться файл архива horizontal-way.zip.
Далее вам нужно зайти в панель управления сайта на wordpress, выбрать в левом меню пункт “Внешний вид” и в нем подпункт “Темы оформления”, после выбрать закладку “Установка тем оформления” и подзакладку “Загрузить файл”, нажав на кнопку “Обзор” выбрать скаченный файл horizontal-way.zip, установить и активизировать тему.
Данная тема будет выглядеть следующим образом:
Однако после доработки можно создать достаточно красивый сайт, например сайт http://www.thehorizontalway.com/ – сконструирован как раз на основе данной темы.
Вариант 2. Можно добавить горизонтальную прокрутку для сайта с помощью javascript.
Если вы попытаетесь создать сайт с широким контентом (растянутым по ширине), то заметите, что горизонтальная прокрутка вашего сайта с помощью колесика мыши работать не будет и вам для того, чтобы переместиться вправо придется использовать курсор и двигать ползунок горизонтальной прокрутки вручную.
Признайтесь это не удобно.
Для решения данной проблемы существует javascript, скачать его можно отсюда:
http://webkolbasa.com/sites/default/files/horizontal_tiny_scrolling.zip
После того как вы скачали javascript, вам необходимо его подключить, вставив между тэгами head следующий код:
<script type="text/javascript" src="horizontal_tiny_scrolling.js"></script>
– нарисовать все, например в графическом редакторе Photoshop (читайте следующую статью: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-wickedly-cool-horizontally-oriented-website-design/ )
– создать широкую таблицу, с большим количеством столбцов.
– разбить контент на множество колонок (здесь тоже можно использовать javascript)
<!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>Документ без названия</title> </head> <body> </body> </html>
Далее подключаем javascript в теге head:
<!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>Документ без названия</title> <script type="text/javascript" src="horizontal_tiny_scrolling.js"></script> </head> <body> </body> </html>
Далее создаем табличку.
Я создал таблицу с 2 строчками и 10 колонками.
<!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>Документ без названия</title>
<script type="text/javascript" src="horizontal_tiny_scrolling.js"></script>
</head>
<body>
<table width="1700" border="0" cellpadding="10">
<tr>
<td width="300">Название блока 1</td>
<td width="50"> </td>
<td width="300">Название блока 2</td>
<td width="50"> </td>
<td width="300">Название блока 3</td>
<td width="50"> </td>
<td width="300">Название блока 4</td>
<td width="50"> </td>
<td width="300">Название блока 5</td>
</tr>
<tr>
<td>Содержание блока 1</td>
<td> </td>
<td>Содержание блока 2</td>
<td> </td>
<td>Содержание блока 3</td>
<td> </td>
<td>Содержание блока 4</td>
<td> </td>
<td>Содержание блока 5</td>
</tr>
</table>
</body>
</html>
В первой строчке у меня будет располагаться название блоков, а во второй строчке непосредственно их содержание.
Колонки будут использовать по следующему принципу колонка с 300px это основные блоки, а колонки с 50px – это промежутки между информационными блоками.
Теперь осталось наполнить колонки с информационными блоками (причем производить их наполнение легче в Adobe Dreamweaver) и сохранить html файл.
Теперь откройте созданный сайт браузером и увидите простенький сайт с горизонтальной прокруткой.
PS: Возможно вам будет также интересен плагин jQuery.ScrollTo, который позволяет начать просмотр странички не сначала, а например с середины сайта, можно установить любое место скруллера, с которой посетитель начнет просматривать ваш сайт.
Демо пример для сайта с горизонтальной прокруткой можно посмотреть по следующей ссылке:
http://interiors.nais-proekt.com/
Официальный сайт плагина на английском языке:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
Русский перевод данной статьи:
http://webkolbasa.com/article/scrollto-vidimaya-oblast-sajta-i-smeschenie
Еще один сайт с красивой горизонтальной прокруткой:
“brandiacentral.com/uk/work/from-tourist-attraction-to-tourist-destination/”