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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как отобразить количество оповещений в названии вкладки браузера

Можно сделать раскадровку анимации из фавыконов. И тем же setInterval менять фавыконы с приемлемой частотой. Получится анимация. Что-то вроде:

var 
  favicons_count = 20, // Количество фавыконов в раскадровке.
  frequency = 1000/60, // Как крутые, 60 кадров в секунду.
  static_favicon = '/path/to/static/favicon.ico',
  favicon_animtion;

function start_favicon_animation() {
  var
    current_favicon_number = 0;
  favicon_animtion = setInterval(function() {
    document.getElementById('favicon').href = '/path/to/favicons/favicon_' + current_favicon_number + '.ico';
    current_favicon_number = (current_favicon_number + 1) % favicons_count;
  }, frequency);
}

function stop_favicon_animation() {
  clearInterval(favicon_animtion);
  document.getElementById('favicon').href = static_favicon;
}

Теперь, когда вызываем start_favicon_animation() у нас анимированный фавыкон из нарезанных кадров этой анимации. Вызываем stop_favicon_animation() и у нас снова статический фавыкон.

Я вот только не уверен, что это работает. Простите :–) Может кто-нибудь знает, браузеры позволяют с такой частотой менять фавыконы? Я бы мог проверить, конечно, но это не статья а комментарий. Могу позволить себе слабину :–)

Анимация против лагов, или лучшая битва та, которой не было

Наткнулся на очень понятную статью про «requestAnimationFrame». С этой штукой хорошо создавать анимацию, потому что как говорится в статье:

1. Анимация будет более плавной, так как браузер может оптимизировать её
2. Анимация в неактивной вкладке будет приостановлена, позволяя процессору отдохнуть
3. Более энергоэкономна.

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

Анимация против лагов, или лучшая битва та, которой не было

Я ваш совет реализовал. И чуток поменял дефолтные настройки. Описание нового свойства в статье выделил как «Обновление статьи».

Анимация против лагов, или лучшая битва та, которой не было

Не думал об этом, но мне таксой способ не нравится, да и мой способ устраивает на все 100. Я плагины начинаю писать с их вызова. Представляю, что есть какой-то идеальный плагин, который используется именно так, как я хочу его использовать. Пишу пару примеров использования еще не существующего плагина. А потом пишу этот плагин, ограничивая себя рамки того, как я хочу его использовать. Так вот в моём идеальном плагине дефолтные настройки не должны изменяться так: Afterlag.prototype.defaults.iterations = 5. Слишком длинная строка.

Анимация против лагов, или лучшая битва та, которой не было

Я вас в пердыдущем комментарии совершенно искренне благодарил и делал комплименты. Я действительно из ваших комментариев много нового узнал и старого закрепил. Так что вы про меня плохо не думайте, это я вам от чистого сердца!

А по поводу @constructor.default я понимал, что он не связан тем конструктором, который в объявлении класса. Собственно по-этому я его в коде верно и использовал. Если бы вместо @constructor.defaults я использовал Afterlag.defaults никаких неявно определенных свойств и протекающих абстракций бы не было. Но мне не хотелось внутри класса обращаться к классу по имени, я хотел обратиться через какой-то универсальный указатель. Сейчас посмотрел документацию к кофескрипту, там, и вправду, нигде не говорят, что так можно делать. Значит я этот способ где-то в другом месте вычитал. Может и стоит заменить это на Afterlag.defaults, но мне по прежнему не хочется к классу обращаться по имени внутри этого же класса.

Анимация против лагов, или лучшая битва та, которой не было

Я ерунду написал. Имел ввиду класс и экземпляр класса, а не объект класса. Как я понимаю, ваш аргумент за defaults: ... заключается в том, что мне в коде самого плагина не придется писать @constructor.defaults. А в остальном все в порядке?

Я конструкцию @constructor.defaults в коде плагина использую только один раз. Зато все пользователи плагина, если захотят изменить дефолтное значение, будут писать Afterlag.defaults.iterations = ..., а в вашем случае придется писать Afterlag.prototype.defaults.iterations = .... Это длиннее, и выглядит не так интуитивно понятно.

Спасибо, что разъяснили про наследование. И примеры у вас замечательные. И комментарии интересные.

Анимация против лагов, или лучшая битва та, которой не было

В настройках можно передать параметр timeout, время в миллисекундах которое вы готовы ждать до окончания лагов. То есть, даже если лаги не кончились афтерлаг запустит все колбэки, если лаги длятся дольше, чем значение преданное в timeout

Анимация против лагов, или лучшая битва та, которой не было

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

Анимация против лагов, или лучшая битва та, которой не было

2) Мне нравится, что дефолтные значения принадлежат именно к классу, а не к объекту класса. Благодаря этому, я могу в самом начале кода написать Afterlag.defaults.iterations = 5. И потом при создании новых объектов мне не придется каждый раз указывать в настройках, что я хочу 5 итераций. Они возьмутся из нового дефолтного значения.

5) Круто.

Анимация против лагов, или лучшая битва та, которой не было

Конечно, интересно!
1) Не знал.
2) Так не получится. Здесь в любом случае нужно использовать или @constructor.defaults или Afterlag.defaults

# Сейчас в коде так:
class Afterlag
  @defaults:
    delay: 100
    # ...

# Если бы было вот так, нужно было бы использовать @defaults.
class Afterlag
  defaults:
    delay: 100
    # ...

3) Косяк.
4) Забыл про это, давно не работал с датой в JS. Однако, Date.new работает с только с девятого IE. А «requestAnimationFrame», кстати, с десятого. С одной стороны черт бы сними, но все же. А интервалы любой бразуер тянет. Но я все равно покапаю в сторону «requestAnimationFrame».
5) Это синтаксический сахар кофескрипта?

Анимация против лагов, или лучшая битва та, которой не было

Звучит убедительно. Подразберусь с «requestAnimationFrame», если там всё действительно так хорошо, заменю интервалы. Спасибо!

Анимация против лагов, или лучшая битва та, которой не было

Спасибо!