jQuery

индекс
283,92

Листалка страниц на HTML5 canvas

Думаю, листалкой на Flash или Silverlight никого не удивишь — но что насчет листалки на HTML5 ? Вооружившись статьей Rick Barraza о листании страниц на Silverlight, я сделал вполне себе приятную листалку в виде jQuery плагина.

image

Проект доступен под лицензией MIT по адресу jpageflipper.codeplex.com/ Текущая версия — 0.9, пока не хватает теней и мелких плюшек, а также возможности ставить несколько листалок на страницу.

Демка доступна на dl.dropbox.com/u/7235888/index.html

Ну и, соотстветственно, раз уж это HTML5, в некоторых браузерах возможна некорректная работа (ну или ее полное отсутствие). Работает в Chrome 4+, Firefox 3.5+, Opera 9.6+, Safari 4+

UPD: выложил демку на dropbox.com по наводке otaqsun
+81
19 мая 2010, 10:14
76

комментарии (131)

+1
akira #
А пример?
+1
Aldanko #
Recommended download по ссылке. Некуда пример выкладывать
+3
otaqsun #
Примеры можно на дропбокс выкладывать, дигг эффект держит на отлично, затрат 0.
+1
Aldanko #
Спасибо, сейчас попробую там разместить
0
otaqsun #
Вот инструкция если что: habrahabr.ru/blogs/hosting/83418/
+1
Aldanko #
Уже разместил, спасибо
+1
akira #
Редко получается, лично у меня html в упор не видет.
+1
otaqsun #
Вот парочка примеров:
dl.dropbox.com/u/4456823/ru_jqapi/index.html
dl.dropbox.com/u/3499829/learnkana/index.html
Вот я выше давал ссылку на инструкцию: habrahabr.ru/blogs/hosting/83418/
0
akira #
Я так понимаю, что работает у win пользователей, лично у меня 404 всегда.
0
otaqsun #
ну низна, у меня линукс, и все было ок вроде бы
+1
akira #
Только, что проверил на сервере. Работает. А вот на MacOS не хочет. Даже если chmod выствлять через консоль.
0
mish #
У меня Mac OS и работает, хотя до этого был период, когда не работало… На форуме писали, что они «банили» некоторые диапозоны русских IP адресов, очень возможно, что Вы попали в такой…
0
RedSadnessTint #
О, спасибо, классный сервис, есть подобные, но этот как-то, просто, красиво, качественно :)
0
MuXaJIbI4 #
а демка есть посмотреть?
+1
Aldanko #
Recommended download по ссылке. Некуда пример выкладывать
0
Aldanko #
смотрите UPD
+2
G0ran #
Спасибо за примеры, неплохая листалка.
позвольте добавлю с вашему посту интересный и чем-то немного похожий на ваш плагин (заранее извиняюсь за оффтоп)

jQuery Flip!

Вот демонстрация работы:

т.е. тоже можно каким-то образом использовать для страниц, только надо продумать грамотно изменение контента
+1
Aldanko #
Интересно, но в приведенном вами плагине идет работа с DOM элементами, а у меня все рисуется на canvas. Работа с canvas дает возможность использовать отдельные фичи, которые в случае с DOM элементами даже не знаю, как реализовать — например, определение clip area (области отображения)
+6
wasia #
Бетка пятого Хрома. При начале перелистывания начинается мелкая дрожь новых картинок. Общее впечатление вполне приятное.
+2
Aldanko #
Да, знаю, под этой версией все тестировалось :) Дрожь только в хроме, ни в Firefox, ни в Safari этого не наблюдается. Учитывая то, что только в хроме границы страниц выглядят рвано — могу предположить, что это проблема anti-aliasing для канваса. В Firefox края страниц при листании гладенькие — сглаживание есть.
+1
valCooL #
В опере все ок! :)
0
Aldanko #
Супер! Версия? Проапдейчу описание проекта и статью.
0
tkf #
Отвечу и я тоже по поводу работы в опере. У меня 10.53, но думаю заработает и в 10.50 :) возможно и с 10 версии начиная, не помню когда именно canvas добавили. Причем вроде начиная с 10.50 если рисунки выключенны, или стоят грузить закэшированные то в canvas их также нельзя загрузить, таки вот дела.
0
Aldanko #
Обновлю про оперу, спасибо.

