iserdmi May 20 2015 at 16:09

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

3 min

45K

JavaScript*jQuery*Website development*

+40

Comments 39

zencd May 20 2015 at 16:33

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

Torvald3d May 20 2015 at 19:34

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

iserdmi May 20 2015 at 19:52

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

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

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

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

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

Funcraft May 20 2015 at 23:50

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

calx May 21 2015 at 10:14

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

DOLARiON May 20 2015 at 16:57

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

Lungo May 20 2015 at 22:12

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

iserdmi May 21 2015 at 12:08

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

paramtamtam May 20 2015 at 17:09

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

iserdmi May 20 2015 at 17:25

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

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

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

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

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

webkumo May 20 2015 at 17:09

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

Pomidoroff May 20 2015 at 17:16

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

dannote May 20 2015 at 18:18

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

iserdmi May 20 2015 at 18:19

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

VasilioRuzanni May 20 2015 at 17:55

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

iserdmi May 20 2015 at 18:22

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

beat May 20 2015 at 17:58

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

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

iserdmi May 20 2015 at 18:18

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

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

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

webkumo May 20 2015 at 21:40

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

iserdmi May 21 2015 at 12:13

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

MichaelBorisov May 20 2015 at 20:55

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

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

iserdmi May 21 2015 at 12:10

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

Invision70 May 20 2015 at 21:58

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

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

gwer May 21 2015 at 08:36

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

jaguard May 20 2015 at 23:37

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

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

iserdmi May 21 2015 at 12:15

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

vovkasolovev May 21 2015 at 02:06

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

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

Elendai May 21 2015 at 10:03

По первому пункту получилось занимательно, но требует доработки. Возможно уважаемый 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 May 21 2015 at 10:23

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

Pomidoroff May 21 2015 at 11:32

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

calx May 21 2015 at 11:37

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

Pomidoroff May 21 2015 at 11:53

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

vovkasolovev May 21 2015 at 22:58

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

wdmaster May 25 2015 at 03:57

// Инициализации анимации скролла к элементу с id «my_target».
$.scrollport( ‘#my_target’ );

// При нажатии на ссылку с id «my_link», будет инициирована  анимация скролла к элементу с id «my_target». 
$( ‘#my_link’ ).scrollport_link( ‘#my_target’ );

// Инициализации анимации скролла с указанием настроек, в которых также указан режим работы плагина «roll».
$.scrollport( ‘#my_target’, { mode: ‘roll’, speed: 1500 } );

Не увидел более логичную реализацию

$(".link a").scrollport();

Где id остановки берется из хеша у атрибута href тега a. В основном именно такая реализация навигации по странице чаще всего используется. Так как может появиться необходимость поделиться URL с хешем. Хеш также должен меняться в адресной строке.
Мне понравился плагин, думаю, его можно использовать для эффектного скролла на промо страницах.
Но когда нажал на ссылку в демо и, логически, страница должна листаться вниз, а она выезжает сверху, это сбивает с толку, теряется ориентация и приходится смотреть на вертикальный скролл браузера, чтобы сообразить, в каком месте ты находишься. Для страниц с документацией явно не подойдет :D А на реальном проекте интересно было бы посмотреть. В рабочий проект, без тестов я бы внедрял такой функционал с осторожностью.

wdmaster May 25 2015 at 04:02

Было бы приколько также увидеть что-то такое (прим AnimateCSS):

// fadeInLeft, fadeInRight, fadeInBottom, fadeIntop
$(".link a").scrollport({
    direction : "fadeInLeft"
});

iserdmi May 25 2015 at 15:16

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

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

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

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

paulradzkov May 25 2015 at 16:31

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

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

xaja May 27 2015 at 22:33

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

DOLARiON Oct 30 2018 at 10:53

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