Пользователь
0,0
рейтинг
20 сентября 2010 в 21:13

Разработка → Впечатляющие анимационные эффекты перевод

С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash. В данной статье представлено несколько ярких примеров того, каких потрясающих результатов можно достичь, используя стандартные средства браузера и свое воображение.


Эффект увеличительного стекла




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


Aviaslider




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


Широкомасштабная навигация




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


Слайдшоу больших изображений




Посмотреть в действии


Навигация, основанная на кругах




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


Выпадающая панель входа на сайт




Посмотреть в действии
Узнать больше


Circulate




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


Flip box




Плагин Flip позволяет переворачивать элементы так, как будто это карточки.
Посмотреть в действии


Hovering gallery




Неформальная галерея изображений. Предпросмотр содержимого представляет из себя группу разбросанных фотографий, сделанных на фотоаппарат полароид.
Посмотреть в действии


icarousel




Простой, но очень приятный слайдер изображений.
Посмотреть в действии


Imageflow




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


Interactive picture




Очень интересный способ сделать интерактивный каталог товаров.
Посмотреть в действии


Jqfancy transitions




Слайдер с интересными режимами перелистывания.
Посмотреть в действии


Photo shoot




Позволяет делать снимки отдельных частей изображения на странице. Нажмите кнопкой мыши на нужную часть изображения и увидите результат на экране.
Посмотреть в действии


Quick sand




Плагин Quicksand позволит вам сортировать и фильтровать набор элементов, используя для этого очень качественные эффекты.
Посмотреть в действии


Slideout context tips




Этот плагин будет очень полезен для создания детального описания сложных объектов и интерактивных туров, когда требуется, занимая как можно меньше места предоставить большое количество информации.
Посмотреть в действии


Sliding boxes




Плагин Sliding boxes поможет сделать необычную динамичную галерею изображений с заголовками к ним.
Посмотреть в действии


zoomer gallery




