Awebdesign's Blog

Tomorrow World (Google Zoo)

Проект был сделан для одного из самых узнаваемых фестивалей электронной музыки Tomorrow Land компанией Jam3 совместно с Google. Вся анимация осуществлена на основе Web GL. Это программная библиотека, которая позволяет создавать 3D-графику с помощью ява-скриптов. То есть все, что вы видите — исполняемые скрипты, имитация трехмерных объектов, которые нарисованы полигонами прямиком на HTML5 и ява-скриптах.

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

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

2,45 миллиона зрителей были вовлечены в действие течение трех дней.

jam3

jam32

jam33

Реклама

Создание сайта в Awebdesign.ru — сайт для строительной компании

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

Адаптивная верстка, кроссбраузерный, кроссплатформенный сайт.

На сайте используется три шаблона.

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

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

На главной странице — jQuery-CSS3-анимация (при наведение на кубики с ремонтами, они увеличиваются и меняют прозрачность).

Был разработан также логотип и визитки, то есть полный бренд-пакет, айдентика.

Чтобы заказать сайт или редизайн — напишите на riparto@gmail.com.

Портфолио здесь: http://awebdesign.ru.


tenhands

tenhands2

tenhands3

tenhands4


tenhands5

tenhands6

Интеграция Bootstrap в двухуровневое меню Bitrix

Недавно возникла потребность Бутстрап-верстку интегрировать в Битрикс-сайт. Естесственно — самая главная головная боль — многоуровневое верхнее меню. Оказалось, «забутстрапить» верхнее меню довольно просто. То есть, как известно — сначала копируем шаблон компонента меню horizontal_multilevel, и потом вместо того кода, который есть, вставляем приведенный ниже. Кто кодирует локально — этот файл будет у вас находится по следующему пути: bitrix/templates/название_шаблона/components/bitrix/menu/horizontal_multilevel_ваше_название_копии_шаблона/template.php.

Внимание! Использован не Bootstrap Twitter, а вот этот Bootstrap getbootstrap.com. Соответственно, для работы выпадающего меню необходимо подключить не только bootstrap.min.css, но и bootstrap.min.js.

ДЕМО: kp-ra.org

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

Ну, наконец код:

Продолжение статьи здесь.

 

Сайт AWEBDESIGN.RU для фирмы AKU — итальянская обувь ручной работы

aku

aku2

aku3

aku4

aku5

aku6

Автор идеи, дизайн сайта — Виктория Шидловская

Технологии: HTML5, CSS3, jQuery, кроссплатформенный, кроссбраузерный сайт, респонсив-дизайн (под любую ширину экрана любого устройства — десктопа, ноутбука, планшета или телефона)

— Выдающаяся верстка HTML с помощью jQuery — содержимое всех страниц реорганизуется при изменении ширины экрана (попробуйте сами изменить окно браузера), при этом ни одна страница никогда не имеет «полей», то есть весь сайт сверстан на 100% ширины и высоты (!) окна просмотра;

— Сложный слайдер, который подгоняет размеры ботинок и надписей под размер монитора;

— На странице «История бренда» фоновое видео с отдельно разработанной панелью его управления;

— На странице «Технологии» реализован плавный скролл по пунктам меню;

— В галерее фотографий используется плагин Wookmark, который явялется основой сайта Pinterest;

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

JAM 3

Косметика ручной работы Lush

Сухой джин Rogue Society

%d такие блоггеры, как: