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

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

Posted in CSS, Уроки javascript, Уроки jQuery, jQuery, ява-скрипт by awebdesign on 15.04.2010

(перевод Виктории Шидловской Fun with Overflows)
Добавлен урок по горизонтальной прокрутке изображений, растягивающихся на весь экран.

горизонтальный скроллинг ява-скрипт

посмотреть ДЕМО

Пара человек попросили объяснить, как работает прокрутка на Plurk’s browse timeline. Затем на свое десятилетие Google выпустил 10 year timeline. Так что я решил показать, как сделать прокрутку, используя оба метода – прокрутку с помощью колесика мыши и с помощью перетаскивания мышкой.

Далее представлены два урока по горизонтальной прокрутке с ява-скриптом.

Первый урок – прокручиваемый дневник. Второй урок написан по запросу Trevor Morris, который хотел сделать «перетекание» радуги в шапке своего сайта более плавным.

1. Горизонтальная прокрутка мышью и колесиком мышки с помощью ява-скрипта

При создании горизонтально прокручиваемого дневника мы обеспечим поддержку прокрутки как на Plurk и как на Google.

Для начала сделаем тянущийся (wrapping) div со значением overflow: auto; (которое мы потом изменим на overflow: hidden; с помощью jQuery). Внутренний элемент (в нашем случае ul) будет иметь достаточную ширину, чтобы вместить в себя все необходимые элементы li, а чтобы li не растягивали div вертикально (не создавали новую линию), все li имеют определенную ширину и свойство float: left;.

Постановка задачи

  1. Уловить событие mouse down, определить положение прокручиваемого элемента и X-координату мышки.
  2. Когда мышка двигается (в нажатом состоянии), то прокручивать элемент на расстояние от старого до нового положения мышки.
  3. Когда мышка находится вне окна прокрутки, то отменить событие mouse down или запустить событие mouse up.

CSS

Не буду приводить весь код, только то, что имеет отношение к делу.

#timeline {
  height: 375px; /* fixed */
  overflow: auto; /* changed to hidden via JavaScript */
}

.tl-events { /* the UL */
  width: 11800px; /* the width required to hold all the info */
}

.tl-events li {
  float: left; /* allows the lis to stack against eachother */
  width: 300px;
}

jQuery

Код, используемый в demo

Мы используем три встроенные функции: mousedown, mouseup and mousemove. Затем добавляем jQuery mousewheel plugin перед изменением overflow в CSS:

// Когда DOM готов...
$(document).ready(function () {
  $('#timeline').mousedown(function (event) {
    // прикрепить 3 data элементу #timeline
    $(this)
      .data('down', true) // индикатор того, что мышь нажата
      .data('x', event.clientX) // текущая X-координата мышки
      .data('scrollLeft', this.scrollLeft); // текущая позиция скролла

    // вернуть false, чтобы избежать выделение текста и перетаскивания ссылок
   //внутри окна прокрутки
    return false;
  }).mouseup(function (event) {
    // Когда мышь отжата (mouse up), «выключить» индикатор down
    $(this).data('down', false);
  }).mousemove(function (event) {
    // если мышь нажата – начать эффект перетаскивания (drag)
    if ($(this).data('down') == true) {
      // this.scrollLeft - это scrollbar, появившийся из-за слишком большого
      //контента (overflowing content)
      // Новая позиция высчитывается по формуле: начальная позиция скролла +
      //начальная X-координата нажатой мышки – новая X-координата
      // Ищу того, кто мог бы как-то увеличить скорость прокрутки
      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
  }).mousewheel(function (event, delta) {
    // Сейчас подключаем плагин mouse wheel и прокручиваем на значение 'delta',
    // что является движением колесика, умноженное на произвольное число.
    this.scrollLeft -= (delta * 30);
  }).css({
    'overflow' : 'hidden', // изменить на hidden для пользователей с поддержкой JS
    'cursor' : '-moz-grab' // добавить курсор с изображением лапки
  });
});

// И наконец, вызываем событие, если мышка вышла за пределы прокручиваемой области
// Мы не вызываем событие mouse up (так как мышь все еще нажата)
$(window).mouseout(function (event) {
  if ($('#timeline').data('down')) {
    try {
      // *try* (попробовать) вычислить элемент, на который перешла мышка после того,
      //как покинула область
      // и если мы мы действительно вышли за пределы этой области,
      //то отключаем индикатор события mouse down
      if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
        $('#timeline').data('down', false);
      }
    } catch (e) {}
  }
});