Проблему понял, буду думать.
0
valCooL #
10.53
Последний глобальный апдейт рендера Оперы — 10.50.
0
Aldanko #
Значет пишу поддержку 10.5 Оперы…
0
homm #
9.6 работает без проблем.
0
ivlis #
В шестом хромиуме всё тоже самое

6.0.407.0 (0)
0
Aldanko #
Спасибо, буду смотреть
+1
Alkor #
Еще глюк.
Если взяв страницу свернуть ее в диагональ от нижнего левого до правого верхнего угла, то страничка пропадает/прыгает/появляются артефакты.

Не знаю как толковее объяснить, увы)
0
Alkor #
Браузер — Хром
0
Aldanko #
Спасибо, наблюдал нечто подобное, но еще не фиксил.
0
freeOne #
Если ухаватить за левый нижний угол и сделать оборот по часовой стрелки, то получается такой артефакт: i47.tinypic.com/xmlbao.png (оранжевым показана траектория движения мыши).

ФФ 3.6.3
0
Aldanko #
Спасибо, уже было здесь: habrahabr.ru/blogs/jquery/93936/#comment_2853104

Занесено сюда — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=9
+1
peanut #
А возможно ли реализовать увеличение содержимого, чтобы можно было вблизи посмотреть содержимое определенной страницы?
0
Aldanko #
Спасибо за идею, внес на будущее — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=12
+7
Ockonal #
Ещё что обнаружил: если потянуть за угол вниз, нижняя картинка урезается, поэтому видно картинку ещё ниже. Вот скрин:

Chrome 6.0.401
+1
Aldanko #
Спасибо, вижу. Исправлю к 1.0
0
Aldanko #
0
kirilloid #
FF 3.5.9 — то же самое
НЛО прилетело и опубликовало эту надпись здесь
0
Aldanko #
То ли еще будет :)
+2
GraDea #
Вот такое заметил
артефакты

При перелиствовании перекрывается предыдущая страница новой. причем степень заполнения. зависит от движений мышки.
0
Aldanko #
Спасибо, занес в issue tracker — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=10

Проблема в маленьких углах — при них сильно вырастают тангенсы и надо делать очень большие clipping regions. Буду бороться.
+1
seriyPS #
Хоть бы один комментарий в коде…
0
Aldanko #
Ну так 0.9 же :) Перед релизом будет и рефакторинг, и наполнение комментами, и примеры использования.
+4
SychevIgor #
Все классно. Красиво. И ложка дегтя в виде загрузки 1 ядра на все 100% в ff3.6
Нагрузка должна быть такая или это только в ff так?
+1
Aldanko #
Не должно, конечно же. У меня в Chrome 4.0 загрузка одного ядра на 26% и только при таскании. В Firefox в целом медленнее, чем в Chrome, но зато красивее и со сглаживанием.

Стоит вопрос об оптимизации перерисовки — не алгоритма, а именно способа. Сейчас используется setTimeout(invalidate, 1000 / fps), что, наверное, не лучший вариант. Если кто-нибудь подскажет хорошую альтернативу — буду только рад.
+1
homm #
У вас случайно не 4-х ядерный процессор? (что-то цифра 25% как-то мала и настораживает)
+1
Aldanko #
0
homm #
Что-то я поздно сообразил. Это как раз нагрузка всего процессора 25%. Т.е. 50% на ядро. Ну и обработка идет не в реальном времени, как я считал, а с искуственными задержками. Конечно, много есть не будет.
+1
TuKTeeK #
Зачем писать слово «заимплементил», вместо «осуществил». Вы заставляете меня гуглить. =(
+1
Aldanko #
Заменил на «создал» — пафоснее, но гуглить уже не надо :)
0
Golden_Grey #
Не люблю слово «гуглить».
+3
Tails #
Люблю гуглить.
+1
mish #
наверно, лучше сделал или реализовал.
0
Aldanko #
Заменил на «сделал», выглядит получше, спасибо.
+4
borius #
Имхо, чем то напоминает конец 90ых, когда в моде были падающие снежники=))

