Awebdesign's Blog

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

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

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

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

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

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

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

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

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

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


tenhands

tenhands2

tenhands3

tenhands4


tenhands5

tenhands6

Реклама

К вопросу о кроссбраузерности

А-а-а! Не могу — класс! Вот как нужно правильно поступать, чтобы не париться! Если открываешь сайт этой дизайн-студии в Эксплорере, то там написано: «Этот сайт был сделан не для уродского Интернет Эксплорера. Если вы ничего не видите, значит, вы видите Интернет Эксплорер. Откройте какой-нибудь нормальный браузер, чтобы следить за нашими обновлениями».
Уродский IE - долой кроссбраузерность!

Virtuti-D - портфолио дизайн-студии

Напишу то же самое у себя на сайте для Оперы :)…

Наш очередной сайт

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

Заказать сайт - awebdesign.ru

Заказать сайт - awebdesign.ru

Дизайнерское портфолио Multipraktik

Горизонтальная прокрутка с ява-скрипт 4

Закончила свой сайт с горизонтальной прокруткой колесиком мыши и перетаскиванием – можете посмотреть и поскроллить здесь: http://awebdesign.ru

Сайт собран на основе урока Горизонтальная прокрутка с ява-скрипт 3, но так как использованы вместо текста картинки, к тому же эти изображения динамически меняют размер в зависимости от размеров окна браузера, то решила написать маленький тьютор по этому поводу.

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

CSS

Стили для списка и его пунктов:

.in {
width: 7400px;
list-style: none;
padding: 0;
margin: 0;
}

.in li {
float: left;
margin: 0;
padding: 0;
}

Ширина списка класса in (7400px) – это ширина вашей горизонтальной страницы. К сожалению я не нашла способа динамически менять эту ширину в зависимости от суммы ширин всех изображений, возможно, вы найдете его сами. В противном случае нужно вручную настроить эту ширину в зависимости от количества изображений. Если, как в моем случае, изображения меняют свой размер динамически, то и ширина этого списка будет меняться, поэтому желательно тестировать страницу с максимальными размерами изображений, иначе последние в списке картинки «прыгнут» вниз. Если высота монитора не позволяет провести такой тест, оставляйте в ширине «запас».

jQuery

Для начала нужно подгрузить на страницу библиотеку jQuery и скрипт прокрутки:
(Ниже вы можете скачать исходные файлы вместе с ява-скриптами)
Скрипт, который нужно поставить в <header>:

<script charset="utf-8">
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function (event) {
$(this).data('down', false);
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}

}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 100);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
});

$(window).mouseout(function (event) {
if ($('#timeline').data('down')) {
try {
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('#timeline').data('down', false);
}

} catch (e) {}
}
});

</script>

Timeline – это div, который содиржит список класса in. Именно этот див и прокручивается ява-скриптом.

HTML

Вкратце разметка выглядит таким образом:

<div>
<ul>
<li>
<img src="http://awebdesign.ru/img/grad.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#">
<img src="http://awebdesign.ru/img/origami_fish.jpg" class="source-image" alt="" />
</a>
</li>
<li>
<img src="http://awebdesign.ru/img/grad_mezhdu.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#" >
<img src="http://awebdesign.ru/img/origami_lily.jpg" class="source-image" alt="" />
</a>
</li>
</ul>
</div>

О том, как менять размеры изображения в зависимости от размеров окна браузера можете прочитать здесь:
Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

Скачать исходные файлы: http://awebdesign.ru/tutors/source_files.zip

Одновременная прокрутка вверх и вниз!

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

Российский сайт на magic scroll ява-скрипте

Наконец-то на российском рынке начали появляться достойные примеры дизайна и технического воплощения!

На сайте используется плагин jQuery — magic scroll. Скачать плагин (скрипт весит всего 2 кило!) можно здесь: http://magicscroll.madeinthecave.com (кнопка DOWNLOAD справа вверху), сам сайт, кстати, тоже прокручивается от движения мышки. Примеры имплементации там же — простой ввод кода в действие и с использованием опции скорости, под ними — остальные опции, поддерживаемые скриптом. В пакете загрузки, примеры html-файлов, конкретно — смотрите код demo.htm.

Пример сайта с использованием magic scroll выслан читателем, так что высылайте хорошие образцы сайтов и вы.

российский дизайн сайта

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