![]() |
---|
|
Качественная галерея на jQuery в стиле поларойда
Несколько лет назад был популярен фотоаппарат "Полароид", который делал моментальные снимки. Эти снимки были уже как бы оформлены в белую картонную рамочку. Это направление фотографии ушло в прошлое, а эффект оформления картинок в стиле "полароид" остался, и мы часто можем встретить его в дизайнерских работах. Сегодня мы как раз создадим галерею в таком стиле. Но ее особенностью будет то, что Вы сможете перетаскивать фотографии мышкой, класть их в любое место экрана, словно рассматриваете их у себя на столе. Нужно отметить, что этот эффект основан на сочетании двух мощных технологий: jQuery и CSS3 (CSS3 в этой галерее уже встроен в скрипт). К сожалению, CSS3 пока не является общепринятым стандартом, поэтому не все эффекты этой галереи будут работать в большинстве браузеров (а точнее не будет работать тень, т.к. именно она в данном случае основана на CSS3). На сегодняшний день полноценную поддержку CSS3 имеют только браузеры Safary и Google Chrome. В них эта галерея будет смотреться особенно эффектно. Еще одним замечанием будет то, что тестировать галерею на локальном компьютере необходимо при активном подключении к интернет, т.к. скрипт соединяется с сайтом google. Пример галереи Вы можете посмотреть здесь. Итак, начнем: Шаг 1. Скачаем картинки, используемые в галерее (или возьмем свои). Шаг 2. Скачаем и подключим необходимые для работы скрипты и файл таблицы стилей. <link rel="stylesheet" type="text/css" href="stylepolar.css"/> Шаг 3. В таблице стилей CSS изменим пути к фоновой картинке страницы и к фоновой картинке полароидной рамки. Если вы поместили картинки в корень, то ссылки будут выглядеть так: body { overflow:hidden; background-image:url(bg.jpg); } Шаг 4. Вставим картинки следующим образом: <div class="polaroid"> Галерея готова! Надеюсь, она привлечет внимание посетителей Вашего сайта, и они с интересом будут рассматривать Ваши картинки, перетаскивая их с места на место. Данный урок подготовлен для Вас командой сайта http://ruseller.com
Если хотите не упустить данный урок, добавьте его в закладки:
Рейтинг: ![]()
очень интересно реализованная галерея! Оставить комментарий: |
|
---|
|