2 заметки с тегом

яваскрипт

Scrollport.js — анимация скролла была скучной

20 мая 2015, 17:14

Может видели плагин jQuery.scrollTo? С помощью него многие делают анимированное передвижение скролла к указанному месту на странице. В сущности тоже самое делает и эта строка кода:

$('html, body').animate({
scrollTop: $('#my_target').offset().top
}, 600);

Только весит эта строчка в 30 раз меньше плагина.

И черт бы с ним, с весом. Что строчка кода, что целый плагин делают эту анимацию слишком уж скучно. А я хочу хлеба и зрелищ. Удовлетворение своих потребностей нашел в написании плагина «Scrollport.js». Пока фантазии хватило только на 3 новых способов разнообразить анимацию скролла. Взгляните на демо страницу.

Если делаете обычную анимацию скролла, не используйте плагин, напишите одну строчку кода, её хватит за глаза. Хотите изюма в динамике — используйте «Scrollport.js».

Вся документация по использованию на гитхабе. Рассуждения о плагине и комментарии умных людей найдёте в статье на хабрахабре.

Afterlag.js — анимация против лагов

10 марта 2015, 4:02

Сайты тормозят. Особенно они тормозят при загрузке. Бедная анимация не знает куда ей деваться, становится рваной. Несчастные параллаксы дёргаются, а плавный скрол к участку страницы уже нельзя назвать плавным. Раньше я относился к этому естественно: «Ну, сайт грузится, конечно всё тормозит. Это норма». В итоге мне это надоело, и я отнёсся к происходящему как к проблеме.

В качестве решения я написал плагин «Afterlag.js», нативную и джэйквери версии. С помощью него можно отследить, когда лаги на странице закончились. Теперь я запускаю динамику на сайтах, когда станет ясно, что она будет работать гладко, красиво. Взгляните на демо, и проблему сразу поймёте и решение в действии увидите.

Использовать афтерлаг просто. Подключили файл с плагином. Если используете джэйквери версию, то и сам джэйквери подключить не забудьте. В своём коде пишете

$.afterlag(function() { // Код, который должен исполнится после окончания лагов. });

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

Будьте здоровы, не лагайте.