Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Скроллинг в коментах

Чулан
Так как сам являюсь больше читателем (статей на Хабре и их обсуждений), чем писателем (и программистом), хочу предложить созидающей части Хабра (тем, которые «Чукча писатель», а точнее — программирующим) новую идею (надеюсь, что не придумал «баян»).
Читать дальше →
Всего голосов 12: ↑4 и ↓8 -4
Просмотры200
Комментарии 14

ScrollAll (скрипт для Greasemonkey)

Firefox
Читаю Хабраленту в Google Reader, и давно заметил, что в ней с завидной регулярностью появляются блоки с прокруткой на пару пикселей, которые не дают скроллить дальше всю ленту. Приходится отводить мышу к скроллбару окна — не трудно, конечно, но раздражает, особенно когда читаешь «по диагонали». Поэтому был написан скрипт, который находит все такие элементы и временно блокирует скроллинг, когда элемент прокручен до конца, тем самым позволяя прокручивать страницу вниз.

скрипт под катом
Всего голосов 5: ↑4 и ↓1 +3
Просмотры886
Комментарии 7

Якоб Нильсен :: Прокрутка и внимание

Интерфейсы
image

Представляю вашему вниманию мой второй перевод — новую статью Якоба Нильсена, вышедшую вчера.

Пользователи интернета тратят 80% времени, изучая информацию на «первом экране». Несмотря на то, что прокруткой они тоже пользуются, только 20% их внимания приходится на то, что расположено ниже «первого экрана».

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

Читаем дальше?
Всего голосов 75: ↑66 и ↓9 +57
Просмотры6.3K
Комментарии 47

Бесконечный скроллинг хабра

Чулан
На некоторых сайтах видел функцию подгрузки тела сайта по мере его прокрутки вниз. А, не найдя ни одного упоминания об использовании подобной функции на хабре, решил написать свой вариант юзерскрипта под Greasmonkey, а заодно и потрогать jQuery.
Пока имеются некоторые некритические недоработки, но в целом он работает стабильно при просмотре лент сообщений (для чего он собственно и разрабатывался). Хотелось бы увидеть отзывы, предложения и комментарии.

/upd 2010-04-27:
[+] свертывание/развертывание футера;
[*] подгрузка комментариев в хабрацентре
[*] подгрузка списка людей в хабра/людях.
Всего голосов 28: ↑22 и ↓6 +16
Просмотры367
Комментарии 18

Фон сайта и проблема с быстродействием на нетбуках

Браузеры
Я до последнего времени находился в твердой уверенности что современный компьютер легко перемалывает любые обычные html/css сайты, не сильно злоупотребляющие всякой интерактивностью, аяксом и флешом. Оказывается — я ошибался (неудивительно — я не эксперт в этом вопросе)

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

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

Делать специальную версию сайта для нетбуков — вероятно смысла не имеет, поэтому для облегчения жизни обладателей слабых компьютеров можно применить user css, перегрузив значения свойства background. Чтоб фон скролился — уберите строку background-image:none;, если хотите просто убрать фон — оставьте как есть и сохраните в текстовый файл.

body
{
background-attachment: scroll;
background-image:none;
}


Читать дальше →
Всего голосов 25: ↑12 и ↓13 -1
Просмотры1K
Комментарии 26

Создатель CSS предлагает убрать скроллбар и сам скроллинг из браузеров

IT-стандарты


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

Читать дальше →
Всего голосов 100: ↑65 и ↓35 +30
Просмотры5.9K
Комментарии 152

USPTO предварительно аннулировало патент Apple на скроллинг

Интерфейсы
Патентное ведомство США предварительно признало недействительным знаменитый патент № 7,469,381, в том числе часть 19, которую компания Apple успешно использовала против Samsung, Nokia и HTC. Пересмотр осуществлён на основании дополнительной информации, предоставленной неназванным источником весной этого года.