2. Эффект радуги на сайте Trevor Morris

Используя тот же this.scrollLeft DOM мы можем создать совершенно другой эффект.
Он будет работать также при отсутствии поддержки ява-скрипта.

Разметка

Пустой экстра-div — это широкий элемент, а div#rainbow — это элемент с overflow, который будет перемещаться внутри.

<div id="headerEffect">
  <div id="rainbow"><div></div></div>
  <div id="swirl"></div>
</div>

CSS

Кроме CSS я также прописал код поддержки прозрачности PNG-изображений для IE6, для корректной работы при отключенных ява-скриптах.

#headerEffect {
  position: absolute;
  width: 100%;
  height: 400px;
  overflow: hidden;
  top: 0; /* Убедитесь, что IE растягивает его правильно */
  left: 0;
}

#rainbow {
  height: 400px;
  width: 100%;
  overflow: hidden;
}

#rainbow div {
  height: 400px;
  width: 3312px; /* хорошая ширина, чтобы быть уверенным, что картинка будет повторяться */
  background: url(/css/img/header.colour.3.png) repeat-x scroll -20% 0;
}

#swirl {
  background: url(/css/img/header.swirl.png) no-repeat scroll 50% 0;
  height: 400px;
  width: 100%;
  position: absolute; /* располагает swirl *над* rainbow */
  top: 0;
  left: 0;
}

Несколько специальных стилей для IE6:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
/* Добавил alpha прозрачность в CSS для отображения в браузерах без поддежки JS */
#swirl {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.trovster.com/css/img/header.swirl.png', sizingMethod='scale');
}
</style>
<![endif]-->

JavaScript
Заметьте, что этот раздел я назвал JavaScript, а не jQuery; мы используем свойство scrollLeft для div#rainbow, и jQuery нужен нам только для готового события.

$(document).ready(function () {
  // определяем элемент rainbow
  var rainbow = document.getElementById('rainbow'),
    lastPos, // хранит последнюю позицию scrollLeft
    width = 1656; // точка повтора бэкграунда

  // мы каждый раз сбрасывем все значения при перезагрузке страницы, так что бэкграунд всегда один и тот же
  rainbow.scrollLeft = width;

  // используем интервал для прокрутки радуги
  setInterval(function () {
    // заставляем бэкграунд прокручиваться слева направо
    rainbow.scrollLeft -= 5;

    // если мы достигнем начала, то lastPos будет равен scrollLeft
    if (lastPos == rainbow.scrollLeft) {
      // reset
      rainbow.scrollLeft = width;
    }

    lastPos = rainbow.scrollLeft;
  }, 100); // комбинация миллисекунд
});

Горизонтальная прокрутка с ява-скриптом 2, урок по CSS и jQuery

Перевод Виктории Шидловской урока Horizontal Scrolling Menu made with CSS and jQuery от Andrew Valums.

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

Посмотреть результат

Добаляем базовые стили

div.sc_menu {
/* Установите эти значения, чтобы мы могли просчитать отступ слева*/
position: relative;
height: 145px;
width: 500px;
/* Add scroll-bars */
overflow: auto;
}
ul.sc_menu {
display: block;
height: 110px;
/* Здесь максимальная ширина для пользователей без Javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* Remove default margin */
margin: 0;
background: url(‘navigation.png’);
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
/* Мы добавим заголовок под каждой картинкой */
display: block;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}

Значения “width” и “overflow” добавлены для того, чтобы у тянущегося div-а появились скроллбары. Мы указываем значение “position” для того, чтобы ява-скрипту было легче просчитать отступ. Не забывайте, что отступ всегда просчитывается относительно родителя. Вы можете посмотреть, что получилось, здесь.

