Scrollport.js — новая анимация скролла
Анимация скролла к месту страницы с момента изобретения почти не подвергалась никаким модификациям, никак не украшалась. Да никому и не надо вроде, и так все работает. Говоришь куда скроллить и за сколько нужно добраться. Всё.
Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 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 до цели, но мы резкого скачка не видим, потому что белый слой стал совсем не прозрачным. Плавно доезжаем до места, в то время как белый слой исчезает. Пожалуй оптимальное соотношение скорости и плавности, да и выглядит этот эффект интересно и необычно.Заключение Некоторые найдут этот плагин привлекательным, новым и интересным. Остальным же предлагаю воспринять эту статью, как свежий взгляд на привычные вещи. Мне интересно услышать ваше мнение о плагин режимах. Если кто-то предложит еще парочку режимов, я буду очень рад.Мне нравится то, что происходит с вебом. Из неотесанных таблиц сайты превращаются в произведения искусства. Я хочу быть причастным к этому, хочу внести свою лепту. Начиная с малого, верю, что однажды сделаю что-то стоящее, важное. Удачи в изобретениях и экспериментах, судьба веба в наших руках.
