3.2. Разработка анимированного меню

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

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

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

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

Для создания анимации с работающими ссылками есть всего три способа:

• используя Adobe Flash;

• средствами CSS;

• с помощью тега canvas в HTML5 и javascript.

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

На данный момент CSS 3D эффекты, входящие в стандарт CSS3, поддерживаются только в движке web-kit(браузеры SafariиGoogleChrome). Компания Mozilla объявила о собственной реализации 3D эффектов в браузере MozillaFirefox. Не смотря на то, что такие браузеры,как Opera иInternetExplorerCSS3 не поддерживают, было решено остановиться именно на втором способе реализации, поскольку планируется поддержка 3D эффектов в браузерах на аппаратном уровне. Использование же третьего способа реализации потребует затраты больших вычислительных мощностей.

WebKit — свободный движок для отображения веб-страниц, разработанный на основе кода библиотек KHTML и KJS.

Исходный код открыт на условиях LGPL, то есть любой из компонентов или все компоненты сразу, в неизменном или измененном виде, можно использовать в проектах любого назначения (в том числе, коммерческих) с одним условием: библиотеки или их производные должны быть опубликованы с открытым исходным кодом на условиях лицензии LGPL. WebKit входит в состав «публичных» фреймворков (динамических библиотек особой структуры), поставляющихся с каждой копией Mac OS X с июня 2003 года.На данный момент осуществляет наиболее полную поддержку HTML в соответствии с рекомендациями W3C.

Приложения, использующие WebKit

• Safari — веб-браузер для Mac OS X и Windows

• iCab — веб-браузер для Mac OS X

• Chromium — браузер с открытым исходным кодом

• GoogleChrome — веб-браузер компании Google, созданный на базе проекта Chromium

• CoolNovo — веб-браузер компании MapleStudios, расширяющий возможности GoogleChrome.

• SRWareIron — веб-браузер компании SRWare, выпущенный в связи с тем, что GoogleChrome отправляет компании Google сведения о пользователе.

• Рамблер Нихром — веб-браузер Рамблера.

• Яндекс Интернет — веб-браузер Яндекса.

• Интернет@mail.ru — веб-браузер Mail.ru (ранее Хром@mail.ru).

• Мобильные платформы для смартфонов и интернет-планшетов:

• AppleiOS — платформа для мобильных смартфонов и интернет-планшетов

• GoogleAndroid — платформа для смартфонов и интернет-планшетов

• HP webOS — платформа для смартфонов и интернет-планшетов

• SamsungBada — платформа для смартфонов

• Epiphany — веб-браузер для среды рабочего стола GNOME

• AdobeIntegratedRuntime (AIR) — платформо-независимая среда для запуска приложений

• Arora — веб-браузер, основанный на Qt 4

• BoltBrowser — веб-браузер на java для мобильных устройств

• Iris Browser — веб-браузердляWindows Mobile

• Dolphin — стандартный браузер в ОС Bada

• Konqueror — основанный на KHTML и WebKit веб-браузер и файловый менеджер, входящий в состав KDE 4

• Maxthon 3 — веб-браузер для Windows с возможностью переключения движка на Trident.

• Midori — веб-браузер, основанный на Gtk. Планируется включение в состав среды рабочего стола Xfce.

• NokiaSeries 60 browser — веб-браузер для мобильных телефонов Nokia S60

• OmniWeb — веб-браузер для Mac OS X

• QtWeb — веб-браузер для Windows, основанный на Qt

• rekonq — веб-браузер, основанный на NokiaQtDemoBrowser

• RockMelt — социальный браузер, поддерживающий синхронизацию с Facebook и Twitter

• Shiira — веб-браузер для Mac OS X

• Surf — простой веб-браузер

• Swift — веб-браузер для Windows

• Adium — IM клиент для Mac OS X

• qutIM — кроссплатформенный IM клиент

• Vacuum-IM — кроссплатформенный Jabber клиент, написанный на Qt

• Uzbl — веб-браузер для Unix-подобных систем с подключаемыми в виде скриптов интерфейсами, управляющими отображающей страницы программой.

• Steam — сервис цифровой дистрибуции компании Valve стал использовать движок WebKit вместо MS Trident, что позволило значительно увеличить производительность и улучшить безопасность работы, а также портировать программу на Mac OS X.

• Yahoo! Messenger — программа мгновенного обмена сообщениями, WebKit используется для отрисовки сообщений

• Luakit — минималистичный веб-браузер, напоминающий Firefoxсо включенным расширением Vimperator.

Использованные средства CSS

-webkit-perspective:

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

-webkit-perspective-origin:

Сначала нам нужно сообщит браузеру, что мы работаем с 3D пространством. Используем свойство perspective родительского элемента. Величина значения свойства perspective определяет, сколько пикселей формирует 3D объект. Маленькое значение сделает невыразительным 3D эффект.

-webkit-transition:

Применять свойство transition можно к фону, цвету, длине, размеру шрифта. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. Также использовать transition можно с любыми селекторами.

-webkit-transform 2s;

Используется для различных видов перемещения.

translateZ(100px);

Перемещает объект в глубь по оси z на определённое расстояние.

@-webkit-keyframesspin {

from { -webkit-transform: rotateY(0); }

to { -webkit-transform: rotateY(-360deg); }

-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);

Параметр scale(n) или scale(x,y) отвечает за масштабирование объекта, т.е. это даёт возможность либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.Для того чтобы повернуть объект против часовой стрелки, применяется отрицательное значение для rotate(ndeg).