jQuery

【jQuery】要素を水平に無限アニメート/スクロールjQuery Conveyor Ticker

March 27, 2017
jQuery Conveyor Ticker

jQuery Conveyor Tickerはテキストまたはインライン要素を水平に無限アニメート/スクロールします。onmouseoverするとアニメーションを一時停止、onmouseoutすると再開します。また、アニメーションの速度を変更するオプションもあります。

How to use

CSSファイルをHEADに追加します。

<link type="text/css" rel="stylesheet" href="jquery.jConveyorTicker.min.css" />

JSファイルをBODYセクションの最後に追加。

<script src="jquery.jConveyorTicker.min.js"></script>

HTMLコードを配置

<div class="js-conveyor-1">
  <ul>
    <li>
      <span>I am an <u>innocent</u> text string just passing by</span>
    </li>
    <li>
      <a href="https://duckduckgo.com/">
        <span>I am a <b>hyperlink</b></span>
      </a>
    </li>
    <li>
      <span>Mauris interdum elit non sapien <em>imperdiet</em></span>
    </li>
    <li>
      <span>Cras lorem augue facilisis a commodo</span>
    </li>
  </ul>
</div>

マークアップ要素を選択して、jquery.jConveyorTicker関数の使用をトリガー

<script>
  $(function() {
    $('.js-conveyor-1').jConveyorTicker();
  });
</script>

Options

使用可能なオプションの例

<script>
  $(function() {
    $('.js-conveyor-1').jConveyorTicker({
      anim_duration:   200,    // Specify the time (in milliseconds) the animation takes to move 10 pixels
      reverse_elm:     false   // Enable the use of the reverse animation trigger HTML element
    });
  });
</script>

オプション”reverse_elm”がtrueに設定されている場合は、先行する要素クラス “jctkr-label”を追加する必要があります。

<div class="jctkr-label">
  <strong>Newsfeed</strong>
</div>
<div class="js-conveyor-1">

... ...

</div>

MIT