Листалка страниц на 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

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 131

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

              jQuery Flip!

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

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

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

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

                        Не знаю как толковее объяснить, увы)
                        +1
                        А возможно ли реализовать увеличение содержимого, чтобы можно было вблизи посмотреть содержимое определенной страницы?
                        +7
                        Ещё что обнаружил: если потянуть за угол вниз, нижняя картинка урезается, поэтому видно картинку ещё ниже. Вот скрин:

                        Chrome 6.0.401
                      • UFO just landed and posted this here
                          0
                          То ли еще будет :)
                          +2
                          Вот такое заметил
                          артефакты

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

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

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

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

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

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

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

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

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

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

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

                                                  Сперва нужно проинклудить 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
                                                    Спасибо, буду смотреть.
                                                      0
                                                      Очередной велосипед с квадратными колесами?
                                                      Чем $.bind() и $.triggerHandler() впал в немилость?
                                                        0
                                                        Это две разные вещи…

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

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

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

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

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

                                                            0
                                                            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
                                                              Хм=) спасибо за решение. (Эм признаю, велосипед детектед)

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

                                            0
                                            блин странички не рвутся…
                                              0
                                              От все бы вам рвать и метать :) Возможно в будущем будет, но пока не вижу особого применения, кроме релаксации :)
                                                0
                                                во во релаксация она самая :)
                                                  0
                                                  Как вариант на будущее )
                                              +1
                                              А можно ли сделать возможность задавать интерактивные блоки на странице? например как в том же megazine. Чтобы можно было кликнуть на размеченную область на рисунке и откроется в новой вкладке подробная информация, или окно какое всплывающее :)
                                                0
                                                По идее можно через некое подобие imagemap — определять кликабельные регионы и проверять при клике.
                                                  +1
                                                  тут скорей по клике надо будет определить текущую страницу, и положение относительно ее края, затем привести координаты в соответствие с масштабом (это если зум будет) и проверить в какой регион попали. Просто такой функционал вкупе с zoom'ом, делает такие каталоги удобней бумажных(хотя конечно в руках листать приятней), ибо можно узнавать подробней по нажатию рисунка. Сам использую для этого сейчас megazine но хотелось бы избавиться от единственного флешовского куска.
                                                    0
                                                    Текущая страница всегда определена, это не проблема. Идея хорошая, можно подумать над реализацией, внесу в issue tracker.
                                                      0
                                                      ну тут надо определить на какой из двух страниц был клик :) хотя делим область, просто если будет зум то в кадре будут не всегда обе страницы. А по поводу идей стоит глянуть функционал megazine3, одна из лучших флешовских листалок имхо.
                                                        0
                                                        Определяется уже автоматически — ведь вы можете листать правую и левую страницы по отдельности. Листалку посмотрю, спасибо за наводку.
                                                0
                                                Chrome 6: картинка трясется при перелистывании
                                                +2
                                                  0
                                                  Классная тема, возможно переделаю на CSS3, спасибо!
                                                  0
                                                  Удивительно что оно еще и под мобильным сафари работает, фигово но работает
                                                    0
                                                    Я на iPad баловался, выглядит шикарно, только медленно :(. Там в коде для iPhone/iPad понижен fps и ускорен полет страницы
                                                    0
                                                    Берем за правый нижний угол, тянем вправо вниз, варьируя отклонение от диагонали — правый верхний угол перелистывается моментально.
                                                      0
                                                      Попробовал слева и — о боже
                                                        0
                                                        Спасибо, уже находили. Занесено в issue tracker
                                                          0
                                                          Извините, забоянил :)
                                                            0
                                                            Ничего, найденные баги это всегда хорошо, а просмотреть все комменты проблематично
                                                          0
                                                          Спасибо, внес в issue tracker: jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=15
                                                        • UFO just landed and posted this here
                                                            0
                                                            Ну «баловство» это громко сказано. Если бы в примере были сканы Playboy, вам было бы пофиг на контент :) Хотя контент, конечно, это хорошо, буду думать, возможно переделаю на работу с CSS 3 и получится ворочать контентом.
                                                            • UFO just landed and posted this here
                                                                0
                                                                Спасибо :)
                                                                0
                                                                CSS3 пока поддерживается еще хуже чем canvas :) Хотя если будет альтернативный вариант рендера то почему бы и нет.
                                                              0
                                                              Красиво. Для полноты не хватает скругления в местах сгибов, сейчас при перелистывании страница просто складывается.
                                                                0
                                                                Насколько я понимаю, в существующих листалках нет такого понятия как «скругление», это иллюзия, достигаемая с помощью градиентных теней у сгиба.
                                                                0
                                                                полно офигенных готовых решений для галерей и прочего на CSS есть тут: www.cssplay.co.uk/
                                                                на это ОЧЕНЬ стоит посмотреть
                                                                  0
                                                                  Спасибо, заценю при случае
                                                                  0
                                                                  Отлчино. Chrome 6.0.401.1 dev, Mac OS X Snow Leo — все быстро, сглажено и вообще :)
                                                                  P.S. какой странный выбор код-хостинга
                                                                    0
                                                                    Спасибо :)

                                                                    По поводу хостинга — что подсказали, туда и всунул ) Своим сайтом, увы, пока не обладаю
                                                                      0
                                                                      ну так Launchpad же (:
                                                                        0
                                                                        Ну дык :) В след раз буду знать куда идти )
                                                                    –2
                                                                    Не красивый, глючный, неудобный скрипт.
                                                                      0
                                                                      напиши лучше, мы похвалим
                                                                      –1
                                                                      Да, с огрехами. Да, не везде работает. Но это не что иное, как очередной камень в огород Adobe и флеша, в частности. С таким успехом уже брезжит свет хтмлного браузерного счастья. :-)
                                                                      • UFO just landed and posted this here
                                                                          0
                                                                          :D Ну вообще этот проект хорош для тех устройств, где нет флеша — например, iPad. Там его нет и не предвидится, увы.
                                                                          0
                                                                          Ну все в итоге выйдет на круги своя — флеш останется в нише игрушек, а с обычными красивостями сможет справляться и родной HTML 5
                                                                          0
                                                                          Шикарно, вот и дожили до момента, когда HTML5 не просто спецификация :)
                                                                            +1
                                                                            Ага :) Еще бы JS ускорить и улучшить имплементацию canvas — вообще мечта будет :)
                                                                            0
                                                                            Отличная идея и изящная реализация. Возьму на заметку.

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

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

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

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

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

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

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

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

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

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

                                                                                    Only users with full accounts can post comments. Log in, please.