Создание анимированной миниатюры.

Перевод статьи:  How to make an animated thumbnail.
Автор:  Ben Moss.

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

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

Как работают CSS спрайты.

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

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

В тех случаях, когда для создания кнопки мы не можем использовать базовые возможности CSS стилей, мы определяем три её состояния – свободное, наведение курсора и нажатие:

.button{
background:url('off-state.png');
}
.button:hover{
background:url('over-state.png');
}
.button:active{
background:url('down-state.png');
}

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

Реализуя такую кнопку с помощью CSS спрайта, мы создаем один файл, содержащий необходимые для трех ее состояний изображения. Таким образом вместо трех 200 пиксельных изображений мы имеем одно 600 пиксельное. Далее нам остается лишь сдвигать позицию видимой области изображения при помощи свойства background-position:

.button{
display:block;
width:200px;
height:83px;
background:url('button-states.jpg');
}
.button:hover{
background-position:-200px;
}
.button:active{
background-position:-400px;
}

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

Создаем анимированную миниатюру.

В приведенном выше примере использование технологии CSS спрайтов ограничивается не самим изображением, а количеством возможных состояний объекта, необходимых для создания анимации – это свободное состояние (устанавливаемое по умолчанию), наведение мыши и нажатие, всего лишь три состояния.

Но ситуацию можно в корне изменить, если подключить небольшой jQuery код. В этом случае для определения точек привязки к состоянию объекта мы можем использовать положение курсора мыши, что позволяет нам создать столько состояний, сколько нам необходимо, или если быть точным, сколько позиций курсора (пикселей) имеется на экране. Вот пример:

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

Изображение.

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

<a id="preview" href="http://vimeo.com/8736190" rel="nofollow" >Западная Норвегия – восход солнца.</a>

Далее в этот документ нужно импортировать библиотеку jQuery, помещая в его заголовочной части следующий фрагмент кода:

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

В следующем шаге мы уже используем jQuery для определения необходимых стилей нашей ссылки. То есть, устанавливаем блочный тип элемента, ширину 500px, необходимую для отображения одного «кадра», высоту 203px и определяем само изображение спрайта в качестве фона для ссылки:

$(document).ready(function() {
$('#preview')
.css('display', 'block')
.css('width', 500)
.css('height', 203)
.css('background', 'url("our-image.jpg") no-repeat');
});

Наконец, нам остается установить значения свойства background-position для того, чтобы в рамках элемента отображался необходимый фрагмент изображения спрайта. Каждый «кадр» спрайта имеет ширину 500px. Путем несложных расчетов можно определить, что для того, чтобы извлечь первый «кадр», горизонтальное значение свойства background-position нужно установить равным 0px, для извлечения второго -500px, третьего -1000px и так далее.

При помощи обработчика события mousemove мы можем определить функцию, которая будет вычислять положение курсора мыши относительно требуемого элемента (в нашем случае ссылки) в процентном отношении. Для определения значения смещения позиции элемента относительно левой стороны окна браузера, мы к объекту событие e применяем метод pageX и вычитаем из него значение смещения элемента относительно левой границы документа. (*Это делается для того, чтобы в расчетах учитывать состояние окна браузера (в полный экран либо меньше) и положение горизонтальной полосы прокрутки.) Таким образом если курсор находится точно на левой границе элемента, то результатом вычисления данного выражения будет ноль. Затем делим полученное значение на ширину элемента. (*Что дает нам величину положения курсора относительно элемента в процентном эквиваленте.)

После этого нам нужно вычислить значение горизонтальной составляющей свойства background-position путем умножения полученного на предыдущем этапе процентного значения позиции курсора на полную ширину изображения спрайта. При этом нам нужно чтобы результат был кратен ширине элемента (500px), поэтому полученное значение мы делим на эту величину и округляем его в меньшую сторону при помощи функции Math.floor(). И для того, чтобы отменить предыдущее деление, выполняем обратное действие – умножаем полученное значение на 500. Если мы не поступим таким образом, то фон элемента будет сдвигаться на один пиксель при каждой смене картинки. (*Что приведет к неточностям позиционирования в пределах изображения спрайта и как результат к полному краху анимации.)

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

Далее остается лишь использовать полученную величину в качестве значения для CSS свойства background-position:

.mousemove(function(e) {
var elementWidth = 500;
var mousePercent = (e.pageX — this.offsetLeft) / elementWidth;
var bgPosition = 0 — Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
$(this).css('background-position', '- ' + bgPosition + 'px 0px');
});

Полный фрагмент кода, необходимый для реализации нашей анимации выглядит вот так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#preview')
.css('display', 'block')
.css('width', 500)
.css('height', 203)
.css('background', 'url("landscape.jpg") no-repeat')
.mousemove(function(e) {
var elementWidth = 500;
var mousePercent = (e.pageX — this.offsetLeft) / elementWidth;
var bgPosition = 0 — Math.floor((mousePercent * 5000) / elementWidth) * elementWidth;
$(this).css('background-position', bgPosition + 'px 0px');
});
});
</script>
</head>
<body>
<a href="http://vimeo.com/8736190" id="preview">Западная Норвегия – восход солнца.</a>
</body>
</html>

Заключение.

Но применяя такой подход, необходимо учитывать некоторые моменты:

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

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

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *