Создание анимации для веб дизайна. Принципы анимации для веба. Создание анимированного изображения в Adobe Photoshop

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

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

Анимация в Сети: Краткая история

Давайте взглянем на то, как анимация в интернете достигла своего нынешнего уровня. В значительной степени все началось благодаря гифкам…

Gif-файлы появились еще в 1987 году. Так началась эпоха танцующих младенцев и других ужасов, которые лучше не вспоминать.
Тогда большинство людей еще и не задумывались над тем, как вставить анимацию на сайт . В основном они хотели привнести немного жизни в «тишину» статических веб-страниц.

Когда возможности файлов в формате gif были исчерпаны, людям потребовались новые способы добавления анимации на сайты. И звука!

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

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

Но к середине прошлого десятилетия в W3C уже работали над тем, чтобы включить анимацию в CSS . В 2009 году была выпущена первая спецификация CSS-анимации .

Сейчас для анимации на сайте HTML мы можем задействовать аппаратное ускорение для визуализации, сочетая CSS-анимацию с SVG-файлами , библиотеками JavaScript , расширить основные функциональные возможности анимации и многое другое.

Анимация больше не является диковинкой для веб-дизайнеров. В кино она стала основой для нового способа рассказа. Для нас она становится платформой для эффективного проектирования взаимодействий:

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

Типы веб-анимации

Недостаточно просто добавить анимацию для элементов веб-страницы и надеяться, что это автоматически повысит ее конверсию:

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

Начнем с того, что рассмотрим различные виды анимации, используемые в Сети.

Анимации элементов интерфейса

На мой взгляд, самый полезный вид 3d анимации для сайта . Она позволяет пользователям понять, что их действие было принято. Их клик стал катализатором, необходимым для того, чтобы что-то случилось: переход на другую страницу, открытие окна в сайдбаре или модального, отправка сообщения на электронную почту.

Это очень важно с учетом того, что плоский дизайн становится все более популярным в Сети. Люди должны видеть разницу между элементами интерфейса и просто графикой. Задавая для элементов управления простую анимацию при взаимодействии, мы даем пользователям четко понять эту разницу.

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

Анимация ожидания

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

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

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

Анимация повествования

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

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

Посмотреть пример

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

Два моих любимых примера на эту тему связаны с брендами, которые имеют большой опыт работы с подобными вещами: Apple и Sony . Страница, посвященная Mac Pro при прокрутке вниз, показывает, что находится под «капотом » этого устройства:

Посмотреть пример

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

Декоративная анимация

Посмотреть пример

Декоративная анимация для сайта должна быть полностью скрыта. Покажите ее после того, как люди последуют призыву к действию. Также можно включить небольшую анимацию, которая запускается только один раз, когда пользователь делает что-то конкретное. Например, наводит курсор мыши на что-то маленькое в шапке / подвале сайта.

Простой поиск в Google покажет, что есть несколько сайтов, на которых что-то происходит с помощью кода Konami. Другие ресурсы включают в себя известные пасхальные яйца Google , и один из них — photojojo.com :

Посмотреть пример

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

Анимация в рекламе

Добавьте звук, и вы почувствуете приступ ненависти к этой рекламе… это тоже рефлекторное действие.

Это почти неизбежно. Если нужно заставить людей смотреть на рекламные блоки, анимация — это отличный способ. Если бы анимированная реклама не работала, мы бы ее не использовали.

Но с подобной gif анимацией для сайта связана та же проблема, что и с декоративной: она отвлекает пользователя от его цели. В мире онлайн-продаж отвлечение внимания может быть подобно смерти.

Реализация анимации

Технические аспекты реализации имеют значение, но не зависимо от того, используете ли вы gif , видео, CSS , SVG или даже Flash , существуют принципы, которые более важны.

Производительность, производительность, производительность

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

У меня стоит видеокарта Nvidia GTX 750 TI , которая обошлась мне приблизительно в $200. И с ней-то анимация точно не должна проигрываться прерывисто. Но я все равно встречаю в Сети сайты, заходя на которые ловлю себя на мысли: «Марио работает быстрее, чем этот сайт «.

Теперь представьте себе, если бы кто-то зашел на такой сайт со слабенького планшета или смартфона. Этот пользователь никогда бы больше не имел дела с таким медленным сайтом. Если есть только два варианта: медленная анимация или никакой анимации, лучше оставить только голый интерфейс.

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

