Пять полезных техник кодирования CSS/jQuery для создания более динамичных веб-сайтов

техника кодирования

От автора: Интерактивность может превратить скучный статический веб-сайт в динамичный инструмент, не только радующий пользователей, но и более эффективно передающий информацию. В этой статье мы рассмотрим пять разных техник кодирования css/jQuery, легко выполнимых на любом сайте и обеспечивающих повышение квалификации.

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

Поиск текста на странице

Прокручивание содержимого большого размера

Утонченные эффекты наведения (hover)

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Панели подсчета комментариев

Полностраничный ползунок

1. Поиск текста на странице

poisk

Часто для пользователей на веб-сайтах есть поля поиска архивного контента. А что, если бы вы хотели найти содержимое на данной странице? На Information Architects был постраничный поиск текста, производящий на пользователя отличное впечатление. Давайте воссоздадим его с помощью jQuery.

Разметка и взаимодействие

Во-первых, давайте построим поле ввода для поиска:

Далее нам понадобится jQuery, чтобы прикрепить к полю ввода код (слушатель) для отслеживания изменений:

Здесь мы связали свою функцию с событиями keyup и change. Это обеспечит запуск операции вне зависимости от того, печатает ли пользователь свой текст или вставляет скопированный.

Теперь обратимся к Highlight (подсветке), полезному и легковесному плагину jQuery, выделяющему текст. После включения исходного кода плагина давайте добавим вызов JavaScript highlight():

В дополнение к выделению данного текста мы добавили проверку того, что выражения поиска не пустое (так как это вызывает бесконечный цикл).

Этот фрагмент выделяет запрос на поиск по всей странице, но можно также ограничить его пределами данного id:

Так же мы можем искать только внутри определенного элемента:

Это выделение текста по умолчанию не чувствительно к регистру. Если вы предпочитаете подсветку, чувствительную к регистру, то удалите .toUpperCase() в строках 21 и 41 плагина Highlight.

Определяем стили выделенному тексту

Теперь, когда JavaScript уже прикреплен, нужно назначить стили выделенным элементам. Плагин Highlight обертывает их в <span class="highlight"></span>, которому можно назначить стили при помощи CSS.

Во-первых, давайте сменим цвет фона. А затем для всех браузеров, кроме IE, добавим закругленные углы и отбрасываемую тень:

Хотя подсветка уже видна, она пока еще плотно прилегает к тексту и можно было бы применить отступ. Но мы должны быть осторожными, чтобы не изменить разметку текста. Эти span’ы являются встраиваемыми элементами, и если просто добавить отступ, текст сместится по всей странице. Поэтому давайте включим отступ, компенсировав его отрицательными полями:

Доделываем интерактивность

И последнее, но не менее важное: давайте позаботимся об удалении выделенного текста каждый раз, когда пользователь редактирует текст в поле ввода:

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

Хотя removeHighlight() хорошо работает на большинстве браузеров, он приведет IE6 к аварии. Это из-за ошибки IE6 в методе node.normalize().

Переписав эту функцию, можно заставить плагин Highlight работать с IE6. Просто замените строки 45-53 в highlight.js на следующее:

Новая функция заменяет стандартную normalize() Javascript пользовательской — работающей на всех браузерах.

Скачайте пример полностью.

2. Прокручивание содержимого большого размера

moscow

Когда ограниченность разметки сочетается с необходимостью отображения больших изображений, может оказаться трудно найти подходящее решение для этой проблемы. Mospromstroy использует креативный подход для разрешения этой ситуации: панель для перетаскивания (drag-drop), которая позволяет пользователям прокручивать изображение.

Мы можем сделать нечто похожее, пользуясь свойством draggable пользовательского интерфейса jQuery.

Разметка и CSS

Сначала установим разметку содержимого и элементов управления:

Далее применим немного основного CSS:

Тут мы применили абсолютное позиционирование (absolute) как к #full-sized-content, так и #drag-controls, а еще убрали любое переполнение (overflow) для больших изображений. Далее мы указали некоторые размеры для содержимого и упаковщика элементов управления прокручиванием; убедитесь, что отрегулировали их, как следует.

