Анимация на сайте. Javascript и Flash.

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

1. Гослото

Законодатели мод русского веб дизайна уже давно игнорируют технологию Flash и всё, что с ней связано. Сайт “Гослото” просто напичкан анимацией, выполненной с помощью языка javascript, хотя, на первый взгляд, это тот самый flash.

2. Vimeo

На сайте самого красивого видеохостинга “Vimeo” фоновые рисунки “летают” по мере прокрутки страницы. Вся эта красота тоже обходится без flash. Да и, наверное, нет другого способа, на не javascript, чтобы осуществить такую анимацию фона сайта.

3. Lionite

Также анимация фона, созданныя при помощи Javascript и популярного фреймворка к нему, JQuery.

4. Arnaud-k

Также красивая анимация фона, но реагирующая на движение курсора. Javascript, приправленный JQuery, опять же, творит чудеса.

5. Phpcli

Сайт этого php-фреймворка вообще заслуживает отдельного внимания. На это стоит посмотреть. Разумеется, никакого Flash’а.

Думаю, что эти 5 примеров отлично доказывают, что анимация на сайте может быть прекрасна, и без использования технологии flash. Но теперь возникает резонный вопрос: “Зачем? Нам и Flash нравится!”. Недостатков у технологии Flash несколько, в прочем, как и достоинств:

Начнем, пожалуй, с плохого. Недостатки:

• Сайт, сделанный на Flash, загружается в 2 – 10 раз дольше, чем обычный.
• Для того, чтобы юзер смог увидеть flash-сайт, он должен установить плагин себе на компьютер и обновлять его каждые несколько месяцев.
• Для разработки flash-сайта требуется дополнительное программное обеспечение.
• Поисковые системы не смогут проиндексировать текст flash-сайта.
• Flash-сайт, обычно, игнорирует все веб-стандарты. Текст, иногда, нельзя выделить и скопировать. Нельзя нажать в браузере кнопку “назад”, нельзя просто сохранить изображения, размещенное на flash-сайте.
• Анимированные flash-банеры заведомо игнорируются пользователями.

Существуют, разумеется, еще недостатки этой технологии, но эти я считаю основными.

Но, есть и достоинства:

• Flash – объекты, вставленные в обычную HTML – страницу, позволяют использовать любые шрифты.

Это, кстати, как мне кажется, очень интересный плюс технологии Flash. Например, на ваше любимом блоге, который вы запустили на потрясающей системе управления контентом “Wordpress”, можено легко установить интересные плагины, которые заменяют заголовок любого поста/статьи на flash-объект с текстом заголовка, но уже в другом, красивом, шрифте. Компания “Envato” использует эту возможность на многих своих проектах, например:

1. FreeLanceSwitch



Заголовки на этом популярном блоге великолепны.

2. Creattica



3. TheNetSetter



И опять крутотень с заголовками.

Итак, вернемся к плюсам технологии Flash:

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

Разумеется, у нахваленного мной языка Javascript, в контексте несложной анимации в веб-сайтах, тоже есть свои недостатки.

Некоторые недостатки Javascript-анимации:

• No-script. Да, есть ребята, которые беспокоятся о своей безопасности в интернете чуть больше, чем нужно.

Они отключают javascript в своих браузерах, и, следовательно, не увидят всю эту красивую анимацию. Да и черт с ними!

• Недостаточная скорость

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

Остается также добавить, что все прогрессивное интернет сообщество уже осознало преимущества Javascript перед flash в построении несложной анимации на сайтах. Но, пока остаются “консервативные” заказчика сайтов-визиток для своих компаний, у фрилансеров-флешеров будет высокооплачиваемая работа.

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

Поделиться с общественностью на Твиттере.