Имеется ввиду, не особо удобно и не особо красиво =)

0
Aldanko #
:) В Firefox красиво, а удобство проявится, когда вы откроете эту листалку на iPad ;)
+1
borius #
Ну на iPad вполне возможно. У меня нету=) Не могу заценить к сожалению..=)

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

Кстати, было бы здорово добавить еще одну мелкую плюшечку, очень уж неэстетичность смотрится центр где переход между картинками, можно сделать более похожим на книжку, использую градиентную заливку центра (ну в самом центре черное 100% на расстоянии 20 пикселей от центра уже 0%)

0
Aldanko #
Ну по опыту использования подобных листалок на сайте, используется в почти полноэкранном режиме, дабы пользователь радовался и смотрел картинки. Хотя, конечно, связь была бы хороша, возможно, встрою какое-то API.

Тенюшки, конечно, будут, я уже занес подобную тему — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=3
0
borius #
Ну и продолжая, если вы уж решили идти по пути js, то нужно пользоваться благами этой технологии. =) А именно каждой страничке свой адресс, т.е. якорная навигация, если интересно у мя есть удобный своеручно написанный плагин для этих целей)

0
Aldanko #
+1, хороша идея :) Я себе тоже что-то подобное писал, но, на всякий случай, поделитесь своим. Сюда или на suhinini в гмейле.

Внесу в issue tracker
0
Aldanko #
0
borius #
Так обяснюю как оно работает

Сперва нужно проинклудить jquery.events.js (тоже мои плюшки), нужно чтобы делать свои события.

Для того чтобы сделать новое событие нужно вызвать метод
$.makeEvent(«Name_of_event»);

Для того чтобы прикрепить к нему функции (аля колбэк)
$.bindEvent(«Name_of_event», some_func);

Для того чтобы вызвать событие вам нужно вызвать функции
$.callEvent(«Name_of_event»);

Второе что нужно инклудить это AnchNav.
Когда загрузка документа завершилась нужно сделать
AnchNav.init()

После этого у вас доступно событие «AnchNav_changed»
к которому вы делает $.bind — всех нужных функции=).

Ну это еще не все, есть же случаи, когда нужно не из адресной строчки, менять адрес, а изнутри. Для этого есть функция

AnchNav.reload(func), где func возвращает строчку, с нужным hash адресом. =)

Cкачать отсюда можно
kusudama.me/store/anchnav.7z

0
Aldanko #
Спасибо, буду смотреть.
0
homm #
Очередной велосипед с квадратными колесами?
Чем $.bind() и $.triggerHandler() впал в немилость?
0
borius #
Это две разные вещи…

1) Мне не нужна привязка к элементам.
2) Мне нужны собственные события с собственными именами.

0
homm #
Вот второй пунт меня и настораживает:
eventType: A string containing one or more Javascript event types, such as «click» or «submit,» or custom event names.

0
borius #
И что, это самый удобный механизм для этого.

Вы явно не понимаете зачем нужна jquery.events.js

Она решает совсем другую вещь.

0
Panya #
1) В jquery у методов data/bind/unbind/trigger/triggerHandler нет привязки к дом-элементам. Можно запросто сделать:
var Broadcaster = $({});

и потом:
Broadcaster.bind('customEvent', function() {… });

а где надо:
Broadcaster.trigger('customEvent');

и все будет работать.

2) bind/unbind/trigger/triggerHandler побоку какое имя у события, можно создавать/вызывать свои кастомные события. У trigger нет завязки на dispatchEvent/fireEvent.
0
borius #
Хм=) спасибо за решение. (Эм признаю, велосипед детектед)

Ну все равно я не жалею, что изобрел этот велик=) Поучительно, да и не так много времени потратил всего то денек, а разобрался как там все внутри устроенно=)