Придание интерактивности при помощи jQuery

Теперь давайте воспользуемся пользовательским интерфейсом (UI) jQuery для построения интерактивности. Начните с включения UI jQuery с модулем draggable.

Перед прикреплением этих управляющих элементов давайте приведем размеры блока управления перетаскиванием в соответствие с правильными размерами:

Вот, мы установили, какая часть содержимого видна в поле контента, а затем соответственно масштабировали ширину блока управления.

Далее давайте добавим функциональность перетаскивания (draggable):

Здесь мы прикрепили событие draggable и пару опций. Во-первых, установили ось (axis) для ограничения перетаскивания на ось Х (x-axis), затем установили сдерживание (containment), чтобы ограничить перетаскивание внутри родительского элемента (т.е. упаковщика элементов управления).

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

Пользовательские курсоры

Перетаскивание контента работает, но совершенству нет предела.

Сначала добавим еще стилей блоку управления элементами, чтобы сделать его более интерактивным. Draggable пользовательского интерфейса jQuery определяет два имени класса, которые мы можем использовать: ui-draggable и ui-draggable-dragging.

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

Из-за реализации свойства курсора мы должны были инициализировать их вместе, используя !important. Это гарантирует, что собственные курсоры используются при условии доступности, в то время, как курсор по умолчанию в IE замещает их. К несчастью, Chrome в данное время не поддерживает -webkit-grab, так что в этой реализации мы его пропускаем. Если вы предпочтете использовать в Chrome и Safari поддержку курсора e-resize, просто удалите свойства -webkit-grab и -webkit-grabbing.

Параллакс-эффект

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

Сначала добавьте разметку:

Затем основные стили:

Здесь для удержания фона на своем месте мы используем абсолютное позиционирование. Обратите внимание, нам не понадобилось прикреплять z-index, потому что элемент фона в разметке помещен перед областью контента.

Наконец, давайте добавим анимацию фона в событие перетаскивания (drag):

Здесь мы просто использовали новую позицию, вычисленную для основного контента, и применили 40% этого изменения к фону. Отрегулируйте это значение для изменения скорости параллакса.

Скачайте пример полностью.

3. Утонченные эффекты наведения (hover)

veerle

В блоге Veerle применяются утонченные переходы для создания естественного ощущения взаимодействия с мышью. Это можно легко проделать при помощи свойства CSS3 transition (и использования jQuery для браузеров не поддерживающих CSS3).

Сначала определим в CSS для всех элементов класс subtle:

Тут мы применили к элементам стили цвета фона и текста и включили состояние «наведения» (hover), использовав псевдокласс :hover. Дополнительно включили псевдокласс :focus для активных элементов входа и текстовой области.

Этот CSS заставляет стиль изменяться сразу же при проведении мышью над элементом, но можно применить и более тонкий переход, использовав CSS3:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот, мы добавили CSS3 transition, который работает на всех современных браузерах, кроме IE. Свойство transition состоит из трех разных значений. Первое – свойство анимации CSS, второе – продолжительность анимации, в нашем случае соответственно — background-color и 500 миллисекунд. Третье значение позволяет определить функцию ослабления (easing), такую, как ease-in или linear.

Поддержка jQuery

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

Сначала нам придется определить, поддерживает ли браузер пользователя transition:

Здесь мы проверили, может ли элемент body использовать какие-либо определенные нами выше свойства перехода, специфичные для данного браузера.

Если браузер не поддерживает transition, можно применить анимацию, использовав jQuery. Однако функция jQuery animate() изначально не поддерживает цветную анимацию. Чтобы приспособить свою анимацию background-color, нам придется включить кусочек пользовательского интерфейса jQuery: ядро эффектов.

После включения jQuery UI нам нужно прикрепить анимацию к приемникам событий hover и focus:

Здесь мы заново создали переход при помощи элемента jQuery animate(). Обратите внимание, каким образом мы использовали значения к переходу CSS3 —500 определяет 500 миллисекунд, а swing определяет метод easing, близкий по значению к ease-in.

