Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 131
А пример?
Recommended download по ссылке. Некуда пример выкладывать
Примеры можно на дропбокс выкладывать, дигг эффект держит на отлично, затрат 0.
Спасибо, сейчас попробую там разместить
Вот инструкция если что: habrahabr.ru/blogs/hosting/83418/
Редко получается, лично у меня html в упор не видет.
Вот парочка примеров:
dl.dropbox.com/u/4456823/ru_jqapi/index.html
dl.dropbox.com/u/3499829/learnkana/index.html
Вот я выше давал ссылку на инструкцию: habrahabr.ru/blogs/hosting/83418/
dl.dropbox.com/u/4456823/ru_jqapi/index.html
dl.dropbox.com/u/3499829/learnkana/index.html
Вот я выше давал ссылку на инструкцию: habrahabr.ru/blogs/hosting/83418/
Я так понимаю, что работает у win пользователей, лично у меня 404 всегда.
ну низна, у меня линукс, и все было ок вроде бы
Только, что проверил на сервере. Работает. А вот на MacOS не хочет. Даже если chmod выствлять через консоль.
У меня Mac OS и работает, хотя до этого был период, когда не работало… На форуме писали, что они «банили» некоторые диапозоны русских IP адресов, очень возможно, что Вы попали в такой…
О, спасибо, классный сервис, есть подобные, но этот как-то, просто, красиво, качественно :)
а демка есть посмотреть?
Спасибо за примеры, неплохая листалка.
позвольте добавлю с вашему посту интересный и чем-то немного похожий на ваш плагин (заранее извиняюсь за оффтоп)
jQuery Flip!
Вот демонстрация работы:
т.е. тоже можно каким-то образом использовать для страниц, только надо продумать грамотно изменение контента
позвольте добавлю с вашему посту интересный и чем-то немного похожий на ваш плагин (заранее извиняюсь за оффтоп)
jQuery Flip!
Вот демонстрация работы:
т.е. тоже можно каким-то образом использовать для страниц, только надо продумать грамотно изменение контента
Да, знаю, под этой версией все тестировалось :) Дрожь только в хроме, ни в Firefox, ни в Safari этого не наблюдается. Учитывая то, что только в хроме границы страниц выглядят рвано — могу предположить, что это проблема anti-aliasing для канваса. В Firefox края страниц при листании гладенькие — сглаживание есть.
В опере все ок! :)
Супер! Версия? Проапдейчу описание проекта и статью.
Отвечу и я тоже по поводу работы в опере. У меня 10.53, но думаю заработает и в 10.50 :) возможно и с 10 версии начиная, не помню когда именно canvas добавили. Причем вроде начиная с 10.50 если рисунки выключенны, или стоят грузить закэшированные то в canvas их также нельзя загрузить, таки вот дела.
10.53
Последний глобальный апдейт рендера Оперы — 10.50.
Последний глобальный апдейт рендера Оперы — 10.50.
9.6 работает без проблем.
В шестом хромиуме всё тоже самое
6.0.407.0 (0)
6.0.407.0 (0)
Еще глюк.
Если взяв страницу свернуть ее в диагональ от нижнего левого до правого верхнего угла, то страничка пропадает/прыгает/появляются артефакты.
Не знаю как толковее объяснить, увы)
Если взяв страницу свернуть ее в диагональ от нижнего левого до правого верхнего угла, то страничка пропадает/прыгает/появляются артефакты.
Не знаю как толковее объяснить, увы)
Браузер — Хром
Если ухаватить за левый нижний угол и сделать оборот по часовой стрелки, то получается такой артефакт: i47.tinypic.com/xmlbao.png (оранжевым показана траектория движения мыши).
ФФ 3.6.3
ФФ 3.6.3
Спасибо, уже было здесь: habrahabr.ru/blogs/jquery/93936/#comment_2853104
Занесено сюда — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=9
Занесено сюда — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=9
А возможно ли реализовать увеличение содержимого, чтобы можно было вблизи посмотреть содержимое определенной страницы?
Спасибо за идею, внес на будущее — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=12
Ещё что обнаружил: если потянуть за угол вниз, нижняя картинка урезается, поэтому видно картинку ещё ниже. Вот скрин:
Chrome 6.0.401
Chrome 6.0.401
Спасибо, вижу. Исправлю к 1.0
Занес в issue tracker: jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=9
FF 3.5.9 — то же самое
Вот такое заметил
При перелиствовании перекрывается предыдущая страница новой. причем степень заполнения. зависит от движений мышки.
При перелиствовании перекрывается предыдущая страница новой. причем степень заполнения. зависит от движений мышки.
Спасибо, занес в issue tracker — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=10
Проблема в маленьких углах — при них сильно вырастают тангенсы и надо делать очень большие clipping regions. Буду бороться.
Проблема в маленьких углах — при них сильно вырастают тангенсы и надо делать очень большие clipping regions. Буду бороться.
Хоть бы один комментарий в коде…
Все классно. Красиво. И ложка дегтя в виде загрузки 1 ядра на все 100% в ff3.6
Нагрузка должна быть такая или это только в ff так?
Нагрузка должна быть такая или это только в ff так?
Не должно, конечно же. У меня в Chrome 4.0 загрузка одного ядра на 26% и только при таскании. В Firefox в целом медленнее, чем в Chrome, но зато красивее и со сглаживанием.
Стоит вопрос об оптимизации перерисовки — не алгоритма, а именно способа. Сейчас используется setTimeout(invalidate, 1000 / fps), что, наверное, не лучший вариант. Если кто-нибудь подскажет хорошую альтернативу — буду только рад.
Стоит вопрос об оптимизации перерисовки — не алгоритма, а именно способа. Сейчас используется setTimeout(invalidate, 1000 / fps), что, наверное, не лучший вариант. Если кто-нибудь подскажет хорошую альтернативу — буду только рад.
Зачем писать слово «заимплементил», вместо «осуществил». Вы заставляете меня гуглить. =(
Имхо, чем то напоминает конец 90ых, когда в моде были падающие снежники=))
Имеется ввиду, не особо удобно и не особо красиво =)
Имеется ввиду, не особо удобно и не особо красиво =)
:) В Firefox красиво, а удобство проявится, когда вы откроете эту листалку на iPad ;)
Ну на iPad вполне возможно. У меня нету=) Не могу заценить к сожалению..=)
Но опять таки, я приверженец того, чтобы была связь между компонентами на странице. А ваш плагин достаточно сложно уместно встроить=)
Кстати, было бы здорово добавить еще одну мелкую плюшечку, очень уж неэстетичность смотрится центр где переход между картинками, можно сделать более похожим на книжку, использую градиентную заливку центра (ну в самом центре черное 100% на расстоянии 20 пикселей от центра уже 0%)
Но опять таки, я приверженец того, чтобы была связь между компонентами на странице. А ваш плагин достаточно сложно уместно встроить=)
Кстати, было бы здорово добавить еще одну мелкую плюшечку, очень уж неэстетичность смотрится центр где переход между картинками, можно сделать более похожим на книжку, использую градиентную заливку центра (ну в самом центре черное 100% на расстоянии 20 пикселей от центра уже 0%)
Ну по опыту использования подобных листалок на сайте, используется в почти полноэкранном режиме, дабы пользователь радовался и смотрел картинки. Хотя, конечно, связь была бы хороша, возможно, встрою какое-то API.
Тенюшки, конечно, будут, я уже занес подобную тему — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=3
Тенюшки, конечно, будут, я уже занес подобную тему — jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=3
Ну и продолжая, если вы уж решили идти по пути js, то нужно пользоваться благами этой технологии. =) А именно каждой страничке свой адресс, т.е. якорная навигация, если интересно у мя есть удобный своеручно написанный плагин для этих целей)
+1, хороша идея :) Я себе тоже что-то подобное писал, но, на всякий случай, поделитесь своим. Сюда или на suhinini в гмейле.
Внесу в issue tracker
Внесу в issue tracker
Так обяснюю как оно работает
Сперва нужно проинклудить 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
Сперва нужно проинклудить 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
Спасибо, буду смотреть.
Очередной велосипед с квадратными колесами?
Чем $.bind() и $.triggerHandler() впал в немилость?
Чем $.bind() и $.triggerHandler() впал в немилость?
Это две разные вещи…
1) Мне не нужна привязка к элементам.
2) Мне нужны собственные события с собственными именами.
1) Мне не нужна привязка к элементам.
2) Мне нужны собственные события с собственными именами.
Вот второй пунт меня и настораживает:
eventType: A string containing one or more Javascript event types, such as «click» or «submit,» or custom event names.
1) В jquery у методов data/bind/unbind/trigger/triggerHandler нет привязки к дом-элементам. Можно запросто сделать:
var Broadcaster = $({});
и потом:
Broadcaster.bind('customEvent', function() {… });
а где надо:
Broadcaster.trigger('customEvent');
и все будет работать.
2) bind/unbind/trigger/triggerHandler побоку какое имя у события, можно создавать/вызывать свои кастомные события. У trigger нет завязки на dispatchEvent/fireEvent.
var Broadcaster = $({});
и потом:
Broadcaster.bind('customEvent', function() {… });
а где надо:
Broadcaster.trigger('customEvent');
и все будет работать.
2) bind/unbind/trigger/triggerHandler побоку какое имя у события, можно создавать/вызывать свои кастомные события. У trigger нет завязки на dispatchEvent/fireEvent.
блин странички не рвутся…
А можно ли сделать возможность задавать интерактивные блоки на странице? например как в том же megazine. Чтобы можно было кликнуть на размеченную область на рисунке и откроется в новой вкладке подробная информация, или окно какое всплывающее :)
По идее можно через некое подобие imagemap — определять кликабельные регионы и проверять при клике.
тут скорей по клике надо будет определить текущую страницу, и положение относительно ее края, затем привести координаты в соответствие с масштабом (это если зум будет) и проверить в какой регион попали. Просто такой функционал вкупе с zoom'ом, делает такие каталоги удобней бумажных(хотя конечно в руках листать приятней), ибо можно узнавать подробней по нажатию рисунка. Сам использую для этого сейчас megazine но хотелось бы избавиться от единственного флешовского куска.
Текущая страница всегда определена, это не проблема. Идея хорошая, можно подумать над реализацией, внесу в issue tracker.
Chrome 6: картинка трясется при перелистывании
Спасибо, читайте здесь: habrahabr.ru/blogs/jquery/93936/#comment_2852974
Удивительно что оно еще и под мобильным сафари работает, фигово но работает
Берем за правый нижний угол, тянем вправо вниз, варьируя отклонение от диагонали — правый верхний угол перелистывается моментально.
Попробовал слева и — о боже
Спасибо, внес в issue tracker: jpageflipper.codeplex.com/WorkItem/View.aspx?WorkItemId=15
Красиво. Для полноты не хватает скругления в местах сгибов, сейчас при перелистывании страница просто складывается.
полно офигенных готовых решений для галерей и прочего на CSS есть тут: www.cssplay.co.uk/
на это ОЧЕНЬ стоит посмотреть
на это ОЧЕНЬ стоит посмотреть
Отлчино. Chrome 6.0.401.1 dev, Mac OS X Snow Leo — все быстро, сглажено и вообще :)
P.S. какой странный выбор код-хостинга
P.S. какой странный выбор код-хостинга
Не красивый, глючный, неудобный скрипт.
Да, с огрехами. Да, не везде работает. Но это не что иное, как очередной камень в огород Adobe и флеша, в частности. С таким успехом уже брезжит свет хтмлного браузерного счастья. :-)
Шикарно, вот и дожили до момента, когда HTML5 не просто спецификация :)
Отличная идея и изящная реализация. Возьму на заметку.
Несколько лет назад помню долго ломал голову над этой же задачей, пока не нашел реализацию на flash. Вот так это выглядело.
Несколько лет назад помню долго ломал голову над этой же задачей, пока не нашел реализацию на flash. Вот так это выглядело.
кстати, если бы еще тени добавить — было бы вообще здорово ;)
только не представляю, как
только не представляю, как
Зачет! Но есть ровно три вопроса:
— А почему нельзя перелестнуть открывающуюся страницу сразу? Ну то есть когда я перелистываю страницу и открывается следующая/предыдущая, почему я не могу сразу перелистнуть и ее.
— Почему все анимации происходят так медленно?
— Почему нельзя перелистнуть страницу коротким движением?
Собственно мне кажется второй вопрос является в какой то мере ответом на первый. Понятно что это нетривиальная и сложная задача, но наличие клевого эффекта развращает и требует полной реалистичности, ничего не могу с собой поделать )
А скрипт отличный. Главное плавно и быстро работает.
А, во! Чуть не забыл задать вопрос за который буду бит и обескармлен — а почему в ie не работает? ^_^
— А почему нельзя перелестнуть открывающуюся страницу сразу? Ну то есть когда я перелистываю страницу и открывается следующая/предыдущая, почему я не могу сразу перелистнуть и ее.
— Почему все анимации происходят так медленно?
— Почему нельзя перелистнуть страницу коротким движением?
Собственно мне кажется второй вопрос является в какой то мере ответом на первый. Понятно что это нетривиальная и сложная задача, но наличие клевого эффекта развращает и требует полной реалистичности, ничего не могу с собой поделать )
А скрипт отличный. Главное плавно и быстро работает.
А, во! Чуть не забыл задать вопрос за который буду бит и обескармлен — а почему в ie не работает? ^_^
О че нашел: www.imobilco.ru/books/-/449665/
1. Кликайте по странице — будет вам быстро :)
2. Можно конфигурить параметрами fps и easing (скорость сближения)
3. Это можно сделать коротким кликом ;)
IE… :D Вот сделают в Internet Explorer 9 Platform Preview 3 тег — будет и там работать. Более того, с их GPU ускорением будет просто блеск.
2. Можно конфигурить параметрами fps и easing (скорость сближения)
3. Это можно сделать коротким кликом ;)
IE… :D Вот сделают в Internet Explorer 9 Platform Preview 3 тег — будет и там работать. Более того, с их GPU ускорением будет просто блеск.
Кликать конечно можно. Но очень хочется быстро листать.
А про ИЕ я на самом деле на VML намекал )
А про ИЕ я на самом деле на VML намекал )
А у VML разве есть полноценная поддержка во всех браузерах?
Эм. А у canvas тоже нет полноценной поддержки во всех браузерах. Поэтому взрослые дяди делают canvas + vml или svg + vml.
Все браузеры кроме IE это почти все браузеры :) А если хочется настоящего кроссплатформенного решения, то взрослые дяди юзают Flash или Silverlight
Все браузеры включая IE6 самые настоящие браузеры. И их игнорирование сродни расизму среди людей. А желание прибить IE6 это сродни ненависти к 70 летнему старичку, который медленно, скажем, переходит через дорогу, а все его за это хотят убить.
Когда разрабатывается какой-то проект, должны учитываться не предпочтения конкретного разработчика. Надо ориентироваться на тех, кто будет этим пользоваться. И этих людей нельзя списывать со счетов.
А так как у Flash целая куча недостатков именно в области применения в вебе, то самое взрослое и адекватное решение — canvas (или SVG, зависит от особенностей проекта) + VML.
А про Silverlight можно ничего не буду говорить?
Когда разрабатывается какой-то проект, должны учитываться не предпочтения конкретного разработчика. Надо ориентироваться на тех, кто будет этим пользоваться. И этих людей нельзя списывать со счетов.
А так как у Flash целая куча недостатков именно в области применения в вебе, то самое взрослое и адекватное решение — canvas (или SVG, зависит от особенностей проекта) + VML.
А про Silverlight можно ничего не буду говорить?
Chrome 4.1.249:
немного мышкой с зажатой страницей повозил)
немного мышкой с зажатой страницей повозил)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Листалка страниц на HTML5 canvas