—»     —»   Разработка анимированного столбикового графика посредством HTML, CSS и jQuery
  Раздел: Графики и Диаграммы, Руководства   Комментариев: 1  

Разработка анимированного столбикового графика посредством HTML, CSS и jQuery



Люди, время от времени бывающие в залах для совета директоров по всему миру, очень любят всевозможные графики. Всем нравится PowerPoint, маркированные списки, и различные предложения по оптимизации пути достижения целей. Короче говоря, графики проектов финансовых расходов или позволяющие сравнить цифры продаж за последние пару полугодий – это просто мечта для менеджеров среднего звена.

Разработка анимированного столбикового графика посредством HTML, CSS и jQuery

Как же мы, будучи веб-дизайнерами, можем вписаться в этот мир графиков и диаграмм? На самом деле, существует несколько вариантов отображения графиков в интернете. Мы можем просто создать изображение и разместить его где-нибудь на странице. Но данный подход не очень доступен и интересен. Мы можем использовать Flash, и это вполне отличный способ отображения графиков, но, опять же, недостаточно доступа. К тому же, следует отметить то, что веб-дизайнеры и разработчики как-то остывают к технологии Flash. Технологии типа HTML5 позволяет нам делать то же самое, но без применения специальных плагинов. Новый HTML5-элемент «canvas» поможет нам в этом. На сегодняшний день в интернете существует множество инструментов для создания графиков, которыми каждый из нас может воспользоваться. Но что если нам нужно нечто более специализированное?

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

Что мы будем сегодня делать?

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

Вы сможете создать:

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

А также вы можете создавать графики и с полезной информацией, а не о зомби и мертвецах. Итак, давайте приступим.

Что вам понадобится

* Текстовый или HTML-редактор. Сделайте свой выбор из множества различных вариантов.
* jQuery. Лучше всего скачать последнюю версию. Также не забывайте держать открытой страницу jQuery, чтобы всегда иметь возможность обратиться к документации.
* Возможно, вам понадобится графический редактор типа Paint, чтобы набросать примерный вид графика.
* Современный веб-браузер, который позволит вам наблюдать за изменениями.

Верстка

Вы можете разработать HTML-структуры несколькими путями. В нашей сегодняшней статье мы начнем с таблицы, так как она позволит нам ориентироваться в случае, когда javascript или CSS не подключены. Это важный пункт в деле с доступностью.

Скорее! Вы только что получили секретные цифры и даты, когда полчища зомби нападут на человечество! Это произойдет через несколько лет! Бенгальские тигры и голубые обезьянки уже под угрозой, а затем зомби нападут на нас! Но ведь вы всего лишь веб-дизайнер, как вы можете помочь?

Я знаю, что вы можете сделать! Открыть веб-страницу, которая красивым и добрым образом отображает наш неминуемый конец.

Для начала давайте внесем данные в таблицу с колонками для каждого года и строчками для различных разновидностей.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1024">
<title>Example 01: No CSS</title>
</head>

<body>
<div id="wrapper">
<div class="chart">
<h3>Population of endangered species from 2012 to 2016</h3>
<table id="data-table" border="1" cellpadding="10" cellspacing="0"
summary="The effects of the zombie outbreak on the populations
of endangered species from 2012 to 2016">
<caption>Population in thousands</caption>
<thead>
<tr>
<td>&nbsp;</td>
<th scope="col">2012</th>
<th scope="col">2013</th>
<th scope="col">2014</th>
<th scope="col">2015</th>
<th scope="col">2016</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Carbon Tiger</th>
<td>4080</td>
<td>6080</td>
<td>6240</td>
<td>3520</td>
<td>2240</td>
</tr>
<tr>
<th scope="row">Blue Monkey</th>
<td>5680</td>
<td>6880</td>
<td>6240</td>
<td>5120</td>
<td>2640</td>
</tr>
<tr>
<th scope="row">Tanned Zombie</th>
<td>1040</td>
<td>1760</td>
<td>2880</td>
<td>4720</td>
<td>7520</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Посмотрите на пример ниже, чтобы увидеть, как наше приложение выглядит без применения CSS или javascript. Доступность таблицы позволит пользователям с читалками понимать данные и скрытое сообщение, гласящее «Бегите! Зомби наступают!».