На основании новой информации эксперты USPTO констатировали, что изобретение, аналогичное описанному в патенте № 7,469,381, существовало раньше (prior art). Кроме очевидности, в качестве мотивировки для аннулирования патента эксперты указали «отсутствие новизны».
Читать дальше →
Всего голосов 59: ↑50 и ↓9 +41
Просмотры25K
Комментарии 31

Кастомизация скроллбаров в браузере: компромисс между технологиями html, css, js и удобством использования

Разработка веб-сайтовJavaScript
Из песочницы
Приветствую всех!


Статья посвещена решению проблемы кастомизации скроллбаров браузера ради воплощения в жизнь амбициозных идей дизайнера. Статья расчитана на тех, кто свободно ориентируется в технологиях html, css, js, т.к. предлагаемое решение основано на их компромиссном использовании.



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

Читать дальше →
Всего голосов 39: ↑29 и ↓10 +19
Просмотры58.2K
Комментарии 54

Горизонтальный скролл становится модным. Разберемся в этом

SketchBuilderВеб-дизайнИнтерфейсыUsability
Перевод
В последнее время все более популярным становится подход в проектировании сайтов с использованием горизонтального скролла. Нас очень беспокоит целесообразность и юзабилити данного подхода. Чтобы разобраться в этом вопросе, мы перевели статью посвященную горизонтальному скроллу. Предлагаем ознакомиться с материалом и обсудить данную тему в комментариях…


Оригинальное название публикации: “Иск против горизонтального скролла”
Читать дальше →
Всего голосов 13: ↑9 и ↓4 +5
Просмотры58.2K
Комментарии 16

Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить

Веб-дизайнИнтерфейсыUsability
Перевод


Мы все это видели. Вы заходите на веб-сайт — и вот она: большая, красивая фотография во весь экран. Сейчас это огромный (каламбур) тренд в веб-дизайне, и похоже, что людям это нравится.
Но так ли это?
Всего голосов 64: ↑53 и ↓11 +42
Просмотры63.3K
Комментарии 57

Scrollport.js — новая анимация скролла

Разработка веб-сайтовJavaScriptjQuery
image

Анимация скролла к месту страницы с момента изобретения почти не подвергалась никаким модификациям, никак не украшалась. Да никому и не надо вроде, и так все работает. Говоришь куда скроллить и за сколько нужно добраться. Всё.

Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 3 способа для более интересной анимации. В итоге завернул все в плагин «Scrollport.js» с 3 новыми и 1 классическим режимом. Смотрите демо и проходите под кат.
Читать дальше →
Всего голосов 60: ↑50 и ↓10 +40
Просмотры44.2K
Комментарии 39

Прокрутка в вебе: букварь

Разработка веб-сайтовБраузеры
Перевод
Автор — Нолан Лоусон, менеджер проекта Microsoft Edge

Прокрутка — одно из самых древних взаимодействий в вебе. Задолго до появления методов pull-to-refresh и списков бесконечной загрузки скромная полоса прокрутки решила изначальную проблему масштабирования в вебе: как взаимодействовать с контентом, который распространяется за пределы доступной области просмотра?

Сегодня прокрутка всё ещё остаётся самым фундаментальным взаимодействием в Сети, и, возможно, самым неправильно понятым. Например, вы знаете разницу между следующими сценариями?

  • Пользователь прокручивает страницу двумя пальцами на тачпаде
  • Пользователь прокручивает одним пальцем на тачскрине
  • Пользователь прокручивает колесо мыши
  • Пользователь щёлкает по полосе прокрутки и тянет её вниз и вверх
  • Пользователь нажимает стрелки «вверх», «вниз», PageUp, PageDown и «пробел» на клавиатуре

Если спросите среднего интернет-пользователя (или даже среднего веб-разработчика!), они могут сказать вам, что эти действия равнозначны. Правда гораздо более интересна.
Читать дальше →
Всего голосов 26: ↑24 и ↓2 +22
Просмотры18.6K
Комментарии 12

