Создаем сайты с горизонтальной прокруткой

Здесь хотелось бы вам рассказать про сайты с горизонтальной прокруткой и о том как создать данную горизонтальную прокрутку на своем сайте.

Скачать исходники для статьи можно ниже

 
Применение на сайте горизонтальной прокрутки позволит вам выделиться среди остальных.

По-моему мнению, ее легче применять на отдельном поддомене сайта, например сделав страничку об авторе блога в оригинальной горизонтальной прокрутке или же сделать описание отдельных продуктов и прочее.

Примеры сайтов с горизонтальной прокруткой:

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>
, где в параметре “scr” необходимо указать путь до скрипта, например если я закачаю его в корневую папку своего сайта на mnogoblog.ru, то вышеуказанный параметр необходимо записать следующим образом: “scr=https://mnogoblog.ru/horizontal_tiny_scrolling.js”.

 

А далее осталось создать сам контент для прокрутки, причем сделать его желательно следующими способами:

нарисовать все, например в графическом редакторе Photoshop (читайте следующую статью: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-wickedly-cool-horizontally-oriented-website-design/  )
– создать широкую таблицу, с большим количеством столбцов.
– разбить контент на множество колонок (здесь тоже можно использовать javascript)

Ниже я попробую создать широкий контент для сайта с горизонтальной прокруткой с помощью создания таблицы.

 

Данный эксперимент можно произвести у себя на компьютере.
Создайте папку, например с название “site”, далее сохраним в ней horizontal_tiny_scrolling.js (скрипт для осуществления горизонтальной прокрутки на сайте), после создадим новый документ html и сохраним его в этой папке под любым именем.
Для этого открываем редактор кода, например  NotePad++ и вводим следующий код:
<!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">&nbsp;</td>
    <td width="300">Название блока 2</td>
    <td width="50">&nbsp;</td>
    <td width="300">Название блока 3</td>
    <td width="50">&nbsp;</td>
    <td width="300">Название блока 4</td>
    <td width="50">&nbsp;</td>
    <td width="300">Название блока 5</td>
  </tr>
  <tr>
    <td>Содержание блока 1</td>
    <td>&nbsp;</td>
    <td>Содержание блока 2</td>
    <td>&nbsp;</td>
    <td>Содержание блока 3</td>
    <td>&nbsp;</td>
    <td>Содержание блока 4</td>
    <td>&nbsp;</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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Создаем сайты с горизонтальной прокруткой: 2 комментария

Добавить комментарий