0
Kolicher #
блин странички не рвутся…
0
Aldanko #
От все бы вам рвать и метать :) Возможно в будущем будет, но пока не вижу особого применения, кроме релаксации :)
0
Kolicher #
во во релаксация она самая :)
0
Aldanko #
Как вариант на будущее )
+1
tkf #
А можно ли сделать возможность задавать интерактивные блоки на странице? например как в том же megazine. Чтобы можно было кликнуть на размеченную область на рисунке и откроется в новой вкладке подробная информация, или окно какое всплывающее :)
0
Aldanko #
По идее можно через некое подобие imagemap — определять кликабельные регионы и проверять при клике.
+1
tkf #
тут скорей по клике надо будет определить текущую страницу, и положение относительно ее края, затем привести координаты в соответствие с масштабом (это если зум будет) и проверить в какой регион попали. Просто такой функционал вкупе с zoom'ом, делает такие каталоги удобней бумажных(хотя конечно в руках листать приятней), ибо можно узнавать подробней по нажатию рисунка. Сам использую для этого сейчас megazine но хотелось бы избавиться от единственного флешовского куска.
0
Aldanko #
Текущая страница всегда определена, это не проблема. Идея хорошая, можно подумать над реализацией, внесу в issue tracker.
0
tkf #
ну тут надо определить на какой из двух страниц был клик :) хотя делим область, просто если будет зум то в кадре будут не всегда обе страницы. А по поводу идей стоит глянуть функционал megazine3, одна из лучших флешовских листалок имхо.
0
Aldanko #
Определяется уже автоматически — ведь вы можете листать правую и левую страницы по отдельности. Листалку посмотрю, спасибо за наводку.
0
donnerjack13589 #
Chrome 6: картинка трясется при перелистывании
0
Aldanko #
Спасибо, читайте здесь: habrahabr.ru/blogs/jquery/93936/#comment_2852974
+2
slik #
0
Aldanko #
Классная тема, возможно переделаю на CSS3, спасибо!
0
lexich #
Удивительно что оно еще и под мобильным сафари работает, фигово но работает
0
Aldanko #
Я на iPad баловался, выглядит шикарно, только медленно :(. Там в коде для iPhone/iPad понижен fps и ускорен полет страницы
0
valCooL #
Берем за правый нижний угол, тянем вправо вниз, варьируя отклонение от диагонали — правый верхний угол перелистывается моментально.
0
valCooL #
Попробовал слева и — о боже
0
Aldanko #
Спасибо, уже находили. Занесено в issue tracker
0
valCooL #
Извините, забоянил :)
0
Aldanko #
Ничего, найденные баги это всегда хорошо, а просмотреть все комменты проблематично
0
Aldanko #
Спасибо, внес в issue tracker: jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=15
–1
MixailV #
Картинки, это конечно хорошо, но хотелось бы видеть на страницах реальный сверстанный контент. Иначе это просто баловство. И поплавнее бы, сечас fps ~10-15, этого для комфорта тоже мало.
0
Aldanko #
Ну «баловство» это громко сказано. Если бы в примере были сканы Playboy, вам было бы пофиг на контент :) Хотя контент, конечно, это хорошо, буду думать, возможно переделаю на работу с CSS 3 и получится ворочать контентом.
0
MixailV #
Отлично, хотя CSS3 пример, приведенный выше, вообще не заработал (Opera 10.53) :(
А целом идея классная, респект.
0
Aldanko #
Спасибо :)
0
tkf #
CSS3 пока поддерживается еще хуже чем canvas :) Хотя если будет альтернативный вариант рендера то почему бы и нет.
0
reket #
Красиво. Для полноты не хватает скругления в местах сгибов, сейчас при перелистывании страница просто складывается.
0
Aldanko #
Насколько я понимаю, в существующих листалках нет такого понятия как «скругление», это иллюзия, достигаемая с помощью градиентных теней у сгиба.
0
q0p #
полно офигенных готовых решений для галерей и прочего на CSS есть тут: www.cssplay.co.uk/
на это ОЧЕНЬ стоит посмотреть
0
Aldanko #
Спасибо, заценю при случае
0
lol2Fast4U #
Отлчино. Chrome 6.0.401.1 dev, Mac OS X Snow Leo — все быстро, сглажено и вообще :)
P.S. какой странный выбор код-хостинга
0
Aldanko #
Спасибо :)

