Javascript

【Javascript】モーションブラーを使用したJavascriptライブラリーbounty

May 26, 2018
bounty

bountyモーションブラーを使用したJavascriptライブラリー

Examples

import bounty from `bounty`;

bounty({ el: '.js-bounty', value: '£42,000,000' });

options:

import bounty from `bounty`;

bounty({
  el: '.js-bounty',
  value: '£42,000,000',
  initialValue: '£900,000',
  lineHeight: 1.35,
  letterSpacing: 1,
  animationDelay: 100,
  letterAnimationDelay: 100
});

HTMLで以下の使用が可能

<div class="js-bounty"></div>
<script src="/bounty.js"></script>
<script>
  bounty.default({ el: '.js-bounty', value: '£42,000,000' })
</script>

unpkgでも利用できます

<script src="https://unpkg.com/bounty@1.1.6/lib/bounty.js"></script>

font-familyfont-sizeから取得され計算されたスタイルをスタイリング

.js-bounty {
  font-size: 60px;
  font-family: Roboto;
  fill: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

MIT