Несколько красивых эффектов на JavaScript
Четверг, 9 апреля 2009
Меня всегда больше интересовали различные визуальные возможности JavaScript, чем его «прямые обязанности». И в очередной раз, находя в сети эксперимент со зрительными js-эффектами, я старался его протестировать, применить в своих работах, или положить в закладки, до лучших времён.
Поэтому, поделюсь с вами некоторыми, еще не особо засвечеными интересными разработками с сайта piksite.com.
Итак, начну по-порядку. На сайте представлены три разработки, каждая из которых достойна особого внимания.
3D-карусель
Сейчас популярны различные 3D-эффекты, поэтому, фотогалерея Сarousel.us может прийтись по вкусу тем, кто хочет эффектно представить свои фото в Web. Живую демку можно посмотреть здесь. И пусть вас не пугает «дикая» скорость при движении мыши, её можно легко регулировать в настройках (файл config.php, параметры base и speed).
Скачать, посмотреть список доступных настроек и инструкцию по подключению, можно на этой странице.
mRotate
Скрипт mRotate позволяет вращать изображения на странице вокруг своей оси, при наведении мыши. Примерно так.
Скачать, настройки и установка здесь.
mParallax
В реализации, или внешнем виде эффекта mParallax, я лично не открыл для себя ничего нового, но от этого он не стал менее интересным. Если кто не в курсе, такой эффект состоит в том, что есть несколько слоёв с фоном, которые движутся с разными скоростями и в разных направлениях, в зависимости от ваших движений мышью. Как тут. При наличии фантазии, можно сделать что-нибудь очень даже интересное, например, как в шапке сайта dezignus.com.
Особое внимание заслуживает вот эта демка, где есть возможность центрировать хаотически движущиеся элементы с помощью ссылок.
Настройка, установка, скачать — всё здесь.
Думаю, что при наличии интересных идей для реализации, эти JavaScript-эффекты найдут себе достойное место на сайтах и в портфолио многих Web-дизайнеров.
Все вышеописанные скрипты, являются дополнениями к библиотеке MooTools, но любители и фанаты jQuery, могут найти там для себя ссылки на аналоги.
* * *
Сканер блогов:
Неплохая альтернатива, незагруженным или уже несуществующим картинкам на сайте с помощью jQuery. Подборка из 22 бесплатных инструментов для работы со шрифтами. В закладки любому дизайнеру. Как учиться дизайну?.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Несколько красивых эффектов на JavaScript
- добавьте статью в закладки:
* * *
Большое спасибо за эту статью!
Безумно полезные примеры))
Особенно mParallax, тем болле что я уже видел его на сайте одной игры по одноименному роману, только в исполнении Flash...
Очень полезно, в закладки, и постараться вспомнить при разработке нового проекта)
Статья супер! Автор спасибо, обязательно попробую у себя на блоге.
Интересные эффекты, особенно понравились карусель и параллакс.
Но всё таки хотелось бы задать вопрос немного не относящийся к данной статье. Мне понравилось слайд меню на вашем сайте. Попробовал зазобрать его по кусочкам дабы сделать такое на свой сайт, но так и не смог его настроить под нужный мне размер 930 в ширину и на 5, 7 и 10 пунктов меню, возникает странное дрожание размена меню в ширину. Есть ли где документация к этому меню как его настороить под свои нужды, желательно на русском но на английском тоже подойдёт.
Насколько я помню, в скрипте нужно настраивать не только ширину контейнера, но и ширину пунктов меню.
Насчет торможений и дрожаний — это же javascript, вы уверены, что браузеры могут обработать такую анимацию на среднестатистической машине пользователя?
Документации на русском не видел, поэтому кидаю линки на ангийском — www.phatfusion.net/imagemenu/ (mootools), plugins.jquery.com/project/jDrawer (jQuery).
Видел еще подобный плагин для WordPress, но ссылки не помню, поищите на wordpress.org.
Большое спасибо за материал ! Особо интересный случай и вид это mParallax.
Но а если допустим на стороне пользователе в браузере запрещено отображение Java-script как все будет выглядеть ? Можно ли задать альтернативный вариант отображения ?
При выключенном JavaScript мы получим просто статичную многослойную картинку.
Которой из этих воспользоваться для раздвижного меню? оО
Вот бы готовенький скрипт для «чайников» ... хоть бы на завтрак
Конечно красиво, но вот в чем практическое применение на сайте допустим эффекта вращения?
пишете интересно, дизайн у сайта клёвый... очень приятно находится у вас на блоге.(не сочтите за спам)
---------
если по делу...то мне очень понравилось как реализовано меню сверху...это с помощью какого скрипта?
@Диман, спасибо за благодарность.
Я уже не раз отвечал на вопрос про меню, например, в комментариях тут.
rotor, я так понимаю, что это секретный скрипт или вы его сам не знаете? )))
*я это ваше про меню
@Саня, в чём «секретность»? Уже несколько раз выкладывал ссылки на исходники меню, там же есть примеры и инструкции по подключению.
Может стоит просто попробовать подключить? Моя аська доступна, если будет время, отвечу на вопросы.
Классная подборка. Правда попробовал mRoatte — не работает в ie6. Хотя демо в этом ослике работает на ура. Продолжаю поиски подобного, но может более простого скрипта.
@Саня, в чём «секретность»? Уже несколько раз выкладывал ссылки на исходники меню, там же есть примеры и инструкции по подключению.
ТУ rotor — я эти ссылки все просмотрела в 4 глаза, там же все на английском ... и как пишет Dm1t, еще и не работает/
Ланнн, через неделю буду посвободнее и достану по аське, хотя чего же проще ... вам самому выложить скрипт у себя в блоге, народ оценит!!! (палец вверх... большой есссесна)
Очень интересные эффекты, думаю у себе на проекте сделать что то подобное.
Интересные визуальные возможности JavaScript, взял на вооружение. Спасибо!
Спасибо, очень полезная статья
Привет! ))) С Новым наступившим годом!
Вот тут нашла похожее меню, оно и в Опере работает на отлично ...
wdevblog.net.ru/assets/files/ImagesBox/7/
Привет. Спасибо.
Всё ещё проблемы с созданием такого меню? Я подумаю над туториалом ;)
Есть еще кое-что по поводу позиционирования, но я пойду в туда ... где карта )))
Кто может помочь с настройкой cu3er в wordpress?
Моя аська 4297603
Хорошие скрипты, спасибо. Скоро сделаю подборку в блоге из jQuery каруселей.
ссылки на 3D-карусель не работают??? Открывается непонятный сайт