Привлекательные экспериментальные плагины на JavaScript

Original author: Kevin Liew
  • Translation

Вступление


Я безумно люблю различные эксперименты на JS. Они словно позволяют заглянуть нам в будущее, и посмотреть, каким захватывающим и футуристичным оно будет. Когда вы будете просматривать приведенную подборку, вы наверняка вспомните про еще недавнего короля — Adobe Flash, а затем осознаете, насколько быстро CSS и JavaScript лишили его трона. Современные браузеры позволяют нам использовать множество различных эффектов и анимаций без сильных тормозов. Однако слово «экспериментальный» подразумевает ряд ограничений, как например некорректное отображение в некоторых браузерах (IE), кроме того, подобные плагины будут, скорее, отличным концептуальным дополнением для персональных страниц, а не для использования в больших проектах.

Meny


image

Meny — трехмерное меню, которое помимо своей визуальной притягательности еще и экономит место на экране. При наведении (или свайпе на тачскрине, что важно), меню «выезжает» с отличным эффектом.

Makisu


image

Отличное CSS 3D меню, вызывающее мгновенный вау-эффект у всех, кто пользуется им впервые.

Tilt Shift


image

Плагин для jQuery, который использует фильтры CSS3, для воспроизведения эффекта tilt-shift объективов, так любимого пользователями Instagram. Концепт работает только в Chrome и Safari 6.

Reveal


image

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

Forkit


image

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

Scroll Effects


image

Коллекция ну очень классных скролл-эффектов. Хотя стадия разработки значится как «эксперементальная», эффекты поддерживаются в Chrome/Safari/FF/iOS/Android 4.x.

Zoom


image

zoom.js — еще один сугубо экспериментальный плагин, который используется для приближения DOM элементов. Принцип использования напоминает мобильные браузеры — пользователь при помощи двойного тэпа приближает интересующий его элемент страницы.

Real Shadow


image

Плагин для jQuery, генерирующий фотореалистичные тени. Хотите вызвать вау-эффект на главной странице? Вам сюда. Обожаю этот эффект.

Loader


image

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

TurnJS


image

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

А какие подобные экспериментальные плагины используете вы?
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 35

    +1
    Отличная подборка, спасибо!
      +1
      Кое-что можно попробовать даже на вооружение взять, жаль Тильт шифт только под Хром и Сафари.
        +14
        Кстати, автор Real Shadow — хабраюзер Indamix.
          +5
          Как по мне, «программировать» на css + javascript различные спецэфекты не самое приятное времяпровождение. Браузеры разные, реализация может отличаться от версии к версии, синтаксис у css странный. Мне, как программисту, а не верстальщику, actionscript гораздо понятнее, флэш всё таки в большинстве случаев отображаться будет одинаково везде (не без исключений конечно).
          Что бы совсем не заминусовали, повторю, что это мнение программера, на практике ни флэш, ни css3+html5 я не использую.
            +25
            Скоро флэш будет отображаться одинаково нигде.
            +5
            Кстати похоже Forkit Тематические медиа используют на промо странице Хакатона
              0
              Makisu не работает в Chrome и Opera
                +1
                В хроме точно работает (версия 22)
                  0
                  17.0.963.79 m — не работает
                    +1
                    эм… откуда у вас такой старый хром? Вроде как интернет у вас есть, должен был бы обновиться.
                      +1
                      Очевидно человек не имеет прав на переустановку софта по правилам политики безопасности, заданной администратором. Не вариант?
                        0
                        Вариант, конечно, но несколько сферический. На тех компах, на которых были подобные политики, хром каким-то чудом обновлялся — наблюдал самолично. Поэтому и вопрос возник.
                          +2
                          Хром, ЕМНИП, ставится в каталог пользователя C:/Users/%username%/AppData/..., а не в Program Files. Таким образом прав на его обновление должно хватать всегда.
                            0
                            А если выпилить через фаервол? Да и в общем-то, можно дождаться пользователя Хорма 17.0.963.79 m и узнать, как ему это удается, господа Шерлоки Холмсы и доктора Ватсоны. )
                        0
                        старые сами не обновляются. После обновления заработало.
                  –1
                  Тени фотореалистичными я бы если честно не назвал. Вообще 2D тени скриптованные и слишком правильные, для реалистичности, с тенями нужно очень много работать в ручную.
                    +1
                    > тенями нужно очень много работать в ручную
                    Придираетесь и сами себе противоречите — тени правильные, но не реалистичные. Предлагаете для каждого объекта 360 состояний тени самому нарисовать? :)
                      –2
                      Речь шла фотореалистичности. Правильность и реалистичность это две разные вещи.
                      Предлагаете для каждого объекта 360 состояний тени самому нарисовать? :)
                      Вы вот сами включили сарказм, не до конца поняв высказывание.
                        0
                        Кстати там побольше 360 будет.
                      0
                      Meny роняет мой ФФ 13.0.1
                        +1
                        Обновитесь до 16го — в нем все ок.
                        +1
                        В TurnJS просится возможность вырвать страницу (сохранить как..) или загнуть уголок (в избранное) :-))
                          +2
                          Вырвать и перетащить на иконку принтера!
                          +2
                          IE 10. Нет в одном плагине в поддерживаемых, но работает все кроме Real shadow. При этом все работает бодро, без тормозов. Да, в метро режиме.
                            0
                            Заголовок-то исправили бы.

                            Экскременты через Е пишется, а эксперименты — уж через И
                              0
                              извините, был взволнован
                            0
                            Узнаю перевод с первого взгляда на название топика. Он содержит слова «превосходный», «привлекательный», «восхитительный» или какое нибудь числительное: 1500 способов, 15 примеров.
                              +4
                              Здорово! А я обычно узнаю переводы по плашке «Перевод»!
                              +1
                              С тилт-шифтом нужно еще играть, и прикручивать различные префиксы для кроссбраузерности.
                                +1
                                жаль turnjs платный
                                  +1
                                  Супер, пробуем!
                                    0
                                    Flash сам себя убил, не предвидя развитие поисковиков и возможность индексации flash-контента.
                                      0
                                      Открою секрет, у меня флеш-проекты индексируются в поисковниках.
                                      –1
                                      На TurnJS можно уже наезжать. Apple запатентовала перелистывание.

                                      Only users with full accounts can post comments. Log in, please.