По поводу хостинга — что подсказали, туда и всунул ) Своим сайтом, увы, пока не обладаю
0
lol2Fast4U #
ну так Launchpad же (:
0
Aldanko #
Ну дык :) В след раз буду знать куда идти )
–2
WAYS #
Не красивый, глючный, неудобный скрипт.
0
deniamnet #
напиши лучше, мы похвалим
–1
Clou #
Да, с огрехами. Да, не везде работает. Но это не что иное, как очередной камень в огород Adobe и флеша, в частности. С таким успехом уже брезжит свет хтмлного браузерного счастья. :-)
0
MixailV #
Да, через год-два хтмл будет силен, однозначно. И в принципе мелочи жизни, что на примитивном флеше такие листалки существуют уже 6 лет, у него уже нет шансов ;)
0
Aldanko #
:D Ну вообще этот проект хорош для тех устройств, где нет флеша — например, iPad. Там его нет и не предвидится, увы.
0
Aldanko #
Ну все в итоге выйдет на круги своя — флеш останется в нише игрушек, а с обычными красивостями сможет справляться и родной HTML 5
0
ignar #
Шикарно, вот и дожили до момента, когда HTML5 не просто спецификация :)
+1
Aldanko #
Ага :) Еще бы JS ускорить и улучшить имплементацию canvas — вообще мечта будет :)
0
irsick #
Отличная идея и изящная реализация. Возьму на заметку.

Несколько лет назад помню долго ломал голову над этой же задачей, пока не нашел реализацию на flash. Вот так это выглядело.
0
Aldanko #
Спасибо :)
0
deniamnet #
кстати, если бы еще тени добавить — было бы вообще здорово ;)
только не представляю, как
0
Aldanko #
Тени уже в issue list :) А вообще это отображение вдоль кромки страницы градиентной тени с разной длиной выступающей части в зависимости от положения страницы. Покопаться и будет все как надо :)
0
iamo0 #
Зачет! Но есть ровно три вопроса:
— А почему нельзя перелестнуть открывающуюся страницу сразу? Ну то есть когда я перелистываю страницу и открывается следующая/предыдущая, почему я не могу сразу перелистнуть и ее.
— Почему все анимации происходят так медленно?
— Почему нельзя перелистнуть страницу коротким движением?

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

А скрипт отличный. Главное плавно и быстро работает.

А, во! Чуть не забыл задать вопрос за который буду бит и обескармлен — а почему в ie не работает? ^_^
0
iamo0 #
О че нашел: www.imobilco.ru/books/-/449665/
0
Aldanko #
1. Кликайте по странице — будет вам быстро :)
2. Можно конфигурить параметрами fps и easing (скорость сближения)
3. Это можно сделать коротким кликом ;)

IE… :D Вот сделают в Internet Explorer 9 Platform Preview 3 тег — будет и там работать. Более того, с их GPU ускорением будет просто блеск.
0
iamo0 #
Кликать конечно можно. Но очень хочется быстро листать.

А про ИЕ я на самом деле на VML намекал )
0
Aldanko #
А у VML разве есть полноценная поддержка во всех браузерах?
0
iamo0 #
Эм. А у canvas тоже нет полноценной поддержки во всех браузерах. Поэтому взрослые дяди делают canvas + vml или svg + vml.
0
Aldanko #
Все браузеры кроме IE это почти все браузеры :) А если хочется настоящего кроссплатформенного решения, то взрослые дяди юзают Flash или Silverlight
0
iamo0 #
Все браузеры включая IE6 самые настоящие браузеры. И их игнорирование сродни расизму среди людей. А желание прибить IE6 это сродни ненависти к 70 летнему старичку, который медленно, скажем, переходит через дорогу, а все его за это хотят убить.

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

А так как у Flash целая куча недостатков именно в области применения в вебе, то самое взрослое и адекватное решение — canvas (или SVG, зависит от особенностей проекта) + VML.

А про Silverlight можно ничего не буду говорить?
0
Aldanko #
Ух, точку зрения свою, конечно, имею, но не буду переводить нейтральный креативный настрой топика в холивары, извините :)
0
iamo0 #
Мм. Ну ок.
+1
nail84 #
Chrome 4.1.249:

немного мышкой с зажатой страницей повозил)
0
Aldanko #
Круто :) Поправлю

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