В то время, как события mouse-over и focus явно прямолинейные, обратите внимание на разницу в событиях mouse-out и blur. Мы добавили немного кода для завершения функции в случае, если элемент находится в фокусе. Он сохраняет активный режим, даже если пользователь двигает мышь. Метод jQuery is() не поддерживает псевдокласс :focus, так что нам нужно полагаться на document.activeElement DOM’а.

Скачайте пример полностью.

4. Панели подсчета комментариев

commented

На IT Expert Voice используется хороший метод отображения постов «Most commented» (наиболее комментируемое) в сайдбаре (боковой колонке). Давайте воссоздадим его при помощи WordPress и чуть-чуть CSS и jQuery (не использующие WordPress могут пропустить первый раздел).

Извлечение сообщений при помощи WordPress

Давайте начнем с извлечения пятерки самых комментируемых постов:

Здесь мы использовали WP_Query и пользовательское имя переменной так, чтобы не разрушить других циклов сообщений на странице.

Дальше давайте переберем отобранные посты, выводя каждый из них как элемент списка:

Вот, здесь мы использовали цикл while() для просмотра каждого поста. Во-первых, мы выводим ссылку на сообщение, используя the_permalink() и the_title(), а затем выводим счетчик комментариев, применяя comments_number() и немного дополнительной разметки для стилей.

Основные стили CSS

Давайте при помощи CSS применим стили к основной разметке списка комментариев:

Мы убрали все стили списка и определили ссылки как элементы блока, так что они остаются обособленными от визуализации нашей колонки с комментариями.

Давайте установим основные стили колонки и счетчика комментариев:

Большинство этих стилей произвольны, так что не стесняйтесь прикрепить фоновое изображение, или подстроить их под свою тематику любым иным способом. Главное – выровнять счетчик справа от колонки комментариев таким образом, чтобы можно было по своему желанию подогнать ширину колонки.

Обратите внимание на общую ширину счетчика комментариев, в нашем случае 40px (34px ширина плюс по 3px для левого и правого краев). Для позиционирования счетчика комментариев мы используем часть этого значения: 20px правого отступа при отрицательной позиции так, чтобы счетчик висел справа, и 20px левого отступа так, чтобы колонка комментариев достигала центра счетчика.

Связывание при помощи jQuery

Наконец, давайте применим jQuery для установления ширины отдельных колонок. Начнем с просмотра комментариев после загрузки страницы:

Просматриваем все элементы <li>, извлекая счетчик комментариев из разметки. Заметьте, что мы использовали примитивные типы данных ~~ для преобразования текста в целое число. Это значительно быстрее, чем альтернативы типа parseInt().

Давайте установим в первый проход цикла ключевые переменные:

Здесь мы начали с определения переменных вне цикла each(). Это позволяет в каждом повторе использовать их значения.

Далее мы вычли 40 px из ширины элемента списка для определения максимальной ширины колонки комментариев. Эти 40 px корректируют левый отступ и отрицательную позицию, примененные нами выше.

Также устанавливаем maxCount для первого значения. От того, что мы изначально извлекали посты согласно количеству их комментариев, можно быть уверенными в том, что самое большое количество будет у первого пункта списка.

Наконец, давайте посчитаем ширину каждой колонки и анимируем переход:

Если вы предпочитаете применить стили к элементам без анимации, просто замените animate() на статический css().

Скачайте пример полностью.

5. Полностраничный слайдер

wine

Анимация скольжения – это интерактивный способ показать содержимое. Но JAX Vineyards поднимает стандартную галерею скольжения на следующий уровень путем анимации всей страницы. Давайте создадим подобный эффект при помощи jQuery.

Разметка и CSS

Начните с добавления разметки:

Мы устанавливаем основную разметку и обертки, нужные для анимации. Убедитесь, что full-slider-wrapper не заключен ни в какой элемент уже окна браузера— для успешного выполнения эффекта нам понадобится вся ширина браузера.

Теперь давайте добавим основного CSS для применения переполнения (overflow) и позиционирования панелей:

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

