Имя:
Пароль:
Выслать пароль?  Регистрация
Google

Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Уроки веб дизайна.

Шаблоны wordpress new

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Коммерческие объявления:
Последние статьи:


Javascript в современном веб-дизайне

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

Две наиболее популярные среды Javascript

На сегодняшний день две наиболее используемые среды Javascript следующие:jQuery и MooTools. Посмотрите на опрос снизу:

Всплывающие изображения и зум







Lightbox

Вы наверняка знакомы с Lightbox - простой Javascript, используемы для наложения изображений на текущую страницу. Оригинальный Lightbox был выпущен в 2005. С тех пор было выпущено множество скриптов со схожими функциями, но использующие другие подходы и библиотеки Javascript.

Плагин lightBox для jQuery

Этот плагин аналогичен Lightbox JS, только написан на библиотеке jQuery.

Thickbox

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

Обратите внимание: Web Designer Wall использует Thickbox для отображения своих галерей изображений и демонстрационных уроков.

Highslide JS

Highslide JS служит той же цели, что и Thickbox, но еще имеет и эффект зума, что позволяет перетаскивать наложенное изображение.

FancyBox

FancyBox это плагин jQuery, который был разработан для того, чтобы заменить чрезмерно используемый Lightbox. У него схожие функции, но более красивые переходные эффекты (дизайн на манер Mac).

jQZoom

jQZoom позволяет отображать увеличенные изображения пиктограмм. Эта техника повсеместно используется на сайтах электронной коммерции (посмотрите для примера сайт Gap).

Галлереи и показ слайдов





Slideshow 2! для Mootools

Slideshow 2! Это класс javascript для Mootools 1.2, предназначенный для анимирования презентации изображений на вашем сайте.

SmoothGallery

Используя mootools v1.11, эта система слайдшоу и javascript-галлерей позволяет вам создавать простые и сглаженные (техника плавного перехода) галереи картинок, слайдшоу, афиши и много других классных примочек на ваш сайт.

jQuery Galleria

Galleria это галерея картинок javascript написанная в jQuery. Она подгружает изображения одно за другим из несортированного списка и отображает пиктограммы, когда загружается каждое изображение. Она может создавать различные пиктограммы, если вы выберите, масштабированные или немасштабированные, центрированные или обрезанные по размеру поля для пиктограмм, определенного в CSS.

Noobslide

NoobSlide это класс MooTools, который позволяет вам создавать слайдшоу и скользящие панели синхронизированные по таймеру. Посмотрите этот сайт для демонстрации.

Product Slider (демо)

Вот демонстрация виджета слайдера из UI библиотеки jQuery, используемого для создания слайдера с товарами, такого как на сайте Apple - Mac.

Carousel





jCarousel

jCarousel это плагин jQuery позволяющий контролировать список предметов в горизонтальном или вертикальном порядке. Предметы, которые могут быть как статичным содержимым в HTML, так и загруженным с использованием (или без) AJAX, можно прокручивать вперед и назад (с анимацией или без нее).

Компонент YUI Carousel

Компонент перелистывания управляет списком содержимого (элементы HTML LI внутри тега UL), которое можно отображать вертикально или горизонтально. Содержимое можно прокручивать вверх и вниз с или без использования анимации. Содержимое может относиться к статичному HTML содержимому или список предметов может быть создан динамически "на ходу" (с или без использования AJAX).

DynamicDrive - Перелистывающиеся слайдшоу

Carousel Slideshow это широко известный скрипт DHTML для показа изображений на вашем сайте. Он отображает изображения в 3D, на манеру карусели.

iCarousel - MooTools

iCarousel это бесплатный инструмент javascript с открытым исходным кодом для создания виджетов на манер карусели. Вы также можете использовать iCarousel в качестве бегущей новостной строки/скроллера или в качестве галереи изображений.

Панельный слайдер



Плагин Coda Slider

Coda Slider это плагин jQuery, который имитирует эффект слайда панелей, как на сайте Coda.

Урок jQuery по Coda Slide (демо)

Это урок с сайта jQuery For Designers, он покажет вам, как создавать панельный сладейр Coda.

Передвижные вкладки (демо)

Sliding Tabs это плагин mootools 1.11 с очень приятными эффектами. Это клон чего-то, что используется на сайте Panic Software's Coda, что в свою очередь очень похоже на виджет, используемый на сайте iTunes Music Store.

Вкладки




