5 приемов для разработки динамических сайтов

Идеальный сайт — это тот, который одновременно прост и интересен. Лучшие вебсайты создают впечатление того, что будущее наступило, и пользователи идут в ногу со временем. Это пробуждает у пользователей желание снова и снова заходить на сайт, просто потому что он классно загружается и по нему весело гулять. Веб-дизайн — это искусство, а с современными техниками программирования стало так просто создавать сайты, которые радуют и вдохновляют пользователей.

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

Вертикальные скрывающиеся панели

Если на вашем сайте есть информация, которую вы не хотите открывать в новом окне, но и не хочется, чтоб она вечно было на виду, поместите ее на вертикальную панель, которая будет открываться и скрываться при нажатии на кнопку.

Для того чтобы создать такую панель, вам понадобится HTML блок, основа в виде CSS стилей, а также jQuery для соединения всего этого.

У HTML блока div будет id = “frame” и class = “content”. В этом блоке находится основной конент. Затем создайте div с классом “panel” для содержимого вертикальной панели. Не включайте этот блок в предыдущий! В конце добавьте кнопку.

CSS стили должны описать, как будет выглядеть панель во всевозможных состояниях: в свернутом и развернутом виде, при наведении на кнопку курсора, при прокрутке внутри панели и т.д. Напишите стили для .panel, .panel a: visited, .panel a:hover, .panel a:visited:hover и т.п. Определите цвета, размеры, фоны и др. Добавьте стиль для кнопки: a.trig, a.trig:hover.

Соединяя все это, добавьте код jQuery в начало документа HTML. Сначала добавьте ссылку на jQuery в теге script, а затем, используя описанные ранее классы .panel и .trig, напишите следующий код:

$(document).ready(function(){
    $(".trig").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
});

SpyreStudios

Изысканный фокус и эффекты наведения курсора

Самое приятное в хорошем сайте — это, то что эффекты происходят плавно. Если вы наведете курсор на кнопку, ее цвет никогда резко не поменяется с зеленого на синий. Вместо этого вы увидите плавный переход от одного цвета к другому. Это делает дизайн сайта мягким и легким. С помощью CSS3, который поддерживается всеми браузерами кроме IE, вы можете создавать кнопки, которые будут плавно менять цвет и стиль при наведении курсора, а также текстовые поля с меняющимися стилями. Эту простую технику можно применить для создания изящных эффектов.

Стандартный CSS стиль выглядит так:

.class {
    background-color:
    color:
    width:
    position:
    etc...
}
 
.class:hover {
    etc...
}

Тем не менее, все что вам нужно сделать, это включить пару строчек в описание вашего стиля, которые при активации функции hover отработаются средствами «ease-in» CSS3.

-webkit-transition: background-color 500ms ease-in;
-moz-transition: background-color 500ms ease-in;
-o-transition: background-color 500ms ease-in;
transition: background-color 500ms ease-in;

Это можно применить для background-color, width, color при их изменении между .class и .class:hover.

Эти эффекты также можно использовать в комплексе с так называемыми CSS Sprite Techniques. В общем, если вы объедините все изображения в один спрайт, то чтобы затем придать эффект одному из них при наведении курсора, нужно будет в стиле .class:hover изменить параметр background-position так, чтобы он принимал отрицательное значение. Если нужное изображение на 50 пикселей выше первого изображения, то код выглядит так:

.class {
    background-position: 0px 0px
    width:
    etc.
}
 
.class:hover {
    background-position: 0px -50px
    width:
    etc.
}

Функции ease-in можно использовать для создания эффекта «slot machine wheel», также можно создавать эффекты наложения изображения.

Мы написали 4 строчки кода описания эффекта ease-in, потому что: первая строка — это стандарт CSS3 для Chrome и Safari, вторая — для Firefox, третья — для Opera.

Пример

Duoh - заметьте, что эффекты не отображаются в IE.

Спрятанный контент и эффекты при наведении курсора

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

Для создания т.н. ролловеров изображений программисты используют JavaScript функции onMouseOver и onMouseOut для тега img. Также можно использовать их для тега div, чтобы создать ролловер блоков текста.

Просто создайте отдельный класс div, в который будет заключен контент, появляющийся или скрывающийся в зависимости от наведения курсора. В следующем примере в отдельные классы div помещается каждый пост блога, так что назовем этот класс «post». Напишите HTML код для случая, когда контент скрыт и когда он появляется: id=”nonhover” и id=”hover”.

Затем добавьте стандартный JavaScript код:

$('.post').mouseover(function() {
    $('#hover').css('display', 'inline');
    $('#nonhover').css('display', 'none');
});
 
$('.post').mouseout(function() {
    $('#hover').css('display','none');
    $('#nonhover').css('display', 'block');
});

Пример: CSS-Tricks

Счетчики и диаграммы

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

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

$highest = 0;
    foreach((get_the_category()) as $cat) {
    $ct_count = $cat->category_count;
    if($ct_count > $highest){
    $highest = $ct_count;
    }
}

Затем, извлеките информацию о каждой категории $cat, а именно ее название и счетчики, и назовите их $ct_name и $ct_count. Задайте также переменную $width, зависящую от значения $ct_count. Вставьте этот кусок кода в div диаграммы:

foreach((get_categories(‘orderby=count&order=desc’)) as $cat) {
    $ct_name = $cat->cat_name;
    $ct_count = $cat->category_count;
    $width = ($ct_count * 100) / $highest;
    echo '<a href="#" style="width: .'$width'.%"> . '$cat_name'. (.'$cat_count'.)</a>';
}

В цикле создадутся строки диаграммы длиной, зависящей от самой длинной, которая займет ширину всего блока.

Пример.

Engadget - в самом низу вы увидите диаграмму самых часто комментируемых постов.

Изменение размера изображения при наведении курсора

Наконец, если на вашем сайте есть галереи изображений или фотографий, вы можете добавить эффект overflow при увеличении размера одной из них. При наведении курсора на какое-либо изображение, оно моментально увеличится до своего реального размера, но не откроется в новом окне. Это очень простой, но чрезвычайно важный элемент любого сайта, на котором есть фото-галереи.

Этот код не увеличивает само изображение при наведении курсора. Изменяется блок под изображением. Для изменения этого блока нужно поиграться со свойством CSS overflow.

Каждое изображение поместите в тег а:

<a href="/><img src="photo.jpg"></a>

Не изменяйте размер изображения здесь. Сделайте это через CSS. Например, для изображения размером 120x150 px с миниатюрой 100x100 px код будет выглядеть так:

ul#thumbnail a{
    width:100px;
    height:100px;
    line-height:100px;
    display:block;
    float:left;
    overflow:hidden;
    position:relative;
    z-index:1;
}
 
ul#thumbnail a img{
    top:-20px;
    left:-50px;
    float:left;
    position:absolute;
}

Заметьте, что значения top и left — отрицательные. Поиграйте числами, чтобы получить изображение нужного размера. Строка overflow:hidden скрывает все отрицательные значения.

Чтобы миниатюра перекрывалась реальным изображением при наведении мыши, добавьте код:

ul#thumbnail a:hover{
    z-index:1000;
    border:none;
    overflow:visible;
}

Пример:

cssglobe

Выводы

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

• Комментарии