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

[zencd]

Режим «hard» очень понравился! Мгновенная смена контента (мной по крайней мере) плохо воспринимается, а здесь и скорость максимальная, и эффективная иллюстрация «что это только что произошло» присутствует.

[Torvald3d]

Тоже понравился «hard», но хочется, чтобы расстояние за которое контент останавливается было больше раза в три, а уже после — плавная доводка. Чтобы более наглядно видеть откуда пришел — снизу или сверху.

[iserdmi]

Из документации:

distance по умолчанию 5
Расстояние в пикселях, которое остается до цели после мгновенного перемещения.

duration по умолчанию 50
Время, за которое будет пройден оставшийся путь.

Вы можете установить свои значения в передаваемых опциях. В вашем случае можно так:

$.scrollport( '#my_target', {
  mode: 'hard',
  distance: 15,
  duration: 150
} );

[Funcraft]

Наоборот, совсем не понравился. Может я ожидаю другого, но ощущение, что скролл просто отсутствует.

[calx]

Ощущение как от удара по голове. Х… к, где это я? Режим оправдывает название.

[DOLARiON]

«Эффект телепортации» — огонь! Очень понравился.
Для всяких «лэндингов», где необходима эффектность, на мой взгляд, самое то.

[Lungo]

А мне этот эффект не очень понравился, т.к. плохо видно куда листалось — вверх или вниз

[iserdmi]

Вы наверное имеете ввиду режим «hard». DOLARiON имел ввиду режим «soft», в этом режиме однозначно понятно, в каком направлении происходит движение.

[paramtamtam]

Если во время промотки скриптом до анкора поскроллить мышью — промотка прекращается. Я не знаю — баг это, или фича — но это чертовски здорово. Так и должно быть. Сохраните это. Если при «классическом» $("html, body").animate({...}, 2500); так сделать (например, во время «полета» вверх после прочтения длинной статьи попытаться внезапно остановиться на определенном моменте) — терпеть фиаско очень раздражает (Tumblr, привет).

[iserdmi]

Это не просто фича, это настраиваемая опция. Цитирую документацию:

interrupt_user по умолчанию true
Если во время работы плагина пользователь совершит принудительный скролл, движение вызванное работой плагина прекратится.

interrupt_scrollport по умолчанию true
Если во время работы плагина будет инициировано новое движение, прежнее прекратится. При значении false вызванное поверх существующего движение выполнено не будет.

interrupt
Принимает значение true или false, устанавливая такое же значение для опций interrupt_user и interrupt_scrollport

Если отключить прерывание, то во время пользовательского скролла даже экран дёргаться не будет, при обычном $.fn.animate экран начинает дребезжать.

[webkumo]

Можно ещё поработать над режимами:
— хард — кажется, что слишком дёрнулось и оттягивает назад,
— софт — забеление на белом фоне вызывает эффект ослепления, а не телепортации.

[Pomidoroff]

Нужен моушен блюр!

[dannote]

Хм, сделаю вечером пример с SVG-filters и без jQuery.

[iserdmi]

Точно! Будет.

[VasilioRuzanni]

Еще бы API в привычном JS-сообществу camelCase (жаль, что в JS принято не unix_snake_case) и без jQuery — цены бы ему не было :)

[iserdmi]

Хорошая идея! Сделаю возможно передачи опций в кэмэлкейсе. Напишу нативную версию. И сделаю возможность добавления пользовательских эффектов, и новых режимов, используя API предоставляемым скроллпортом. Вот тогда будет круто!

[beat]

Весит эта звезда в 30 раз больше чем строка, которая делает тоже самое.

а что бы ваша «звезда» работала нужно подключить jQuery + плагин на 500 строк просто для того чтобы прыгнуть к нужному контенту

[iserdmi]

Та «звезда» также джэйкверизависима. Вы чаще тянете джэйквери не только потому, что вам нужна анимация скролла, скорее есть еще что-то для чего вы его используете. Минифицированная версия джэйквери весит × киллобайта. Пишите строку в 78 байтов, итого получается 84 клиллобайта. Если берёте плагин «звезда», становится 86,4 киллбоайта. Если берёте «Scrollport.js» общий вес составит 95 киллобайт. Разве большая разница между 86,4 и 95 киллобайтами, однако в моем плагине 4 разных режима, в том числе тот для которого создан плагин «jQuery.scrollTo». Строчка кода указанная в статье тоже, кстати, требует подключения jQuery. Но в большинстве случаев функциональности строчки вполне хватает, так зачем же тянуть плагин в 2,4 киллобайта, если результат тот же?

Если у вас уже подключен джэйквери, и нужно просто «прыгнуть к нужному контенту», не используйте плагина, напишите строчку кода. Если у вас не подключен джэйквери, то, конечно, лучше найти решение на нативном яваскрипте.

В скоре напишу нативную версию плагина.

[webkumo]

А если режимы в разных js-ках написать (чтобы подключать только нужный режим)?

[iserdmi]

