無限ループするニュースティッカー -『javascript』

ニュースとかを表示させるような、無限ループするティッカーのコンポーネントです。


const ticker = (target, margin = 0) => {

  let $target = $(target),
      $inner = $target.children(),
      containerWidth = 0,
      left = 0,
      width = 0;

  const size = () => {

    containerWidth = $target.width();
    left = containerWidth;

    $target.find('.js-item').each(function() {

      width = width + $(this).outerWidth() + margin;

    });

  };
  size();

  let tick = () => {

    if (--left < -width) {

      left = containerWidth;

    }

    $inner.css({
      'transform': 'translateX(' + left + 'px)'
    });

    setTimeout(tick, 16);

  };

  tick();

};
ticker('#js-ticker', 30);

share
ー

related
ー