Также прикрепили к обернутому элементу overflow: hidden, что помешает колонкам прокрутки появляться, когда мы анимируем панели. Так как мы скрыли переполнение, то должны также определить min-width документу html. Это гарантирует, что содержимое получит колонки прокрутки, если окно браузера окажется слишком маленьким.

Наконец, мы использовали класс active, установленный в разметке, для показа первой панели.

Анимация jQuery

Давайте, пользуясь jQuery, построим взаимодействие. Начнем с определения некоторых переменных, а затем создадим функцию для управления анимацией скольжения в обоих направлениях:

Здесь наша функция slidePanel() принимает два аргумента: указатель панели, который передвигается в поле зрения, как мы и хотим, и направление скольжения (т.е. влево или вправо).

Хотя эта функция выглядит сложной, ее идея довольно проста. Мы определяем величину смещения, необходимую для скрывания панелей с левой и правой сторон. Чтобы вычислить эти значения, мы использовали jQuery offset() и ширину ползунка и окна. Эти смещения показывают значения позиции left, нужные для скрытия содержимого на другой стороне.

Далее, у нас есть переключатель, основанный на направлении анимации, который использует ранее определенные нами два значения.

Наконец мы запускаем анимацию при помощи функции jQuery animate(). Сдвигаем активную панель из виду, а затем убираем класс active, как только анимация завершается. Затем мы устанавливаем левую позицию новой панели вне экрана, прикрепляем класс active, чтобы она стала видимой, и перемещаем ее на место.

Построение элементов управления

Наша функция теперь выполняет анимацию, но нам все еще нужно построить элементы управления для ее использования.

Прикрепите элементы навигации к объекту ползунка slider, который мы ранее определили:

Можно было бы включить эту навигацию в изначальную разметку, но мы прикрепляем ее при помощи JavaScript по двум причинам: она гарантирует, что передвижение не появится, пока не будет загружен JavaScript, а это удерживает навигацию от отображения на случай, если JavaScript не включен.

Давайте определим стили навигации:

Здесь мы абсолютно позиционируем (absolute) навигацию сверху справа. Также употребляем прием CSS triangle (треугольник) для быстрого назначения стилей элементам управления.

Давайте прикрепим навигацию ползунка к ранее определенной нами функции slidePanel():

Этот фрагмент кода назначает события щелчка к перемещению влево и вправо. В каждом случае меняем значение currPanel в соответствии с направлением. Если новое значение выпадает из возможных панелей, переходим по циклу к другому концу комплекта. Наконец запускаем функцию slidePanel() при помощи новой панели и соответствующего направления.

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

Давайте соберем вместе весь код jQuery:

Скачайте пример полностью.

Заключительные мысли

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

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

JavaScript. БОЛЬШЕ ЧЕМ ПРОСТО САЙТ! Первый в рунете видеокурс по JavaScript!

Автор: Jon Raasch

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (12)

  1. kdmi

    Отличная подборка! Большое спасибо! Думаю многие из этих скриптов вскоре появятся в моих будущих проектах…

  2. Эдуард

    Очень интересная статья!
    С удовольствием ознакомлюсь с другими по этой теме!

  3. Игорь

    Отличные уроки!
    буду пробовать применять у себя на сайте strojminsk.narod.ru

  4. Отец Виктор

    Как всегда — просто супер информация! Огромное спасибо!!!

  5. Олег

    Спасибо, особенно понравился полностраничный слайдер.

  6. Николай

    Большое спасибо! Отличные уроки!

  7. Александр

    Отлично! Доходчиво и просто, нужно и полезно, бесплатно!

  8. Sabit

    Спасибо за уроки!!
    Можете сделать такие примеры в Drupal?

  9. Иван

    Вот рассылка так рассылка, полезная информация, да ещё и бесплатно :)

    PS:Андрей спасибо тебе огромное.

  10. Александр Моргун

    Очень неплохо! Доступно и убедительно!

  11. Евгений

    Спасибо!

  12. Васильков

    Все отлично, только на iPad такой слайдер будет тупить.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree