С тех пор, как я увидел Sursly.com Тайлера Финка, я искал повод повсюду попробовать гладкую горизонтальную разметку, как у него. Это ни в коем случае не новая тенденция, но ее используют немногие из нас, и это все еще достаточно необычно, что вы действительно замечаете это, когда видите это.
Боковой стиль хорошо подходит для дизайна с небольшим количеством «художественного» ощущения: сайты в стиле брошюр, галереи, портфолио и, возможно, даже сайты, которые используют интересную инфо-графику или диаграммы. Успешные горизонтальные макеты часто используют анимацию и графику, чтобы подчеркнуть их боковое движение — большое количество этих сайтов используют красочные изображения и красивые, большие фоны, которые действительно демонстрируют это. Необычное также означает незнакомое, поэтому хорошо продуманная горизонтальная компоновка также будет хорошо использовать элементы навигации, такие как меню, стрелки и кнопки, чтобы преодолеть любые неудобства юзабилити.
Что касается того, что входит в один из этих сайтов — ну, оказывается, это на самом деле довольно легко. Давайте взглянем на то, как создать наш собственный отличный, скроллёвый, боковой сайт, используя всего лишь несколько простых CSS и jQuery.
Планирование это
Прежде всего, нам нужно выяснить, что происходит на этом сайте. Представьте, что мы создаем простой сайт для брошюр для вымышленного магазина, продающего модную обувь. Здесь очень мало информации для передачи:
- небольшой кусочек вводного текста
- подписка на рассылку
- направления и контактная информация
- контактная форма
Мода — это отличный бизнес, поэтому необычный горизонтальный макет хорошо подходит для такого рода сайтов. Если вы можете представить каждый из четырех элементов как панель, вы можете расположить каждый из них в ряд. Одновременно будет видна только одна панель, как если бы они были отдельными страницами, а это означает, что общая ширина нашего макета должна быть намного шире, чем у окна браузера — нашего окна просмотра. На диаграмме ниже наш видовой экран представлен красным квадратом, окружающим первую панель, а общая ширина нашего элемента body
Это должно быть достаточно легко для кодирования!
Добавление разметки и стилей
Чтобы отметить это, мы можем использовать четыре маленьких элемента divbody Разметка для этого может выглядеть примерно так:
<body> <div id="home" class="panel"> ... </div> <div id="newsletter" class="panel"> ... </div> <div id="directions" class="panel"> ... </div> <div id="contact" class="panel"> ... </div> </div> </body>
Чтобы добиться эффекта от того, что каждая панель является отдельной «страницей», а также чтобы дать нам пространство для нашей анимации, нам нужно, чтобы каждая панель занимала гораздо больше места, чем наше окно просмотра — давайте позволим 960 пикселей для фактического содержимого и дополнительные 1040 пикселей для дополнительного пространства, в результате чего каждая панель занимает в общей сложности 2000 пикселей по ширине. Вот небольшой CSS, чтобы сделать эту работу для нас:
body { width: 8000px; } .panel { width: 930px; float: left; padding-left: 30px; padding-right: 1040px; }
Вы можете увидеть, как это выглядит до сих пор в демонстрационной версии 1 , которая также включает некоторое содержимое и заливку. Если у вас нет свободного монитора, вы должны видеть только одну страницу за раз, пока вы прокручиваете из стороны в сторону. Groovy!
Добавление навигации
Пока все это хорошо, но как насчет более простого способа перемещения по странице? Давайте построим меню из четырех ссылок:
<ul id="banner"> <li> <a href="#home">Home</a> </li> <li> <a href="#newsletter">Newsletter</a> </li> <li> <a href="#directions">Directions & Opening Hours</a> </li> <li> <a href="#contact">Contact us</a> </li> </ul>
Конечно, цели ссылок соответствуют идентификаторам div Однако, как только мы щелкаем по одному, наше меню исчезает — оно снова в левом верхнем углу элемента body Если мы используем фиксированную позицию, чтобы прикрепить меню к верхней части страницы, мы можем даже убедиться, что оно остается неизменным во время масштабирования. Элемент с фиксированным позиционированием удаляется из общего потока макета — нам потребуется добавить еще немного места в верхней части этих панелей, чтобы освободить место. Пока мы на этом, давайте сделаем это меню немного похожим на меню:
.panel { ... margin-top: 45px; } ul#banner { position: fixed; line-height: 45px; margin: 0 30px; padding: 0; } ul#banner li { display: inline; }
Мы освободили место для меню, установив высоту строки в 45 пикселей и соответствующее верхнее поле на панелях, чтобы они оставались четкими. Вы можете увидеть результат в демо 2 , где вы можете щелкнуть все четыре ссылки и перейти между панелями.
Плавная прокрутка
Теперь, когда у вас есть контент и меню, вы можете использовать немного jQuery для плавной анимации вокруг вашего красивого длинного холста. Мы будем выслушивать клики по ссылкам нашего меню, а затем заменять поведение по умолчанию на наше: вместо того, чтобы просто переходить прямо к этой части страницы, мы плавно прокрутим нужный элемент с помощью методов анимации jQuery. Вот как это выглядит:
$(document).ready(function() { $("#banner a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
Вот как это ломается: во-первых, мы предотвращаем поведение по умолчанию. Затем мы устанавливаем переменную для хранения значения href В-третьих, мы выполняем несколько действий с элементами htmlbody
-
stop - Затем, чтобы анимировать наше поведение прокрутки — мы решаем, где нам нужно прокрутить, вычисляя, как далеко находится наша
targetscrollLeftscrollTop - Для эффекта мы установили продолжительность в 1200 миллисекунд (1,2 секунды), что должно дать достаточно времени для того, чтобы полюбоваться пейзажем.
Это все, что вам нужно! Демонстрация 3 показывает, как все это происходит вместе.
Но как насчет красивых вещей?
Теперь, когда у вас есть кости, вы можете добавить немного цвета и живости в свой дизайн боковой прокрутки. Я, конечно, не Тайлер Финк, но даже я могу улучшить серые, квадратные демонстрации, которые мы видели раньше. В демонстрации 4 вы увидите, что я добавил большое фоновое изображение, которое меняет внешний вид сайта от панели к панели. Я также добавил некоторую непрозрачность к цвету фона в меню и немного изменил разметку, чтобы в нем появился заголовок. Наконец, я немного перестроил это так, чтобы при отключенном JavaScript макет возвращался к обычному режиму с вертикальной прокруткой.
- Используйте кнопки «Предыдущая» и «Следующая» на каждой панели, направляя ваших читателей по пути
- Добавьте еще больше авантюрных фоновых изображений в эти большие, широкие промежутки между областями контента
- Зачем ограничиваться горизонтальной прокруткой? Используйте эту технику, чтобы увеличить весь большой квадратный холст!
- Используйте JavaScript, чтобы добавить больше или меньше пространства между панелями на основе текущего размера области просмотра
- Сверните это в набор медиа-запросов — маленькие экраны, безусловно, могут пропустить шоу
Тем не менее, вы решите использовать его, в чем одно точно — хотя некоторое время это было какой-то тенденцией в веб-дизайне, все же достаточно необычно, что ваш сайт непременно выделится. Я знаю, что буду рассматривать это для моего следующего мини-сайта!
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn CSS3 .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?