Галерея изображений, элементы которой будут весело выскакивать вперед при наведении курсора на них.
Посмотреть в действии
Перевод: Siva Kumar
Константин @xostik
карма
70,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (78)

  • +5
    Ищу челюсть под столом… Нет слов)
    • +1
      Будьте осторожны, моя там-же.
    • +1
      Число добавлений в избранное зашкаливает :)
  • –90
    Это всё очень круто, но jQuery сча не в моде, всё внимание уделено html 5. Кто в курсе можно всё тоже самое на html 5 делать? Хотя пользователю обычно до лампочки на чём оно сделано — главное чтобы работало.
    • +8
      HTML5 — это по сути js+css+(x)html.
    • +2
      Вот только количество пользователей IE
      • +2
        меньше 9 версии
        • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          В Европе.
    • +20
      StopKran, отоно как, а мужики то не знают (:
      • +6
        Ник у него соответствующий :)
        • 0
          «Как лодку назовешь, так она и поплывет» ©
    • +4
      LOL
    • 0
      Большинство эффектов действительно можно сделать в css3 + events. Даже не прибегая к использованию canvas.
      На данный момент такие возможности есть только у Chrome, Safari и ночных сборок Firefox4 — те что поддерживают css animation. Допустим создавая сайт для iPhone / Android можно смело использовать -webkit-keyframes и -webkit-animation, но mask всё ещё не работает.
    • 0
      вы вырвали это изречение из контекста и совсем не представляете что оно означает раз тут же задаете вопрос. jquery — это огромная облегчалка работы с javascript и я буду использовать его даже в html 5, т.к. пока кол-во пользователей, браузеры которых поддерживают html 5 еще очень мало. а писать что-то только на html 5 и гордится тем какой ты ниипаца перец пишешь на html 5 — не есть хорошо, так как твою писанину увидят максимум 20% пользователей.
  • +3
    Широкомасштабная навигация впечатлила…
    • +1
      Да, почему-то до сих пор такие сайты делаются исключительно на флеше.
      • +1
        Думаю, основные причины: Flash начал использоваться раньше, в нем бОльше возможностей для интерактива, он кроссбраузерный и, наверняка, традиции.
        Думаю, он со временем подвинется под натиском прогрессивных разработчиков радеющих за красивые семантические сайты.
        • 0
          Второй и третий аргументы очень сомнительны )
          • +1
            Количество сайтов со сходной динамикой элементов на флэш и js только недавно начали сравниваться. Еще недавно сайты подобные 2advanced считались верхом мастерства и недостижимым пределом для js+css. Сейчас я в этом не уверен…
            • 0
              основных причин две: тормознутость яваскрипта и, самое главное.
              обратите внимание на пузырьчатую навигацию (http://tympanus.net/Tutorials/BubbleNavigation/) шарики подрагивают при резайзе. это следствие того, что изменяется позиция и размеры — браузер не совсем точно отображает это из за ошибок округления — хтмл не знает что такое 0.5пиксела. Во флеше есть антиалиасинг, сглаживание другими словами. на JS сделать его практически нереально, поэтому выглядит любая анимация, где есть перемещение html оъектов, как правило ужасно.
        • +1
          И ещё, я думаю, на Flash'е гораздо проще и быстрее все эти красивости реализовать. По собственному опыту: время разработки на флэше и JS различается в разы.
  • +9
    Полвину видел еще несколько лет назад, но в целом, да, очень впечатлающие примеры.
    Лично я вообще всячески за то, чтобы html шел на десктоп — я люблю красивые и стильные приложения. В сети же, к сожалению, до сих пор много устаревших браузеров и тонких каналов, которые часто мешают развернуться фантазии=(
  • 0
    здорово
  • 0
    Практически все вышеперечисленное уже видел и иногда использовал в своих проектах, кроме Circulate. Впечатлило, забираю. Спасибо.
  • +5
    Пора бы завести раздел с красивостями такого рода, думаю будет очень полезно для проектов :)
  • +3
    а зачем запускать элементы страницы по окружности?
  • +2
    >Плагин Bubble Navigation позволяет сделать динамичную навигацию, построенную исключительно на кругах.

    А в браузерах, незнакомых с CSS3, будет навигация на квадратах?
    • 0
      Нет, там применяются изображение кругов, а не скругление с помощью CSS3. Поэтому там все будет нормально.
  • +2
    А где awesome?
    • 0
      Wow, double rainbow!!!
  • 0
    Очень удивился, когда посмотрел исходники первого примера(лупа).
  • 0
    Использую на своем сайте выпадающую панель входа. Замечательная вещь. И стильно и вес не большой.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Ну если не указать что это панель входа, то да. А если же все по человечески сделать, то все будет понятно. Да и практика говорит о том, что кроме меня об этом знают все, кто умеет читать :)
        • +2
          Согласно опросу проведенному mail.ru выяснилось, что 100% россиян имеют доступ к интернету… :)
  • +12
    Все молча добавляют в избранное.
  • +1
    Супер, я впечатлен.
  • 0
    Flip box рулит!
    Сенкью! )
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      А сейчас нельзя сделать море безвкусных сайтов на чистом html+js?
      • +1
        Можно, просто проще было сделать обычный фиговый сай (:
    • +5
      Вы так говорите, будто html+js — это что-то плохое.
    • +1
      ну хоть ссылку можно будет в новом табе открыть, так что в любом случае импрувмент
  • +1
    красивые примеры, правда не все примеры используют jquery
  • +1
    потрясающе! добавил с избранное, думаю некоторые представленные здесь решения использовать в создании сайта

    очень понравился Aviaslider, Slideout context tips, Sliding boxes

    сижу вот и прикидываю: а куда бы это вставить

    Автору респект огромный!
  • +4
    icarousel — Mootools
    ImageFlow — без фреймворка
    По-моему первое предложение в статье не совсем корректное. Есть много других JS-фреймворков кроме jQuery, на которых тоже создаются эффектные вещи. Хотя, возможно, jQuery лидер на данный момент.
    • +3
      Не «возможно», а точно. (На Хабрахабре даже публиковали статистику использования популярных frameworks, но так ужасно давно, что ужé нипочём не найду. И jQuery лидировал.)
    • +1
      Могу показать вам свой ImageFlow на jQuery (делал по примеру, что в статье), только без ползунка, пролистывание круговое по клику.
      • +1
        Думаю это хорошая тема для отдельного поста в данном блоге)
  • –2
    По-моему в статье не хватает пары ссылок:
    jquery.com/ — официальный сайт jQuery
    plugins.jquery.com/ — плагины на официальном сайте
    • 0
      Для сайта школьного кружка «Сделай сайт своими руками» нужно непременно добавить.
  • 0
    по-моему большинство отсюда: tympanus.net/Tutorials/
  • –11
    Вот ещё как пример, очень мне сайт нравится, а главное, совсем без флеша: max32max.ru
    • +2
      Ай-ай-ай, нехороший вы человек.
      • –2
        что?
      • –1
        т.е. обосновать свои слова и сливы [censored] никто из вас не может? тупо анонимно тыкать дефис в [censored] — весь ваш удел, господа оргазматоры от тыкания дефиса в [censored]?
  • –4
    <сарказм>
    Да-да. Давайте все дружно скажем спасибо jQuery и вознеем хвалу его разработчикам. Если бы не они, мы бы ни за что не получили ни css3 ни html5 ни даже javascript. Все эти замечательные вещи появились благодаря jQuery.
    </сарказм>

    Спасибо за подборочку. Будет где черпать вдохновение :)
  • –2
    JQuery — очень перспективно. Порой отличная замена flash-объектам.
    Однозначно статью в закладки для применения в следующих проектах.
  • +4
    Да, красиво! Но ничего сверхъестественного.
  • +2
    С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash.


    А такая возможность была и до jquery, на чистом javascript. jquery просто упрощает.
    И половина всей этой «красоты» грустно не работает в IE.
  • –3
    При копипасте постов, для приличия могли бы указать источник
    • +1
      Этот топик имеет тип перевода, и в плашке с итоговой инфой (там где рейтинг, автор и.т.д.) указан автор оригинала — Siva Kumar. Если кликнуть по нему, то окажитесь как раз на той странице, которую вы указали.
    • +2
      Тип топика — перевод. Внизу стандартным для хабра способом указана ссылка на оригинал, именно так которую дали вы.
      • +1
        пардон, давно меня не было на хабре. Виноват что низнал о таком типе топиков. Раньше с копипастами было по строже. Щас как перевод статьи. Удобненько :)
        • –1
          Ждем новый тип топиков — Рерайт.
  • +2
    Все это отлично на демо-страничке, пока не доходит до практического применения.

    Попробуйте интегрировать что-то из перечисленного в ваш сайт — столкнетесь с кучей проблем — несовместимостями (разными) с разными браузерами, глюками на конкретных дизайнах со специфичным расположением элементов или их стилей, кучей конфликтов с css-стилями и вашими js-компонентами.
    • 0
      А для чего вам своя голова? Ваш сайт, ваше желание иметь все то же самое у себя, ваши руки, так и переделывайте все это под себя. Благо это JS, код весь у вас перед глазами.
      • 0
        Хм, и с выходом очередного апдейта снова разбираться и переделывать?

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

        Да и вообще — jquery хорош, но пока браузеры настолько отличаются, насколько сейчас, и нет эффективных способов обеспечить полную изоляцию, он не способен создать графическому приложению впечатление о том, что оно работает в вакууме.
    • 0
      Еще некоторые js-слайдеры бывают тормозят получше всякого флэша.
  • +1
    На самом деле удивило только фотографирование отдельных участков из большой фотки. Я даже пока не разобрал как оно сделано (видимо фаербаг закешил не ту картинку на «объективе» ).
    • 0
      что именно там вам непонятно?
      там все очень просто (как и во всех примерах), могу подсказать.

      (вот если бы первый пример работал в ИЕ — тогда я бы впечатлился. а так… там все реализовывается достаточно просто, хотя идеи хорошие, да)
      • 0
        У меня в кеше фаербага на «объективе» другая картинка (из примера с лупой). Я так понимаю, что принцип там тот же? А то меня неправильная картинка смутила :)

        По остальным примерам всё ясно как Божий день. С лупой вообще скучно.
        • 0
          да, тот же принцип.
          блюр за счет множественного наложения одной и той же картинки с прозрачностью и смещением
          • 0
            А блюр да, логично сделан :) Но тоже как-то тупо. Это я сужу по тому, что в начале двухтысячных занимался опенГЛ и даже тогда это было не проблемой, вроде бы как 10 лет прошло, можно было бы и внедрить уже подобного рода хардвар акселерейшн, но это видимо либо не надо, либо очень сложно (учитывая, что творят производители браузеров нынче).
            • 0
              это называется WebGL и работает в ночных сборках вэбкита/хрома и будет (вроде) работать в фф4.
              до массового распространения пока далеко
              • 0
                Да я целостно имел в виду :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.