Хватит делать сайты с бесконечной прокруткойǃ

Веб-дизайнИнтерфейсыДизайн мобильных приложенийДизайн
Перевод


TL;DR. Хотя бесконечная прокрутка подходит для некоторых случаев, но она может создать проблемы.

Бесконечная прокрутка может быть дезориентирующей, неконтролируемой и вызывать стресс у пользователей.

В этой статье мы объясним, почему нужно прекратить создание сайтов с бесконечной прокруткой. Но для начала рассмотрим краткую историю вопроса.
Читать дальше →
Всего голосов 140: ↑128 и ↓12 +116
Просмотры68.9K
Комментарии 208

Переходы между экранами в Legend of Zelda используют недокументированные возможности NES

Ненормальное программированиеРазработка игрДизайн игрСтарое железоИгры и игровые приставки
Перевод
Для эффекта вертикального скроллинга в первой части «The Legend of Zelda» используются манипуляции графическим «железом» NES, скорее всего не предусмотренные разработчиками консоли.


У меня нет доступа к официальной документации Picture Processing Unit (PPU — графический чип) консоли NES, поэтому мои заявления о «неопределённом поведении» скорее ближе к догадкам. Спецификацию работы графического оборудования я взял из NesDev Wiki. PPU управляется записью в регистры с отображением в память. Если использовать эти регистры так, как это было (похоже) задумано проектировщиками, то добиться этого эффекта было бы невозможно:


При скроллинге экрана по вертикали весь экран должен скроллиться разом. В предыдущем GIF показан пример частичного вертикального скроллинга. Часть экрана остаётся стационарной (элементы интерфейса), а другая часть (игровая область) прокручивается по вертикали. Частичный вертикальный скроллинг невозможно реализовать при «стандартной» работе с PPU.

В отличие от него, частичный горизонтальный скроллинг полностью определён и возможен.


Запись в отдельный регистр PPU в момент отрисовки кадра может привести к графическим артефактам. The Legend of Zelda намеренно вызывает артефакт, который проявляется как частичный вертикальный скроллинг. В этом посте я немного расскажу о графическом оборудовании NES и объясню, как работает трюк с вертикальным скроллингом.
Читать дальше →
Всего голосов 71: ↑69 и ↓2 +67
Просмотры19.7K
Комментарии 8

Как мы делали график с горизонтальным скроллом на d3.js

SimbirSoftРазработка веб-сайтовJavaScriptПрограммированиеReactJS

Если в приложении нужно выводить много графических данных, диаграмм, интерактивных виджетов – важно позаботиться о UX, чтобы пользователю было удобно работать. Способ вывода данных особенно важен, если приложение открывают и на мониторах, и на смартфонах. Делимся опытом, как мы реализовали достаточно нетривиальное решение – кастомный скролл с помощью библиотеки визуализации данных d3.js.


Читать дальше →
Всего голосов 7: ↑7 и ↓0 +7
Просмотры3.2K
Комментарии 2

Обзор технологий скроллинга

RUVDS.comРазработка веб-сайтовCSSИнтерфейсыДизайн
Перевод
Анимации, имеющие отношение к скроллингу веб-страниц, существуют уже многие годы. В последнее время подобные анимации стали распространённее. Возможно, дело тут отчасти в том, что устройства, используемые для работы в интернете, стали мощнее. Эти устройства способны нормально обрабатывать и выводить больше визуальных эффектов, чем раньше.



Существует множество технологий, связанных со скроллингом. Цель этой статьи заключается в том, чтобы дать обзор таких технологий и инструментов, которые помогут подобрать и создать то, что нужно в каждой конкретной ситуации. Я разделил бы технологии скроллинга на две широкие категории. В первую входят технологии для реализации специфических механизмов скроллинга, во вторую — технологии скроллинга общего назначения.
Читать дальше →
Всего голосов 29: ↑29 и ↓0 +29
Просмотры11K
Комментарии 3