Добавляем эффект hover (когда мышь проходит над элементом) и рамки (borders)

Значение “display: none” прячет заголовки, и мы прописываем “display:block” к “:hover”, чтобы показывать их, когда мышка находится над картинкой.

“-webkit-border-radius” и “-moz-border-radius” делают углы наших рамок скругленными в таких браузерах, как Firefox, Safari и Chrome. К сожалению, Internet Explorer не поддерживает это свойство и будет отображать обычные углы.

Вот как выглядит меню, если поддержка ява-скриптов отключена.

Код:

.sc_menu span {
 display: none;
 margin-top: 3px;
 text-align: center;
 font-size: 12px;
 color: #fff;
}
.sc_menu a:hover span {
 display: block;
}
.sc_menu img {
 border: 3px #fff solid;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
}
.sc_menu a:hover img {
 filter:alpha(opacity=50);
 opacity: 0.5;
}

jQuery

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Вот, что вы должны знать, чтобы понять код:

$() – это сокращенное имя для функции $(document).ready(), самая часто используемая функция jQuery. Это позволяет вызывать скрипт сразу после загрузки дерева страницы.

$(function(){
  // Your code here
});

Мы будем использовать событие “mousemove”, чтобы запускать скрипт при движении мышки над меню.

“ul.width()” не возвращает значение реальной ширины всех изображений, так как мы задали ширину списка с помощью CSS, чтобы выводить все изображения в одну линию. Мы можем получить эту ширину, сложив вместе ширину последнего изображения и его отступ слева.

Мы используем функцию “lastLi[0]” из коллекции jQuery и “offsetLeft”, чтобы получить координаты левого верхнего угла последней картинки относительно div-а.

Атрибут “lastLi[0]” возвращает Х-координату мышки относительно страницы, но нам нужно получать эту координату относительно div-а, поэтому мы воспользуемся “div.offset().left”

Список картинок должен двигаться быстрее, чем мышь над ним, поэтому его движение задаем с помощью формулы “(ulWidth-divWidth) / divWidth”.

Вот ява-скрипт:

$(function(){
 //Вызываем все элементы для более быстрого доступа к ним и указываем ширину     //рабочей области
 var div = $('div.sc_menu'),
               ul = $('ul.sc_menu'),
               // левый отступ (margin) ненумерованного списка
               ulPadding = 15;
  //Указываем переменную для ширины меню
  var divWidth = div.width();
  //Удаляем скроллбары
  div.css({overflow: 'hidden'});
  //Ищем последний элемент списка
  var lastLi = ul.find('li:last-child');
  //Когда пользователь проводит мышкой над меню
  div.mousemove(function(e){
    //Так как ширина списка увеличивается с загрузкой каждой новой картинки,
    //то мы пересчитываем ее каждый раз
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
    div.scrollLeft(left);
  });
});

Также решение для нескольких скроллер-меню на одной странице:

$(function(){
//Вызываем все элементы для более быстрого доступа к ним и указываем ширину     //рабочей области

var div = $(’div.sc_menu’),
ul = $(’ul.sc_menu’),
ulPadding = 15;

// Удаляем скроллбары
div.css({overflow: ‘hidden’});

// Когда пользователь проводит мышкой над меню
div.mousemove(function(e){

//Получаем ширину меню
var divWidth = $(this).width();

// Ищем последний элемент списка
var lastLi = $(this).find(’li:last-child’);

//Так как ширина списка увеличивается с загрузкой каждой новой картинки,
//то мы пересчитываем ее каждый раз
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX – div.offset().left) * (ulWidth-divWidth) / divWidth;
$(this).scrollLeft(left);
});
});

В общем, нужно перетащить расчеты ширины списка и координат последнего элемента внутрь функции и задействовать $(this).scrollLeft(left) вместо div.scrollLeft(left).

Вот и все! Можете посмотреть финальный результат. Как всегда, не стесняйтесь оставлять комментарии.

Добавила прокрутку с ява-скриптом 3 — горизонтальная прокрутка колесиком и перетаскиванием!

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать»

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