А теперь я дам небольшой технический совет: там, где можно задействовать аппаратное ускорение, CSS почти всегда лучше, чем JavaScript . Всякий раз, когда есть выбор, используйте анимацию на основе CSS , а JS применяйте в качестве запасного варианта.

Начните с малого

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

Большинство сайтов вообще не нуждается в какой-либо анимации кроме той, которая применяется, чтобы сделать использование элементов интерфейса «реальным » и естественным. Перед тем, как начать «разбрасывать » на своем сайте параллакс, как конфетти, спросите себя, улучшит ли это опыт взаимодействия пользователей.

В большинстве случаев ответ будет «нет «. Конечно, есть и исключения. Но в подавляющем большинстве лучше просто анимировать кнопки, создать скрытую, всплывающую панель навигации, а «адскую » анимацию вызывать уже после того, как пользователь заполнит и отправит контактную форму.

Продолжительность анимации должна быть небольшой

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

Представьте себе, как мы взаимодействуем с реальными объектами. Иногда мы двигаем их быстрее, иногда медленнее. Скорость, с которой мы взаимодействуем с объектом, может зависеть от его размера, цели, с которой мы с ним взаимодействуем. Но чаще всего мы берем вещи и передвигаем их довольно быстро.

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

Это особенно актуально для элементов, которые люди должны использовать по несколько раз. Любая анимация на сайте HTML теряет свою привлекательность, когда вынужден смотреть ее в десятый раз.

Качественная и уместная анимация веб-страниц радует глаз и помогает в работе. Это – одна из основ веб-дизайна наших дней. Взаимодействие пользователей с современными веб-сайтами серьёзно завязано именно на анимации. Она способна сообщать о неких состояниях страницы, направлять внимание. Анимация помогает пользователю увидеть результат его действий и может влиять на его поведение.

Когда анимация способна улучшить впечатления пользователя от работы со страницами? Что именно стоит «оживить» для того, чтобы взаимодействие с ресурсом стало бы более удобным, понятным, увлекательным?

Анимация и последовательности событий

Анимация при загрузке данных

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

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

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

Примечание: тут везде анимированные GIF-файлы, вставил в виде ссылок и выделил.

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

Анимация процессов и пошаговых операций

Анимация может показать выполнение некоей линейной последовательности действий, не зависящей от пользователя. Классическая полоса загрузки – самый распространённый пример.

