Впечатляющие анимационные эффекты

[vburlak]

Ищу челюсть под столом… Нет слов)

[Cresh]

Будьте осторожны, моя там-же.

[blink]

Число добавлений в избранное зашкаливает :)

[StopKran]

Это всё очень круто, но jQuery сча не в моде, всё внимание уделено html 5. Кто в курсе можно всё тоже самое на html 5 делать? Хотя пользователю обычно до лампочки на чём оно сделано — главное чтобы работало.

[Serator]

HTML5 — это по сути js+css+(x)html.

[phasma]

Вот только количество пользователей IE

[phasma]

меньше 9 версии

[phasma]

В Европе.

[Vetal4eg]

StopKran, отоно как, а мужики то не знают (:

[Amenothis]

«Как лодку назовешь, так она и поплывет» ©

[WilliamKidd]

LOL

[XaBoK]

Большинство эффектов действительно можно сделать в css3 + events. Даже не прибегая к использованию canvas.
На данный момент такие возможности есть только у Chrome, Safari и ночных сборок Firefox4 — те что поддерживают css animation. Допустим создавая сайт для iPhone / Android можно смело использовать -webkit-keyframes и -webkit-animation, но mask всё ещё не работает.

[cream_brule]

вы вырвали это изречение из контекста и совсем не представляете что оно означает раз тут же задаете вопрос. jquery — это огромная облегчалка работы с javascript и я буду использовать его даже в html 5, т.к. пока кол-во пользователей, браузеры которых поддерживают html 5 еще очень мало. а писать что-то только на html 5 и гордится тем какой ты ниипаца перец пишешь на html 5 — не есть хорошо, так как твою писанину увидят максимум 20% пользователей.

[va1n]

Широкомасштабная навигация впечатлила…

[SMiX]

Да, почему-то до сих пор такие сайты делаются исключительно на флеше.

[EKCTPEMICT]

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

[SMiX]

Второй и третий аргументы очень сомнительны )

[EKCTPEMICT]

Количество сайтов со сходной динамикой элементов на флэш и js только недавно начали сравниваться. Еще недавно сайты подобные 2advanced считались верхом мастерства и недостижимым пределом для js+css. Сейчас я в этом не уверен…

[webrover]

основных причин две: тормознутость яваскрипта и, самое главное.
обратите внимание на пузырьчатую навигацию (http://tympanus.net/Tutorials/BubbleNavigation/) шарики подрагивают при резайзе. это следствие того, что изменяется позиция и размеры — браузер не совсем точно отображает это из за ошибок округления — хтмл не знает что такое 0.5пиксела. Во флеше есть антиалиасинг, сглаживание другими словами. на JS сделать его практически нереально, поэтому выглядит любая анимация, где есть перемещение html оъектов, как правило ужасно.

[Tomcat]

И ещё, я думаю, на Flash'е гораздо проще и быстрее все эти красивости реализовать. По собственному опыту: время разработки на флэше и JS различается в разы.

[Averrin]

Полвину видел еще несколько лет назад, но в целом, да, очень впечатлающие примеры.
Лично я вообще всячески за то, чтобы html шел на десктоп — я люблю красивые и стильные приложения. В сети же, к сожалению, до сих пор много устаревших браузеров и тонких каналов, которые часто мешают развернуться фантазии=(

[Xab]

здорово

[Gantz]

Практически все вышеперечисленное уже видел и иногда использовал в своих проектах, кроме Circulate. Впечатлило, забираю. Спасибо.

[Meliborn]

Пора бы завести раздел с красивостями такого рода, думаю будет очень полезно для проектов :)

[kirilltsarenko]

а зачем запускать элементы страницы по окружности?

[Mezomish]

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

А в браузерах, незнакомых с CSS3, будет навигация на квадратах?

[xostik]

Нет, там применяются изображение кругов, а не скругление с помощью CSS3. Поэтому там все будет нормально.

[wixus]

А где awesome?

[pxx]

Wow, double rainbow!!!

[SMiX]

Очень удивился, когда посмотрел исходники первого примера(лупа).

[NICHTO]

Использую на своем сайте выпадающую панель входа. Замечательная вещь. И стильно и вес не большой.

[NICHTO]

Ну если не указать что это панель входа, то да. А если же все по человечески сделать, то все будет понятно. Да и практика говорит о том, что кроме меня об этом знают все, кто умеет читать :)