Вкладки jQuery UI

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

Урок по Query Tabs (демо)

Еще один отличный урок с сайта jQueryForDesigners.com покажет вам как создавать основную навигацию по вкладкам при помощи jQuery.

MooTabs

MooTabs это крошечный (3кб) класс для MooTools. Как следует из названия, его основная задача это помогать вам в создании простых вкладок навигации.

Урок по передвижным вкладкам (демо)

Урок, взятый с сайта Nettuts.com покажет вам как создавать передвижные вкладки при помощи jQuery.

Прокрутка до якоря




jQuery ScrollTo (демо)

Очень гибкий плагин jQuery, позволяющий вам создавать анимацию при прокрутке в любую позицию веб-страницы с настраиваемыми опциями стирания и скорости прокрутки.

SmoothScroll (демо)

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

Анимированная прокрутка при помощи jQuery

Урок Learning jQuery покажет вам, как создавать анимированный эффект "прокрутки до якоря", используя лишь пару строчек кода.

Строка-подсказка



jTips (демо)

Настраиваемый плагин jQuery, который отображает всплывающие строки-подсказки - или со статичным HTML или с содержимым AJAX.

Плагин jQuery Tooltip (демо)

Еще один неплохой плагин строки-подсказки.

Строка-подсказка и предварительный просмотр (демо)

Очень простой скрипт jQuery, который отображает строку-подсказку и предварительный просмотр изображения (Я использую его на Best Web Gallery).

Меню-гармошка




jQuery Accordion (демо)

Этот плагин создает меню гармошку. Он работает с вложенными списками, списками определений или просто с вложенными дивками.

Меню гармошка Apple.com Sidebar (демо)

Сайт jQueryForDesigner.com покажет вам, как создать слайдер-гармошку как на сайте Apple.

MooTools Accordion

Плагин Accordion может отлично выделит и покажет тот контент, который вам необходим.

Меню изображений MooTools

Image Menu это плагин MooTools который может создать горизонтальное меню-гармошку с изображениями.

Замена текста Flash и изображением




sIFR 3 (демо)

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

jQuery sIFR (демо)

Плагин jQuery, который выполнит для вас функции sIFR.

FLIR (demo)

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

Переключатель таблиц стилей CSS



A List Apart - Альтернативный стиль

Оригинальный переключатель таблиц стилей выполнен Полом Своденом (Paul Sowden). Хотите верьте, хотите нет, он был изобретен в 2001 (не такой уж и новый прием судя по всему).

Переключатель таблиц стилей на jQuery (демо)

Переключатель таблиц стилей на jQuery.

Переключатель таблиц стилей MooTools (демо)

Переключатель таблиц стилей CSS на MooTools

Стилизация форм




FancyForm - MooTools (демо)

Плагин MooTools, который заменяет установленные по умолчанию в браузере окошки метки и селективные кнопки на стилизованные.

PrettyCheckboxes - jQuery

То же, что и FancyForm, но с использованием библиотеки jQuery.

Плагин jQuery Selectbox (демо)

Простой плагин, позволяющий вам заменять формы выбора на формы с вашим стилем.

Стилизованные окошки-метки, селективные кнопки, списки выбора

Пример плагина формы ввода jQuery (демо)

Плагин jQuery, дающий пользователю подсказки, что вводить в поля ввода.

Unobtrusive Slider Control V2 (демо)

Этот скрипт позволяет вам создавать стилизованные управляющие элементы-движки привязанные к полям ввода.

Дополнительный материал по стилизации форм на сайте: Noupe.com/css/form-elements…

Валидация форм



jQuery Validate (демо)

Тот самый плагин, позволяющий создавать формы валидации и AJAX на стороне клиента.

MooTools Validate

Плагин валидации форм MooTools (похож на jQuery Validate).

JSValidate (демо)

JSValidate это валидатор форм, который использует аспекты среды prototype и scriptaculous, чтобы создавать простой и быстрый валидатор форм. С минимальной настройкой, ваши формы будут обрабатывать чистые данные за кратчайшее время.


Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»


Оцените, пожалуйста, эту статью:

  • Currently 3.75/5

Рейтинг: 3.8/5 (голосов: 4)

  Опубликовано: 14 мая 2009 | Просмотров: 35309 | Страница для печати  

Читать комментарии [32] на форуме.

Оставить комментарий
Ваше имя:

Проверка на человечность:

Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.


  О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте