Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Здравствуйте. В сегодняшнем уроке мы будем использовать элемент HTML5 для создания простого портфолио фотографий, которое отображает множество фотографий с эффектом затвора камеры. Данная функция будет осуществляться при помощи использования плагина jQuery, который можно легко интегрировать в любой сайт.
Элемент холста – это специальная область, на которой можно рисовать при помощи JavaScript и применять всевозможные манипуляции с изображением. Однако существуют ограничения на то, что можно сделать с ним. Создание сложной анимации в реальном времени является сложной задачей, так как приходится перерисовывать холст на каждом кадре.
Для таких процессов требуется много вычислительной мощности. На сегодняшний день современные веб-браузеры просто не готовы к таким сложным операциям, и, как результат, плавная анимация практически невозможна. Но есть способ обойти это ограничение. Если вы посмотрели демонтсрацию, вы заметили, как гладко она работает. А все потому, что кадры формируются заранее и каждый из них построен как отдельный элемент.
Для просмотра изображения кликните по нему. Вы наверное заметили уже, что частвует в процессе реализации затвора одно единственное изображение. С помощью Холста и плагина jQuery все работает довольно слаженно и без потери производительности.
Напоминаю, что Canvas (англ. canvas — «холст») — это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Так же в свою очередь могу сказать, что я сам использую эффект “холста” у себя на сайте. Он реализуется в нестандартных шрифтах блога. Хотя многие думают, что это просто шрифты, прописанные в шапке. Это заблуждение – битмап да и только.
Теперь давайте поближе познакомимся с разметкой HTML нашей главной страницы. Так как мы используем Canvas элемент, нам необходимо определить документ как HTML5, то есть DOCTYPE.
< !DOCTYPE html> <!-- Определяем документ как HTML5 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>"Эффект затвора" совместно с использованием Canvas И jQuery | Ruvisio Demo</title>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
<link rel="stylesheet" type="text/css" href="assets/jquery.shutter/jquery.shutter.css" />
</head>
<body>
<div id="top"></div>
<div id="page">
<h1>Портфолио с эффектом затвора</h1>
<div id="container">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="assets/jquery.shutter/jquery.shutter.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
<a class="homebutton" href="" target="_blank"></a>
<a class="downloadbutton" href=""></a>
Стили для страницы и плагин включены в головной части документа, а вот сценарий как раз находится в #content. Содержание DIV имеет неупорядоченный список из четырех фотографий, которые будут отображаться в виде слайд-шоу. Если браузер пользователя не поддерживает элемент холста, то он просто увидит циклически прокручиваемые образы без отображения эффекта затвора фотокамеры.
В данном примере на картинке показан открытый затвор. Так будет выглядеть в принципе любое портфолио, но далее будет показан пример работы уже с закрытым затвором. Хочется сказать, что именно этот эффект будет порождать новый вид HTML кода content# div. Давайте посмотрим на него и поймем как он работает и по какому принципу.
<div class="shutterAnimationHolder" style="width: 640px; height: 400px;">
<div class="film"
style="height: 15000px; width: 1000px; margin-left: -500px; top: -300px;">
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
</div>
</div>
Каждый элемент холста содержит один кадр затвора анимации. Высота .film div установлена достаточно большой, для отображения элементов холста один над другим.
.ShutterAnimationHolder div установлен такой же высоты, как контейнер, в котором он установлен, и отображает неупорядоченный список с фотографиями. При overflow:hidden он скрывает остальной части анимации и показывает только определенные кадры.
Если коснуться CSS кода, то можно скказать, что эта часть кода не столь важна, нежели та, которая отвечает за создание полотна изображений. Тем не менее, CSS все равно должнен быть организован в виде фильмопленки в целях достижения гладкой анимации.
.shutterAnimationHolder .film canvas{
display: block;
margin: 0 auto;
}
.shutterAnimationHolder .film{
position:absolute;
left:50%;
top:0;
}
.shutterAnimationHolder{
position:absolute;
overflow:hidden;
top:0;
left:0;
z-index:1000;
}
Эти три набора правил с префиксом класса .shutterAnimationHolder влияют только на разметку. Для оптимизации вы можете скопировать этот код в ваш основной файл стилей, в целях сведения к минимуму количество запросов HTTP.
На данном рисунке показан закрытый затвор портфолио. Смотрится достаточно оригинально и что самое главное без использования флеш анимации. Я не сторонник флеш, так как потребляемость ресурсов увеличивается в разы. А это приводит к заторможенности при показе основного контента сайта. Хотя сейчас тенденция использования Flash уходит в небытыие.
Здесь мы создадим плагин jQuery – tzShutter – который прост в использовании и требует минимальных изменений на вашем сайте для его использования. Одним из важных аспектов развития этого плагина, является обеспечение надлежащей поддержки для пользователей, чьи браузеры не понимают Canvas теги (в основном все версии IE, за исключением 9). Это в принципе дело не столь тяжелое.
Также мы должны обеспечить работу вызова анимации открытия и закрытия для пользователей tzShutter. Мы добьемся этого с использованием двух пользовательских событий, содержащих элементы – shutterOpen и shutterClose, которые, в свою очередь, легко выполняются методом trigger() jQuery.
Кроме того, плагин будет предоставлять пользователям способ подключения пользовательских функций посредством функций обратного вызова, изменяя параметры. Они выполняются в ключевых секторах анимации – когда холст элементы создаются, и, когда затвор открыт или закрыт.
Я не стану рассматривать код jQuery, он вызывает у меня ошибку на странице.
Единственным недостатком этого метода является то, что частое обращение к процессору вашего компьютера, может привести интерфейс браузера к зависанию на короткий промежуток времени. Как альтернатива можно использовать фактически изображения PNG вместо данного метода, но тогда это заняло бы более 1МБ места на ваших страницах (по сравнению с 12 Кб сейчас).
Теперь посмотрим, как плагин используется.
$(document).ready(function(){
var container = $('#container'),
li = container.find('li');
container.tzShutter({
imgSrc: 'assets/jquery.shutter/shutter.png',
closeCallback: function(){
li.filter(':visible:first').hide();
if(li.filter(':visible').length == 0){
li.show();
}
setTimeout(function(){container.trigger('shutterOpen')},100);
},
loadCompleteCallback:function(){
setInterval(function(){
container.trigger('shutterClose');
},4000);
container.trigger('shutterClose');
}
});
});
Когда работа плагина заканчивается, это вызывает функцию loadCompleteCallback. Мы используем его для планирования затвора анимации каждые четыре секунды, что сопровождается изменением фотографий неупорядоченным списком.
Canvas теги предоставляют разработчикам широкий спектр возможностей и позволяют им создавать новые и интересные для пользователей интерфейсы, анимации и даже игр. Поделитесь своими мыслями в комментариях ниже. Если вам понравился этот урок, не забывайте подписаться на наш канал RSS.
Портфолио с эффектом затвора (470.6 KB, 41 скачиваний)
Файл залит 13.03.2011 в 13:14
Для доступа к файлам пожалуйста Авторизуйтесь либо Зарегистрируйтесь!
Комментарии
(16 weeks назад)
(19 weeks назад)
(19 weeks назад)
(43 weeks назад)
(43 weeks назад)