Awebdesign's Blog

Reebok — стань человеком! Презентационный сайт.

Лендинг для BigGame — экипировка и снаряжение для охоты и рыбалки

Awebdesign.ru сдал в эксплуатацию сайт для отличной фирмы BigGame. На очереди — интернет-магазин, а пока что представляем вниманию заинтересованных два магазина и тир для стрельбы из лука!

На сайте реализована 3D-анимация силами CSS3 и HTML5. В шапке раскрывающиеся «створки» обложки и дисконтные карты соответствующего раздела, которые делают полный поворот при наведении мыши.

Сайт адаптивный, 100% экрана на любом устройстве.

Дизайн, программирование — Шидловская Виктория.

21

22

Айдентика для Fugue — софта, который занимается облачными технологиями

Разработка фирменного стиля (айдентика, брендинг) была проведена фирмой Sagmeister & Walsh.
Упор делали на смешение человеческого фактора и компьютерных технологий. Прекрасные линии якобы кисти при ближайшем рассмотрении оказываются творением векторных графических программ.

fuguewordmark02_0

fugueillustrations06_0

fuguerevised_0

fuguetee3_0

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

Портфолио арт-директора и дизайнера Сэма Дэллина

The portfolio site for art director/designer Sam Dallyn (http://www.samdallyn.co.uk/) uses a minimal approach with white space and a restrained use of black and gold to tie it all together.

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

samdallyn

samdallyn2

Интеграция 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

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

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

<?if (!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
<ul class=»nav navbar-nav»>
<?
$previousLevel = 0;
foreach($arResult as $arItem):?>

<?if ($previousLevel && $arItem[«DEPTH_LEVEL»] < $previousLevel):?>
<?=str_repeat(«</ul></li>», ($previousLevel — $arItem[«DEPTH_LEVEL»]));?>
<?endif?>

<?if ($arItem[«IS_PARENT»]):?>

<?if ($arItem[«DEPTH_LEVEL»] == 1):?>
<li class=»dropdown»><a href=»<?if($arItem[‘LINK’][‘$str’]!=’p’){echo ‘#';}?>» class=»<?if ($arItem[«SELECTED»]):?>active<?else:?>dropdown-toggle<?endif?>» data-toggle=»dropdown» role=»button» aria-expanded=»false»><?=$arItem[«TEXT»]?><span class=»caret»></span></a>
<ul class=»dropdown-menu» role=»menu»>
<?else:?>
<li<?if ($arItem[«SELECTED»]):?> class=»item-selected»<?endif?>><a href=»<?=$arItem[«LINK»]?>» class=»parent»><?=$arItem[«TEXT»]?></a>
<ul>
<?endif?>

<?else:?>

<?if ($arItem[«PERMISSION»] > «D»):?>

<?if ($arItem[«DEPTH_LEVEL»] == 1):?>
<li><a href=»<?=$arItem[«LINK»]?>» class=»<?if ($arItem[«SELECTED»]):?>root-item-selected<?else:?>root-item<?endif?>»><?=$arItem[«TEXT»]?></a></li>
<?else:?>
<li<?if ($arItem[«SELECTED»]):?> class=»item-selected»<?endif?>><a href=»<?=$arItem[«LINK»]?>»><?=$arItem[«TEXT»]?></a></li>
<?endif?>

<?else:?>

<?if ($arItem[«DEPTH_LEVEL»] == 1):?>
<li><a href=»» class=»<?if ($arItem[«SELECTED»]):?>root-item-selected<?else:?>root-item<?endif?>» title=»<?=GetMessage(«MENU_ITEM_ACCESS_DENIED»)?>»><?=$arItem[«TEXT»]?></a></li>
<?else:?>
<li style=»padding: 5px 0 5px 0px;»><a href=»» class=»denied» title=»<?=GetMessage(«MENU_ITEM_ACCESS_DENIED»)?>»><?=$arItem[«TEXT»]?></a></li>
<?endif?>

<?endif?>

<?endif?>

<?$previousLevel = $arItem[«DEPTH_LEVEL»];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
<?=str_repeat(«</ul></li>», ($previousLevel-1) );?>
<?endif?>

</ul>

<?endif?>

 

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

И обратите внимание — кавычки здесь выводятся «криво», проверьте после переноса кода, чтобы отображались корректно.

<div class=»menu»>
<div class=»container»>
<nav class=»navbar navbar-default»>
<!— Brand and toggle get grouped for better mobile display —>
<div class=»navbar-header»>
<button type=»button» class=»navbar-toggle collapsed» data-toggle=»collapse» data-target=»#bs-example-navbar-collapse-1″>
<span class=»sr-only»>Toggle navigation</span>
<span class=»icon-bar»></span>
<span class=»icon-bar»></span>
<span class=»icon-bar»></span>
</button>

</div>

<!— Collect the nav links, forms, and other content for toggling —>
<div class=»collapse navbar-collapse» id=»bs-example-navbar-collapse-1″>

<?$APPLICATION->IncludeComponent(«bitrix:menu», «horizontal_multilevel_bootstrap», Array(
«ROOT_MENU_TYPE» => «top», // Тип меню для первого уровня
«MENU_CACHE_TYPE» => «A», // Тип кеширования
«MENU_CACHE_TIME» => «3600», // Время кеширования (сек.)
«MENU_CACHE_USE_GROUPS» => «Y», // Учитывать права доступа
«MENU_CACHE_GET_VARS» => «», // Значимые переменные запроса
«MAX_LEVEL» => «2», // Уровень вложенности меню
«CHILD_MENU_TYPE» => «», // Тип меню для остальных уровней
«USE_EXT» => «N», // Подключать файлы с именами вида .тип_меню.menu_ext.php
«DELAY» => «N», // Откладывать выполнение шаблона меню
«ALLOW_MULTI_SELECT» => «N», // Разрешить несколько активных пунктов одновременно
),
false
);?>

</div><!— /.navbar-collapse —>
</nav><!— /nav —>
</div><!— /container —>
</div><!— /menu —>

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