Разработка анимированного столбикового графика посредством HTML, CSS и jQuery

Легкая часть осталась позади. Теперь давайте познакомимся с мощью CSS и javascript (посредством jQuery), чтобы продемонстрировать то, что нам рассказывают цифры. Технически, наша цель заключается в создании графика, который бы работал во всех современных браузерах, начиная от 8 версии IE.

Во всех современных браузерах? IE8 повезло, так как он относится к списку современных браузеров… Браузерам, поддерживающим CSS3, нужно отдельное внимание…

«Комбинируя силы…»

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

Сперва нам нужно стилизовать нашу таблицу посредством простого кода CSS. Это отлично подходит тем, у кого javascript в браузерах отключен.

Разработка анимированного столбикового графика посредством HTML, CSS и jQuery

Начинаем работу с jQuery

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

Давайте начнем с создания нашей основной функции – createGraph(). Мы укоротим некоторые из внутренних свойств данной функции, чтобы структура документа была вам больше понятна. Не забываем: вы всегда можете обратиться к исходному коду, представленному в данной статье.

Давайте посмотрим на основную структуру:

// Wait for the DOM to load everything, just to be safe
$(document).ready(function() {

// Create our graph from the data table and specify a container to put the graph in
createGraph('#data-table', '.chart');

// Here be graphs
function createGraph(data, container) {
// Declare some common variables and container elements


// Create the table data object
var tableData = {

}

// Useful variables to access table data


// Construct the graph


// Set the individual heights of bars
function displayGraph(bars) {

}

// Reset the graph's settings and prepare for display
function resetGraph() {

displayGraph(bars);
}

// Helper functions


// Finally, display the graph via reset function
resetGraph();
}
});

К данной функции мы применим два параметра:

* Данные data в виде табличного элемента table;
* Контейнер container, где мы расположим наш график.

Далее мы объявим несколько переменных для управления данными и контейнерами, а также некоторые переменные таймеры для анимации. Вот код:

// Declare some common variables and container elements
var bars = [];
var figureContainer = $('<div id="figure"></div>');
var graphContainer = $('<div class="graph"></div>');
var barContainer = $('<div class="bars"></div>');
var data = $(data);
var container = $(container);
var chartData;
var chartYMax;
var columnGroups;

// Timer variables
var barTimer;
var graphTimer;

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

Получение данных

Вместо простого отображения данных, наш график будет иметь большой красивый заголовок, подписанные оси и цветную кривую. Нам нужно вынести данные из таблицы и отформатировать их наиболее значимым путём. Для этого мы создадим javascript-объект, который будет содержать данные в виде удобных небольших функций. Давайте же внесём жизнь в наш объект tableData{}:

// Create table data object
var tableData = {
// Get numerical data from table cells
chartData: function() {

},
// Get heading data from table caption
chartHeading: function() {

},
// Get legend data from table body
chartLegend: function() {

},
// Get highest value for y-axis scale
chartYMax: function() {

},
// Get y-axis data from table cells
yLegend: function() {

},
// Get x-axis data from table header
xLegend: function() {

},
// Sort data into groups based on number of columns
columnGroups: function() {

}
}

Здесь у нас есть несколько функций, и все они описаны комментариями к коду. Большинство из них вполне просты, поэтому нам не обязательно объяснять каждую из них. Вместо этого, давайте выделим одну из них – columnGroups:

// Sort data into groups based on number of columns
columnGroups: function() {
var columnGroups = [];
// Get number of columns from first row of table body
var columns = data.find('tbody tr:eq(0) td').length;
for (var i = 0; i < columns; i++) {
columnGroups[i] = [];
data.find('tbody tr').each(function() {
columnGroups[i].push($(this).find('td').eq(i).text());
});
}
return columnGroups;
}

Давайте рассмотрим все подробнее:

* Для размещения данных создаем массив columnGroups[];
* Путем подсчета ячеек таблицы (td) в первой строке мы получаем число колонок;
* Находим число строчек в теле таблицы (tbody) в каждой колонке, и создаем еще один массив для хранения данных из ячеек таблицы;
* Затем проходим по каждой строчке и извлекаем данные из каждой ячейки (посредством jQuery-функции text()), а далее добавляем их в ячейку с массивом данных.

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

Использование данных

Используя jQuery-функцию $.each, мы можем пройтись по нашей информации в любой ячейке и создать элементы, которые будут олицетворять наш график. Самое трудное заключается во внесении столбиков, которые отвечают за каждый отдельный вид внутри колонок, разбитый по годам.

Давайте посмотрим на код:

// Loop through column groups, adding bars as we go
$.each(columnGroups, function(i) {
// Create bar group container
var barGroup = $('<div class="bar-group"></div>');
// Add bars inside each column
for (var j = 0, k = columnGroups[i].length; j < k; j++) {
// Create bar object to store properties (label, height, code, etc.) and add it to array
// Set the height later in displayGraph() to allow for left-to-right sequential display
var barObj = {};
barObj.label = this[j];
barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%';
barObj.bar = $('<div class="bar fig' + j + '"><span>' + barObj.label + '</span></div>')
.appendTo(barGroup);
bars.push(barObj);
}
// Add bar groups to graph
barGroup.appendTo(barContainer);
});

За исключением заголовков, наша таблица состоит из 5 колонок и 3 строчек. Касательно нашего графика, это означает, что в каждой созданной колонке будет отображено три столбика. Следующее изображение продемонстрирует нам конструкцию нашего графика:

Разработка анимированного столбикового графика посредством HTML, CSS и jQuery

Разбираем:

* Создаем div-контейнер для каждой колонки;
* Проходимся по каждой колонке, чтобы добыть данные из ячеек и строчек;
* Создаём объект столбиков (barObj{}) для хранения параметров каждого из них. Например, его заголовок, высоту и каркас;
* Добавляем параметр каркаса к колонке, применяя CSS-класс '.fig' + j, что позволяет нам окрасить каждый столбик в колонке. Оборачиваем заголовок в span;
* Добавляем объект к нашему массиву bars[], чтобы позже иметь доступ к данным;
* Объединяем их вместе, добавляя колонки к элементу контейнера.

Можете взять пирожок, если вы заметили, что мы не задавали высоту столбиков. Это позволит нам позже иметь больший контроль над их отображением.

Теперь у нас есть столбики, и нужно поработать над заголовками графика. Так как код отображения заголовков очень прост, мы не считаем нужным разбирать его подробнее. Следующим образом мы отобразим ось-y:

// Add y-axis to graph
var yLegend = tableData.yLegend();
var yAxisList = $('<ul class="y-axis"></ul>');
$.each(yLegend, function(i) {
var listItem = $('<li><span>' + this + '</span></li>')
.appendTo(yAxisList);
});
yAxisList.appendTo(graphContainer);

Разбираем:

* Получаем соответствующие данные для заголовков;
* Создаем неупорядоченный список (ul), который будет содержать наши пункты перечисления;
* Проходимся по данным заголовков, а затем для каждого заголовка создаем пункт списка (li), оборачивая каждый из заголовков в span;
* Прикрепляем пункт списка к нашему списку;
* Наконец, прикрепляем список к контейнеру.

Повторяя данную технику, мы можем добавить кривую, заголовки оси-х, а также заголовок нашего графика.

Перед тем, как мы сможем отобразить наш график, нам надо убедиться, что всё, что вы сделали, добавлено в контейнер.

// Add bars to graph
barContainer.appendTo(graphContainer);

// Add graph to graph container
graphContainer.appendTo(figureContainer);

// Add graph container to main container
figureContainer.appendTo(container);

Отображение данных

Всё, что осталось сделать в jQuery, это указать высоту всех столбиков. Именно здесь нам окажется полезным то, что мы делали ранее, когда размещали параметры высоты в объекте столбиков.

Теперь нам нужно анимировать график, поэтапно, шаг за шагом.

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

Давайте рассмотрим функцию displayGraph():

