Несколько красивых эффектов на JavaScript

Иллюстрация к статье «Несколько красивых эффектов на JavaScript»

Меня всегда больше интересовали различные визуальные возможности JavaScript, чем его «прямые обязанности». И в очередной раз, находя в сети эксперимент со зрительными js-эффектами, я старался его протестировать, применить в своих работах, или положить в закладки, до лучших времён.

Поэтому, поделюсь с вами некоторыми, еще не особо засвечеными интересными разработками с сайта piksite.com.

Итак, начну по-порядку. На сайте представлены три разработки, каждая из которых достойна особого внимания.

3D-карусель

Демо Carousel.us

Сейчас популярны различные 3D-эффекты, поэтому, фотогалерея Сarousel.us может прийтись по вкусу тем, кто хочет эффектно представить свои фото в Web. Живую демку можно посмотреть здесь. И пусть вас не пугает «дикая» скорость при движении мыши, её можно легко регулировать в настройках (файл config.php, параметры base и speed).

Скачать, посмотреть список доступных настроек и инструкцию по подключению, можно на этой странице.

mRotate

Демо mRotate

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

Скачать, настройки и установка здесь.

mParallax

Демо mParallax

В реализации, или внешнем виде эффекта mParallax, я лично не открыл для себя ничего нового, но от этого он не стал менее интересным. Если кто не в курсе, такой эффект состоит в том, что есть несколько слоёв с фоном, которые движутся с разными скоростями и в разных направлениях, в зависимости от ваших движений мышью. Как тут. При наличии фантазии, можно сделать что-нибудь очень даже интересное, например, как в шапке сайта dezignus.com.

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

Настройка, установка, скачать — всё здесь.

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

Все вышеописанные скрипты, являются дополнениями к библиотеке MooTools, но любители и фанаты jQuery, могут найти там для себя ссылки на аналоги.

* * *

Сканер блогов:

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

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 25

  1. Obfuscate, 09.04.2009 в 17:27

    Большое спасибо за эту статью!

    Безумно полезные примеры))

    Особенно mParallax, тем болле что я уже видел его на сайте одной игры по одноименному роману, только в исполнении Flash...

    Очень полезно, в закладки, и постараться вспомнить при разработке нового проекта)

    Ответить

  2. Hermod, 12.04.2009 в 19:40

    Статья супер! Автор спасибо, обязательно попробую у себя на блоге.

    Ответить

  3. AlexPh, 15.04.2009 в 1:59

    Интересные эффекты, особенно понравились карусель и параллакс.

    Но всё таки хотелось бы задать вопрос немного не относящийся к данной статье. Мне понравилось слайд меню на вашем сайте. Попробовал зазобрать его по кусочкам дабы сделать такое на свой сайт, но так и не смог его настроить под нужный мне размер 930 в ширину и на 5, 7 и 10 пунктов меню, возникает странное дрожание размена меню в ширину. Есть ли где документация к этому меню как его настороить под свои нужды, желательно на русском но на английском тоже подойдёт.

    Ответить

  4. rotor, 15.04.2009 в 17:27

    Насколько я помню, в скрипте нужно настраивать не только ширину контейнера, но и ширину пунктов меню.

    Насчет торможений и дрожаний — это же javascript, вы уверены, что браузеры могут обработать такую анимацию на среднестатистической машине пользователя?

    Документации на русском не видел, поэтому кидаю линки на ангийском — www.phatfusion.net/imagemenu/ (mootools), plugins.jquery.com/project/jDrawer (jQuery).

    Видел еще подобный плагин для WordPress, но ссылки не помню, поищите на wordpress.org.

    Ответить

  5. Олег, 01.05.2009 в 15:04

    Большое спасибо за материал ! Особо интересный случай и вид это mParallax.

    Но а если допустим на стороне пользователе в браузере запрещено отображение Java-script как все будет выглядеть ? Можно ли задать альтернативный вариант отображения ?

    Ответить

  6. rotor, 02.05.2009 в 12:20

    При выключенном JavaScript мы получим просто статичную многослойную картинку.

    Ответить

  7. Саня, 06.05.2009 в 21:33

    Которой из этих воспользоваться для раздвижного меню? оО

    Ответить

  8. Саня, 06.05.2009 в 21:51

    Вот бы готовенький скрипт для «чайников» ... хоть бы на завтрак

    Ответить

  9. PHP разработчик, 15.05.2009 в 10:12

    Конечно красиво, но вот в чем практическое применение на сайте допустим эффекта вращения?

    Ответить

  10. Диман, 18.05.2009 в 14:03

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

    ---------

    если по делу...то мне очень понравилось как реализовано меню сверху...это с помощью какого скрипта?

    Ответить

  11. rotor, 18.05.2009 в 22:58

    @Диман, спасибо за благодарность.

    Я уже не раз отвечал на вопрос про меню, например, в комментариях тут.

    Ответить

  12. Саня, 20.05.2009 в 17:20

    rotor, я так понимаю, что это секретный скрипт или вы его сам не знаете? )))

    *я это ваше про меню

    Ответить

  13. rotor, 20.05.2009 в 19:33

    @Саня, в чём «секретность»? Уже несколько раз выкладывал ссылки на исходники меню, там же есть примеры и инструкции по подключению.

    Может стоит просто попробовать подключить? Моя аська доступна, если будет время, отвечу на вопросы.

    Ответить

  14. Dm1t, 21.05.2009 в 8:34

    Классная подборка. Правда попробовал mRoatte — не работает в ie6. Хотя демо в этом ослике работает на ура. Продолжаю поиски подобного, но может более простого скрипта.

    Ответить

  15. Саня, 26.05.2009 в 17:31

    @Саня, в чём «секретность»? Уже несколько раз выкладывал ссылки на исходники меню, там же есть примеры и инструкции по подключению.

    ТУ rotor — я эти ссылки все просмотрела в 4 глаза, там же все на английском ... и как пишет Dm1t, еще и не работает/

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

    Ответить

  16. Сергей, 03.06.2009 в 8:04

    Очень интересные эффекты, думаю у себе на проекте сделать что то подобное.

    Ответить

  17. Игорь, 22.06.2009 в 13:43

    Интересные визуальные возможности JavaScript, взял на вооружение. Спасибо!

    Ответить

  18. Масленов.ру, 04.11.2009 в 8:34

    Спасибо, очень полезная статья

    Ответить

  19. Саня, 03.01.2010 в 23:38

    Привет! ))) С Новым наступившим годом!

    Вот тут нашла похожее меню, оно и в Опере работает на отлично ...

    wdevblog.net.ru/assets/files/ImagesBox/7/

    Ответить

    • rotor, 03.01.2010 в 23:47

      Привет. Спасибо.

      Всё ещё проблемы с созданием такого меню? Я подумаю над туториалом ;)

      Ответить

  20. Саня, 04.01.2010 в 16:57

    Есть еще кое-что по поводу позиционирования, но я пойду в туда ... где карта )))

    Ответить

  21. Nick, 25.03.2010 в 16:18

    Кто может помочь с настройкой cu3er в wordpress?

    Моя аська 4297603

    Ответить

  22. efimov, 17.07.2010 в 11:33

    Хорошие скрипты, спасибо. Скоро сделаю подборку в блоге из jQuery каруселей.

    Ответить

  23. Алексей, 02.09.2010 в 13:47

    ссылки на 3D-карусель не работают??? Открывается непонятный сайт

    Ответить

  24. Карил, 19.01.2011 в 22:40

    ссылки битые

    Ответить

Есть что сказать?