Pull to refresh

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

Reading time 3 min
Views 45K
image

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

Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 3 способа для более интересной анимации. В итоге завернул все в плагин «Scrollport.js» с 3 новыми и 1 классическим режимом. Смотрите демо и проходите под кат.

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

Строчка эта весит 78 байт. Однако существует очень популярный плагин jQuery.scrollTo на момент написания статьи у него 2132 звёздочек, а используется он более чем на 30 000 сайтах! Весит эта звезда в 30 раз больше чем строка, которая делает тоже самое. Есть, конечно, у этого плагина куча всяких примочек, но они для редких случаев.

Я не считаю целесообразным использовать плагин, если одна строка делает то же самое. «Scrollport.js» хоть и пожирнее упомянутого плагина, но зато делает вещи, которые в одну строчку не уместятся. А в качестве бонуса добавлена вспомогательная функция для создания ссылок, которые будут инициировать анимацию скролла.

Как использовать


Подключите JS файл с плагином, пишите:

// Инициализации анимации скролла к элементу с 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 } );

В плагин можно передавать различные настройки, обращаться к API, да и способов вызова анимации множество. За подробностями обратитесь к ридми репозитория на гитхабе.

4 разновидности режимов


В настройках к плагину можно передать один из 4 режимов: usual, roll, hard или soft. Рассмотрим каждый по порядку.

Usual

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

Хотя есть одна вещь, которая раздражает. Если сказано, что на месте нужно оказаться за одну секунду, то всё выглядит не плохо на больших и средних расстояниях. Но если мы вызываем анимацию за 100 пикселей до цели, за 1 секунду можно успеть утомиться от анимации. Второй режим разрешает эту придирку.

Roll

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

По умолчанию стоит скорость 2500 пикселей в секунду. Если ехать 100 пикселей, эта скорость может оказаться великоватой и сложится впечатление, что слишком уж резко мы оказались на месте. Чтобы этой неприятности избежать, можно указать минимальное время, по умолчанию 300 миллисекунд. То есть быстрее чем за это время у цели вы не окажетесь.

Большое расстояние может преодолеваться слишком долго, для этого введен параметр ограничивающий максимальное время ожидания.

Случайный посетитель вряд ли ощутит разницу между режимами «roll» и «usual», но как ценителя красоты в динамике режим «roll» меня привлекает больше.

Hard

Резкое перемещение к месту за 5 пикселей до цели, далее скролл плавно докатится до места. Идею этого режима я украл у вконтакте. Можете зайти на свою страничку, немного опустить ленту новостей и кликнуть на полосу «наверх» в левой части экрана, потом еще раз туда же.

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

Soft

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

Заключение


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

Мне нравится то, что происходит с вебом. Из неотесанных таблиц сайты превращаются в произведения искусства. Я хочу быть причастным к этому, хочу внести свою лепту. Начиная с малого, верю, что однажды сделаю что-то стоящее, важное. Удачи в изобретениях и экспериментах, судьба веба в наших руках.
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+40
Comments 39
Comments Comments 39

Articles