// Set the individual height of bars
function displayGraph(bars, i) {
// Changed the way we loop because of issues with $.each not resetting properly
if (i < bars.length) {
// Animate the height using the jQuery animate() function
$(bars[i].bar).animate({
height: bars[i].height
}, 800);
// Wait the specified time, then run the displayGraph() function again for the next bar
barTimer = setTimeout(function() {
i++;
displayGraph(bars, i);
}, 100);
}
}

Нам так и слышится, как от вас доносится отличный вопрос: «Почему бы не использовать функцию $.each, как вы сделали бы в любой другой ситуации?». Для начала давайте обсудим, что выполняет функция displayGraph(), а затем и всё остальное.

Функция displayGraph() принимает два параметра:

* Столбики bars, через которые нужно пройти,
* Индекс (i), откуда начинается процесс повторения (начиная от 0).

Давайте разберем остальное:

* Если значение "i" ниже, чем численность столбиков, то нужно продолжить;
* Получаем сведения о текущем столбике из массива, используя значение "i";
* Анимируем параметр высоты (высчитанный в процентном соотношении и размещенный в
bars[i].height
);
* Выжидаем 100 миллисекунд;
* Понижаем "i" на 1 и повторяем процесс со следующим столбиком.

«Так почему же не использовать функцию $.each с delay() перед анимацией?»

Вы можете это сделать, и мы тоже можем. Но если вы попробуете сбросить анимацию посредством кнопки «Reset graph», то события в тайминге не будут полноценно очищены, и тогда столбики будут анимированы непоследовательно.

Здесь нам хотелось бы, чтобы мы были неправы, и если у вас есть, что сказать или добавить, то обязательно сделайте это.

Продолжая руководство, давайте рассмотрим resetGraph():

// Reset graph settings and prepare for display
function resetGraph() {
// Stop all animations and set the bar's height to 0
$.each(bars, function(i) {
$(bars[i].bar).stop().css('height', 0);
});

// Clear timers
clearTimeout(barTimer);
clearTimeout(graphTimer);

// Restart timer
graphTimer = setTimeout(function() {
displayGraph(bars, 0);
}, 200);
}

Разбираем resetGraph():

* Остановим всю анимацию и выставим высоту каждого столбика на 0;
* Очистим все таймеры так, чтобы не оставалось «отбившихся от стада» анимаций;
* Ждем 200 миллисекунд;
* Вызываем displayGraph() для анимации первого столбика (при индексе 0).

И, наконец, вызываем resetGraph() в самом низу createGraph(), и смотрим, как происходит магия.

Не так быстро, однако! Перед тем, как мы отравимся дальше, нам нужно немного «приодеться».

CSS

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

#data-table {
display: none;
}

Сделано. Давайте создадим красивый контейнер, чтобы расположить там график. Так как для создания нашего графика было использовано несколько неупорядоченных списков, мы также сбросим стили для них. Важно задать относительное позиционирование position: relative элементам #figure и .graph, так как это переместит нужные элементы в нужное нам место.

/* Containers */

#wrapper {
height: 420px;
left: 50%;
margin: -210px 0 0 -270px;
position: absolute;
top: 50%;
width: 540px;
}

#figure {
height: 380px;
position: relative;
}

#figure ul {
list-style: none;
margin: 0;
padding: 0;
}

.graph {
height: 283px;
position: relative;
}