Пока что уникальная логика каждого из режимов занимает слишком мало места. Для первой версии было решено не делить режимы на разные файлы. Но я хочу сделать так, чтобы разработчик мог написать свой режим и легко внедрить его в плагин используя API. В таком случае будет удобно разбить режимы на файлы, чтобы разработчик мог увидеть живой пример, и по образу и подобию дописать свой режим.

[MichaelBorisov]

Предлагаю ввести еще один режим — «физический».

Задаться максимальным значением скорости и ускорения. Тогда прокрутка будет ускоряться при ее начале и замедляться при подходе к цели. Если расстояние прокрутки недостаточное для разгона до максимальной скорости — то достигнутая скорость будет меньше. Дополнительный плюс — человеческому мозгу нравится, когда явления на экране проходят по законам физики. Оказывается, что в раннем детстве наш мозг интенсивно «изучает» физику на феноменологическом уровне и научается различать, где законы механики соблюдаются, а где — нарушается. Это позволяет различать живые объекты от неживых. Живой объект может «нарушать» законы механики. Но некоторые законы (вроде мгновенного перемещения) не нарушают даже живые объекты, поэтому для зрительного восприятия они наиболее некомфортны.

[iserdmi]

Спасибо за идею. Сделаю.

[Invision70]

Классическая анимация скролла умещается в одну строчку:
$(“ html, body “).animate( { scrollTop: $( ‘#my_target’ ).offset().top }, 600 );

Обожаю такие примеры! Одна строчка кода и тянем еще увесистый jQuery. Действительно классика)

[gwer]

Так автор сравнивает эту строчку с плагином, который также тянет jQuery.

[jaguard]

>Мне нравится то, что происходит с вебом. Из неотесанных таблиц сайты превращаются в

в тормозящие чудовища, которые приводят в ужас мой айпад третьего поколения. Когда я его покупал, весь веб на нем летал со скоростью мысли. Теперь половина сайтов еле-еле грузится, а порой сжирает всю доступную память и роняет браузер.
Кстати, ваш плагин на нем тоже не работает — но я допускаю, что это из-за того, что система (а следовательно, и сафари) не обновлялась с момента покупки ни разу.

[iserdmi]

На мобильных устройствах плагин работает… не работает. Сегодня починю.

[vovkasolovev]

Если пофантазировать и развить мысль, думаю, что для добавления характера материала подойдут многие приёмы классической анимации (как реализовывать не представляю), например:

• Растяжение контента во время прокрутки и сжатие в начале и в конце действия.
• Anticipation начала и окончания, и использование изингов (изменение скорости от расстояния начальных и конечных точек).
• Secondary Action, например картинки догоняют позже букв.
• Добавить размытие контента для усиления эффекта скорости.
• Сделать движение контента не по прямой а по дуге, пустить волну.
• Плавно ослабить насыщенность цвета или прозрачность контента, а при завершении прокрутки усилить, чтобы отчеканить конец действия резким изменением контраста.

[Elendai]

По первому пункту получилось занимательно, но требует доработки. Возможно уважаемый iserdmi доведет мысль до ума:

.content-animate{
	animation: scrolltest .5s;
}
@keyframes scrolltest {
	0% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(0.5, 3);
	}
	100% {
		transform: scale(1, 1);
	}
}

[calx]

Вообще вопрос понятной и приятной глазу анимации прекрасно освещён в каноническом труде аниматоров студии Дисней ru.wikipedia.org/wiki/12_принципов_анимации
К скроллбарам применимы, как минимум, принципы 1, 2, 5 и 6.

[Pomidoroff]

Главное не забыть, что мы прокручиваем материал не ради прокрутки, а ради того чтобы переместится в нужную точку. Особые украшательства во время пути будут лишь отвлекать.

[calx]

Я тоже так думаю, но если ставится задача сделать какую-то нетривиальную анимацию, то стоит иметь в виду опыт профессионалов в этой области.

[Pomidoroff]

Область как раз другая. Обедняющее слово «анимация» обозначает лишь движение что свойственно многим областям. У Диснея цель привлечь к анимации внимание и перенести зрителя в воображаемый мир, а у дизайнера скрола сделать этот процесс минимально раздражающим и максимально естественным. Если скрол будет скакать и искрится я первым брошу камень в дизайнера.

[vovkasolovev]

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

[iserdmi]

Есть такая реализация. Цитирую документацию:

Если не передать ни одно из значений target, top или left, тогда target автоматически примет значение атрибута data-scrollport или href, или data-href.

link.scrollport_link( [ target ] [, options ] );

Причем вы можете прописать к ссылке атрибут data-scrollport и ссылка автоматически станет скроллпорт ссылкой, даже ничего не придется в своем яваскрипте прописывать.

[paulradzkov]

Хеш также должен меняться в адресной строке.

Поддерживаю. Важно улучшать поведение не ломая доступности. Эта опция должна быть включена по-умолчанию, но с возможностью выключить изменение url, если вдруг понадобится.

[xaja]

iPad iOS6 — не работает. какие-то моргания и все.

[DOLARiON]

Проект умер?
Что сейчас есть актуального с подобным функционалом?