Полоса загрузки для Aviasales. (

Анимацию можно использовать и для процессов, предусматривающих выполнение пользователем пошаговых операций.

Анимация может показать прохождение по шагам некоей последовательности действий. (

Анимация и каркасное отображение веб-страниц

Вариант каркасного отображение веб-страниц предусматривает наличие пространства, которое постепенно заполняется загружаемой информацией. Постепенное, не разорванное периодами «пустоты», наполнение страницы, даёт ощущение быстроты выполнения действий. Эту технику можно использовать на практически любом сайте вместе с ненавязчивой анимацией процесса загрузки, которая обеспечивает удержание внимания пользователя.

Каркасные экраны загружают элементы пользовательского интерфейса ещё до того, как будет полностью отображено содержимое страницы. (

Визуальная обратная связь

Анимированная реакция на действия пользователя

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

Анимация элементов управления для настольных и мобильных сайтов

Один из самых распространённых примеров визуальной обратной связи – анимация при наведении курсора на интерактивный элемент.

Когда пользователь не уверен в назначении элемента управления, он пытается навести на него курсор мыши. Анимация элемента при наведении курсора, на интуитивном уровне, сообщит пользователю о том, что с объектом можно взаимодействовать. (Источник: codepen)

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

Затенение указывает на то, что элемента можно коснуться для выполнения некоего действия. (

Привлечение внимания с помощью анимации

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

Вот, например, ввод данных в форму. Анимация отлично подойдёт для придания этому процессу новых качеств. На рисунке, приведённом ниже, форма отрицательно «качает головой» в ответ на попытку выполнения действия при незаполненных полях. Если всё введено верно, она вполне может одобрительно «кивнуть». Такая анимация позволяет пользователю мгновенно понять то, к каким результатам привело его действие.

Форма отрицательно «качает головой». (

Навигация

Переходы и взаимоотношения состояний

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

Анимацию можно использовать для того, чтобы сделать переходы между экранами приложения более очевидными. В итоге пользователь будет точно знать, где он был в начале действия, и где оказался после его завершения. (Источник: codyhouse)

Вот – пример с веб-сайта Brian Hoff Design. Когда пользователь щёлкает по круглой кнопке со стрелкой, большой блок меню появляется с правой стороны экрана. Благодаря анимации, меню будто выезжает из области, находящейся за пределами экрана. В результате во взаимодействии со страницей нет логических разрывов.

Анимация помогает связать воедино два состояния страницы

Плавное изменение состояний

Анимация переходов бесценна для указания смены состояний страницы. В статье «Умные переходы в UX-дизайне» Адриан Зумбруннен показал отличный пример того, как анимация может помочь пользователю оставаться в курсе того, где именно он находится, при щелчке по ссылке, которая ведёт к другому разделу той же самой страницы.

Просто сравните это с резким переходом, который ощущается как неестественный «скачок».

Внезапное изменение состояния выглядит ненатурально. Пользователю тяжело воспринимать подобное. (

Submit an Application Form

Set Up Your User ID and Password

International applicants may get access to their accounts after they apply for a User ID and a password using the link . Once you have submitted a form, an e-mail will be sent to the address you indicated during registration with your User ID and password. Please make sure уou have provided the correct e-mail address. Your User ID/password application will be considered within 72 hours (including weekends and public holidays).

Fill in the Form

Application Evaluation

IMPORTANT! Recognition procedure is mandatory for all foreign citizens applying to HSE and is offered free of charge. If you have a Russian high school/degree certificate issued by a Russian academic institution, you are still required to submit an application for recognition of academic credentials.

4. Apply for a Russian visa

If you have been admitted as a state-funded student (tuition waiver), your visa reference will be issued by the Ministry of Education and Science of the Russian Federation (MES), once HSE staff uploads all documents listed to the MES information system. The list of visa reference numbers will be published in your personal account in the Visa section. Normally visa references should be available in early August.

If you have been admitted to HSE as a fee-paying student, please submit an application to obtain a visa invitation via your personal account (Visa section). More details are available in your personal account.

Please note that citizens of the following counties DO NOT NEED a student visa to study at Russian educational institutions: Azerbaijan, Abkhazia, South Ossetia, Belarus, Kazakhstan, Kyrgyzstan, Moldova, Tajikistan, Ukraine, Armenia, and Uzbekistan.

If you are a citizen of Belarus, Armenia, Kyrgyzstan or Ukraine, you may use your national (internal) passport when crossing the Russian border. If you are a citizen of any other country, you must obtain a travel passport to enter Russia.

Russian nationals arriving in Russia must also show an ID (Russian travel passport for Russian citizens residing abroad). To enrol in HSE, you must also have your national (internal) passport readily available, even if you are residing abroad. Please make sure to make your plans in advance, since it may take up to 2 months to issue a national passport in Russia (if you don’t have a permanent registration and only have a temporary one).

5. Enrolment procedures for foreign applicants

To officially enrol in HSE and secure a place at an HSE dormitory, please visit us at the following address starting from August 20, 2019:

Room 330, 3rd floor, 11 Myasnitskaya Ulitsa.

Make sure you have the following documents with you:

Your passport + its copy + notarized translation of your passport into Russian (if applicable);

Original high school/degree certificate/diploma + its copy + a notarized translation of your high school/degree certificate/diploma into Russian (if applicable);

Migration card issued upon entry to Russia (at the airport or another border checkpoint) or a copy of your Russian visa;

IMPORTANT! In the migration card, please make sure to underline Education («учеба») as your purpose of visit.

4 photographs (on matt or glossy paper), size: 3×4cm;

Original of your medical certificate (must be dated no later than March 2019), and negative HIV test results. Please note that a medical certificate is valid for 6 months, and an HIV certificate is valid for 3 months.

Your voluntary health insurance policy (if available). You can purchase an insurance policy fromany insurance company of your choice or obtain one at our office. For your convenience from August 20 to August 31, representatives of 3 Russian insurance companies will be working on 11 Myasnitskaya Ulitsa.

Enrolment procedure includes the following steps

1. Submitting documents for enrolment to HSE.

2. Preparing documents to obtain a migration registration.

Please note that foreign students must register at their actual residence address:

If you are staying at an HSE dormitory, please contact the dormitory staff to get registered via a local migration office;

If you are staying at a rented apartment, please contact your landlord/landlady to get registered via a local migration office.

Please visit our office to for more details regarding the registration of students who are staying at rented apartments.

IMPORTANT! Citizens of the following countries may stay in the Russian Federation without registration for a fixed period of time only:

· citizens of Ukraine - 90 days;

· citizens of Belarus, Kazakhstan and Armenia - 30 days;

· citizens of Tajikistan - 15 days.

3. Dormitory check-in.

Dormitory places will be allocated via applicants’ personal accounts. You will get access to the Dormitory section in your personal account, once you’ve completed the Enrolment Consent and Recognition of Foreign Education and (or) Qualifications sections but no earlier than August 10. Therefore, by the time you visit us to submit your documents starting from August 20 , a place at the dormitory will have already been assigned to you.

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

Мы сделали подборку из 5 библиотек для создания анимации на web-сайтах, рассказав об их преимуществах, недостатках и сферах применения.

GreenSock Animation Platform

Но при этом для анимации HTML элементов tween.js совершенно не подходит - с этим справляются следующие два инструмента.

Move.js

Move.js - javascript-библиотека, позволяющая делать всё то же, что и tween.js, только с использованием CSS3 и HTML5 вместо Canvas. Она является не самой легкой (как для JS), но одной из самых популярных. Набор заранее заготовленных видов анимации (поворот, наклон, ротация и тд.) делает её также одной из самых легких в использовании.

Пример кода c использованием Move.js:

Move("#example-4 .box") .rotate(140) .end();

WOW.js + Animate.css

На самом деле это не настоящие библиотеки или фреймворки для анимации, по крайней мере в привычном понимании.

Animate.css - всего лишь CSS файл, в котором собраны несколько десятков правил, связанных с анимаций, а WOW.js - всего лишь маленький скрипт, запускающий эти анимации по мере прокрутки страницы.

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

Во-первых, решает легковесность. Всего 2 КБ и никаких зависимостей!

Во-вторых, wow.js и animate.css являются крайне простыми в использовании. Скорее всего, вам не придется написать ни строчки лишнего JS кода. Достаточно подключить эти два скрипта к странице и добавить к элементу, который нужно анимировать, пару css классов: класс wow и класс нужной нам анимации.

Теперь при загрузке страницы вместо статического отображения этот элемент будет красиво крутиться:

Для настройки анимации используются специальные data-атрибуты, например, data-wow-duration=»2s» задаст продолжительность кручения в 2 секунды.

Демо, более подробную документацию и полный список data-атрибутов можно найти на официальном сайте WOW.js , полный список классов анимации - на официальном сайте Animate.js.

Анимация средствами JQuery

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

В данную подборку вошли 50 веб-сайтов трёхмерной Flash-анимации , действительно выделившиеся на общем фоне, привлёкшие к себе небывалое внимание и получившие награды! Перед вами не просто очередной список – эти веб-сайты подскажут вам массу идей, ведь каждый из них – шедевр!

Этот сайт настолько бесподобен, что трудно описать словами! Очень красивая заставка, вслед за которой вам открываются шикарные образцы трёхмерной анимации на просто отличной веб-странице.

Классный веб-сайт с красивыми трёхмерными объектами и анимированными фрагментами. Каждую страницу украшают собственные трёхмерные "изюминки".

Восхитительный шедевр! Огромное трёхмерное пространство, на котором посредством анимации происходит действие игры. Отлично выполнены трёхмерные микшированные переходы для каждой страницы.

Простой, но очень красивый веб-сайт с трёхмерным меню и такими же переходами.

Симпатичный веб-сайт с великолепными трёхмерными воздушными шарами и потрясающей анимацией. Есть у него и ещё кое-что особенное – при отсутствии любых действий со стороны пользователя в течение некоторого времени, у человека-мотора кончается горючее, и он падает с неба – всё это в виде любопытного анимированного фрагмента. Этот сайт был отмечен наградой FWA как "лучший сайт дня".

Это ещё что? А это Coca Cola! Веб-сайт очень оригинальной конструкции, состоящий из множества отдельных под-сайтов, каждый из которых отличается от остальных своими оформлением, эскизом и анимацией.

Прекрасно выстроенный веб-сайт. Отличное трёхмерное подводное пространство. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Очень элегантный веб-сайт с трёхмерной графикой и анимацией. Трёхмерные переходы тоже потрясающие.

Бесподобное трёхмерное меню. Данное трёхмерное портфолио является отменным образцом стиля под названием "минимализм".

Хорошо выстроенный трёхмерный веб-сайт. Он не просто состоит из трёхмерных элементов, но и в целом, как бы, образует трёхмерное пространство, к тому же, почти все анимированные фрагменты тоже трёхмерные. Хорошая работа.

Прекрасный трёхмерный веб-сайт с отличными эффектами передачи объёма. Просто чудо. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Интересный веб-сайт на Flash-основе с восхитительной Flash-заставкой и массой трёхмерных элементов.

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

Прекрасный мультяшный веб-сайт. Трёхмерная планета в центре страницы, которую можно вращать с помощью перемещений мыши.

Красивый веб-сайт. Всё вокруг трёхмерное и очень чутко реагирующее на перемещения мыши.

Красивый и простой веб-сайт с трёхмерным объектом в середине страницы.

Прекрасно выстроенный веб-сайт. С отличной трёхмерной анимацией и межстраничными переходами. Здорово и то, что каждая страница управляется перемещениями мыши. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Веб-сайт социальной сети, где можно создать свой собственный неповторимый трёхмерный портрет. Замечательная идея, отлично воплощённая средствами трёхмерной обработки.

Симпатичная трёхмерная фото-галерея с прекрасно воспроизведённым отражением. Строго и просто.

Веб-сайт хорош на загляденье! Включите веб-камеру, и увидите, как все трёхмерные объекты повторяют ваши движения. А если у вас её нет, то веб-сайт просто будет реагировать на перемещения мыши.

Мультипликационный в оформлении, трёхмерный веб-сайт с мини-играми и всякой всячиной для детей. Очень тонкая работа, замечательное исполнение!

Образцовая работа! Прекрасное трёхмерное меню и анимированные фрагменты. Даже 4 варианта объёмного отображения меню на ваш выбор.

Безусловно классный веб-сайт с потрясающим отображением трёхмерности. Не менее шикарные трёхмерные отражения и эффекты, и, в довершение всего, мини-игра, спрятанная в глубине веб-сайта.

Простой в оформлении веб-сайт с трёхмерным меню навигации в виде планеты. Хороший пример применения библиотеки Papervision3D.

Отличное исполнение. Полностью трёхмерная конструкция. С одной страницы на другую переходишь, как из комнаты в комнату. Трёхмерная анимация высокого качества.

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

Очень интересный корпоративный веб-сайт с трёхмерной анимацией. Эскиз тоже сногсшибательный. Отличная работа.

Любопытный веб-сайт со множеством трёхмерных объектов, которые можно вращать.

Строгий и простой в оформлении веб-сайт с трёхмерной анимацией, прелесть!

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

Компактный веб-сайт с трёхмерными эффектами, который смотрится восхитительно. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Веб-сайт на Flash-основе, меню которого снабжено очень интересным трёхмерным эффектом. Красивые трёхмерные переходы.

Строгий и простой в оформлении трёхмерный веб-сайт. Очень грамотно сконструированный. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Подобие трёхмерной фильмотеки с красивыми трёхмерными переходами. Все анимированные фрагменты воспроизводятся очень плавно. Отличная работа.

Простой и строгий в оформлении трёхмерный веб-сайт.

Любопытный способ нанесения рисунков – помещайте их в центр звёздного неба! Шикарное трёхмерное пространство. Может послужить и милым маленьким подарком вашей подруге/другу (в смысле, ваш рисунок на нём) – ей/ему точно понравится. Веб-сайт отмечен наградой FWA как "лучший сайт дня".

Симпатичный веб-сайт с очень впечатляющим трёхмерным меню навигации. Просто нажмите кнопку "Просмотр" ("Browse") справа на странице, и увидите трёхмерное меню навигации.