Теперь что касается кривой. Мы разместим кривую прямо в нижнюю часть контейнера (#figure), и выравниваем пункты горизонтально:

/* Legend */

.legend {
background: #f0f0f0;
border-radius: 4px;
bottom: 0;
position: absolute;
text-align: left;
width: 100%;
}

.legend li {
display: block;
float: left;
height: 20px;
margin: 0;
padding: 10px 30px;
width: 120px;
}

.legend span.icon {
background-position: 50% 0;
border-radius: 2px;
display: block;
float: left;
height: 16px;
margin: 2px 10px 0 0;
width: 16px;
}

Также крайне просто сделать ось-х для кривой. Мы горизонтально выставляем элементы и скрепляем их в нижней части контейнера (.graph):

/* x-axis */

.x-axis {
bottom: 0;
color: #555;
position: absolute;
text-align: center;
width: 100%;
}

.x-axis li {
float: left;
margin: 0 15px;
padding: 5px 0;
width: 76px;
}

Ось-y немного больше запутана, и здесь нужно немного поднапрячься. Мы зададим ей абсолютное позиционирование position: absolute, чтобы преломить естественный поток контента, и прикрепить его к контейнеру. Мы растягиваем каждый "li" на всю ширину графика и добавляем границу по верхней части. Это даст нам привлекательные линии на фоне.

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

/* y-axis */

.y-axis {
color: #555;
position: absolute;
text-align: right;
width: 100%;
}

.y-axis li {
border-top: 1px solid #ccc;
display: block;
height: 62px;
width: 100%;
}

.y-axis li span {
display: block;
margin: -10px 0 0 -60px;
padding: 0 10px;
width: 40px;
}

Теперь приступаем к мяску, наполняющему наш гамбургер – к самим столбцам! Давайте начнем с контейнера для столбиков и колонок:

/* Graph bars */

.bars {
height: 253px;
position: absolute;
width: 100%;
z-index: 10;
}

.bar-group {
float: left;
height: 100%;
margin: 0 15px;
position: relative;
width: 76px;
}

Здесь нет ничего сложного. Мы просто выставляем какое-нибудь разрешение контейнера, а также устанавливаем z-index для того, чтобы быть уверенными в том, что он будет появляться поверх всех указателей осей.

Теперь рассмотрим код каждого отдельного .bar:

.bar {
border-radius: 3px 3px 0 0;
bottom: 0;
cursor: pointer;
height: 0;
position: absolute;
text-align: center;
width: 24px;
}

.bar.fig0 {
left: 0;
}

.bar.fig1 {
left: 26px;
}

.bar.fig2 {
left: 52px;
}

Здесь нужно обратить внимание на следующие стили:

* position: absolute и bottom: 0, что означает, что столбики будут прикреплены к нижней части нашего графика и будут расти вверх;
* столбик для каждого вида (.fig0, .fig1 и .fig2), который будет размещен внутри .bar-group.

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

Так как мы разместили значения каждой ячейки таблицы в каждом столбике, мы можем добавить красивое всплывающее окошко с информацией, которое появляется при наведении на столбики:

.bar span {
#fefefe url(../images/info-bg.gif) 0 100% repeat-x;
border-radius: 3px;
left: -8px;
display: none;
margin: 0;
position: relative;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
width: 40px;
z-index: 20;

-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px;
box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px;
}

.bar:hover span {
display: block;
margin-top: -25px;
}

Изначально всплывающее окно скрыто посредством параметра display: none. А затем, когда на элемент .bar наводится курсор мыши, параметр сменяется на display: block, тем самым выводя его на передний план, а также устанавливаем отрицательное поле в верхней части (margin-top), чтобы окошко появлялось сверху каждого столбика.

На данный момент параметры text-shadow, rgba и box-shadow поддерживаются всеми современными браузерами. Из всех современных браузеров, только в Safari требуется префикс производителя (-webkit-) для того, чтобы box-shadow был задействован. Учтите, что эти параметры – это просто дополнения к нашему графику, и они вовсе не обязательны. Тем более, IE8 просто игнорирует их.

Наш финальный этап заключается в том, что мы раскрашиваем каждый столбик:

.fig0 {
background: #747474 url(../images/bar-01-bg.gif) 0 0 repeat-y;
}

.fig1 {
background: #65c2e8 url(../images/bar-02-bg.gif) 0 0 repeat-y;
}

.fig2 {
background: #eea151 url(../images/bar-03-bg.gif) 0 0 repeat-y;
}

К примеру, мы просто добавили background-color и background-image, которые растягиваются вертикально. Это обновит стилизацию столбиков, а также добавит небольшие иконки, которые отвечают за столбики в кривой. Красота.

И, верите или нет, на этом всё!

Итог

Разработка анимированного столбикового графика посредством HTML, CSS и jQuery

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

Бонус: распускаем мощь CSS3

Данный бонус представлен не так детально, как наш основной пример. Он ориентирован на то, чтобы продемонстрировать вам некоторые функции касательно спецификации CSS3.

В связи с тем, что на данный момент поддержка параметров CSS3 ограничена, не стоит полностью полагаться на данную технологию. Хотя, стоит отметить, что некоторые из данных свойств все же работают почти во всех современных браузерах, включая браузеры семейства Webkit (Apple Safari и Google Chrome).

Вы заметили, что мы создали данный график, совсем не используя изображения. Более того, даже анимация реализована посредством CSS, вместо jQuery.

Давайте начнем с того, что уберем фоновые изображения из столбиков, заменяя их параметром gradient, присущим технологии webkit:

.fig0 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #747474), color-stop(0.49, #676767), color-stop(0.5, #505050), color-stop(1.0, #414141));
}