[Vufer]

Согласно опросу проведенному mail.ru выяснилось, что 100% россиян имеют доступ к интернету… :)

[lasthero]

Все молча добавляют в избранное.

[dizelbox]

Супер, я впечатлен.

[UglyKid]

Flip box рулит!
Сенкью! )

[WilliamKidd]

А сейчас нельзя сделать море безвкусных сайтов на чистом html+js?

[Incole]

Можно, просто проще было сделать обычный фиговый сай (:

[Garg0t]

Вы так говорите, будто html+js — это что-то плохое.

[yakovis]

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

[Tremor]

красивые примеры, правда не все примеры используют jquery

[G0ran]

потрясающе! добавил с избранное, думаю некоторые представленные здесь решения использовать в создании сайта

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

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

Автору респект огромный!

[Andchir]

icarousel — Mootools
ImageFlow — без фреймворка
По-моему первое предложение в статье не совсем корректное. Есть много других JS-фреймворков кроме jQuery, на которых тоже создаются эффектные вещи. Хотя, возможно, jQuery лидер на данный момент.

[Mithgol]

Не «возможно», а точно. (На Хабрахабре даже публиковали статистику использования популярных frameworks, но так ужасно давно, что ужé нипочём не найду. И jQuery лидировал.)

[Kakysha]

Могу показать вам свой ImageFlow на jQuery (делал по примеру, что в статье), только без ползунка, пролистывание круговое по клику.

[Andchir]

Думаю это хорошая тема для отдельного поста в данном блоге)

[IlVin]

По-моему в статье не хватает пары ссылок:
jquery.com/ — официальный сайт jQuery
plugins.jquery.com/ — плагины на официальном сайте

[XeNum]

Для сайта школьного кружка «Сделай сайт своими руками» нужно непременно добавить.

[bakalek]

по-моему большинство отсюда: tympanus.net/Tutorials/

[WilliamKidd]

Ай-ай-ай, нехороший вы человек.

[nekt]

<сарказм>
Да-да. Давайте все дружно скажем спасибо jQuery и вознеем хвалу его разработчикам. Если бы не они, мы бы ни за что не получили ни css3 ни html5 ни даже javascript. Все эти замечательные вещи появились благодаря jQuery.
</сарказм>

Спасибо за подборочку. Будет где черпать вдохновение :)

[sklazer]

JQuery — очень перспективно. Порой отличная замена flash-объектам.
Однозначно статью в закладки для применения в следующих проектах.

[BBird]

Да, красиво! Но ничего сверхъестественного.

[rukeba]

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

А такая возможность была и до jquery, на чистом javascript. jquery просто упрощает.
И половина всей этой «красоты» грустно не работает в IE.

[xattabych]

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

[xostik]

Этот топик имеет тип перевода, и в плашке с итоговой инфой (там где рейтинг, автор и.т.д.) указан автор оригинала — Siva Kumar. Если кликнуть по нему, то окажитесь как раз на той странице, которую вы указали.

[Aquahawk]

Тип топика — перевод. Внизу стандартным для хабра способом указана ссылка на оригинал, именно так которую дали вы.

[xattabych]

пардон, давно меня не было на хабре. Виноват что низнал о таком типе топиков. Раньше с копипастами было по строже. Щас как перевод статьи. Удобненько :)

[XeNum]

Ждем новый тип топиков — Рерайт.

[Zerkella]

Все это отлично на демо-страничке, пока не доходит до практического применения.

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

[Kakysha]

А для чего вам своя голова? Ваш сайт, ваше желание иметь все то же самое у себя, ваши руки, так и переделывайте все это под себя. Благо это JS, код весь у вас перед глазами.

[Zerkella]

Хм, и с выходом очередного апдейта снова разбираться и переделывать?

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

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

[XeNum]

Еще некоторые js-слайдеры бывают тормозят получше всякого флэша.

[Terion]

что именно там вам непонятно?
там все очень просто (как и во всех примерах), могу подсказать.

(вот если бы первый пример работал в ИЕ — тогда я бы впечатлился. а так… там все реализовывается достаточно просто, хотя идеи хорошие, да)

[Terion]

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

[Terion]

это называется WebGL и работает в ночных сборках вэбкита/хрома и будет (вроде) работать в фф4.
до массового распространения пока далеко