.fig1 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #65c2e8), color-stop(0.49, #55b3e1), color-stop(0.5, #3ba6dc), color-stop(1.0, #2794d4));
}

.fig2 {
background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #eea151), color-stop(0.49, #ea8f44), color-stop(0.5, #e67e28), color-stop(1.0, #e06818));
}

Мы можем сделать то же самое и с нашими всплывающими цифрами:

.bar span {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));

}

Мы можем сделать то же самое и с нашими всплывающими цифрами:

.bar span {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));

}

Для получения более подробной информации о градациях в Webkit, ознакомьтесь с блогом Surfin’ Safari.

Продолжая работу над всплывающими окнами, давайте поговорим о -webkit-transition. CSS-переходы крайне легко применять и понять. Когда браузер определяет изменение в параметрах элемента (по высоте, ширине, цвете, плотности отображения), он автоматически плавно переправит элемент к новому параметру.

Опять же, обратитесь к блогу Surfin’ Safari, чтобы получить больше информации о -webkit-transition и анимации в CSS3.

Вот пример:

.bar span {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5));
display: block;
opacity: 0;

-webkit-transition: all 0.2s ease-out;
}

.bar:hover span {
opacity: 1;
}

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

Благодаря -webkit-transition мы можем упростить наши javascript-функции:

// Set individual height of bars
function displayGraph(bars, i) {
// Changed the way we loop because of issues with $.each not resetting properly
if (i < bars.length) {
// Add transition properties and set height via CSS
$(bars[i].bar).css({'height': bars[i].height, '-webkit-transition': 'all 0.8s ease-out'});
// Wait the specified time, then run the displayGraph() function again for the next bar
barTimer = setTimeout(function() {
i++;
displayGraph(bars, i);
}, 100);
}
}
// Reset graph settings and prepare for display
function resetGraph() {
// Set bar height to 0 and clear all transitions
$.each(bars, function(i) {
<strong>$(bars[i].bar).stop().css({'height': 0, '-webkit-transition': 'none'});</strong>
});

// Clear timers
clearTimeout(barTimer);
clearTimeout(graphTimer);

// Restart timer
graphTimer = setTimeout(function() {
displayGraph(bars, 0);
}, 200);
}

Вот то, что мы изменили:

* Установили высоту столбиков посредством jQuery-функции css(), и позволили CSS-переходам позаботиться об анимации;
* Сбрасывая график, мы выключили переходы, так что высота столбиков сразу же выставилась на 0.

Ознакомьтесь с примером, если у вас имеется последняя версия Safari или Chrome.

Ультра-мега бонус для Webkit: Теперь в 3D!

Ознакомьтесь с данным небольшим экспериментом, где мы применили трехмерный эффект и переходы на CSS. Опять же, здесь нам требуется последняя версия Safari или Chrome:

Как и в нашем прошлом примере Webkit, здесь не используются изображения, а вся анимация реализована с помощью CSS! Вот так-то!

Не можем посоветовать вам, как использовать данную информацию, но можем предупредить вас о том, что не стоит недооценивать знания, которыми вы теперь владеете. Вся сила в ваших руках! Применяйте её мудро!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 15328   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 февраля 2012 @ 21:49
Написал: arrivas — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень четкое изложение. Беру на вооружение.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031