Line Maker

JavaScript

アニメーションするラインを実装できる「Line Maker」

Line Makerは、いろんなアニメーションをするラインを実装することができるプラグインです。水平・垂直方向はもちろん、カラーや太さなどカスタマイズすることでさまざまなラインを表現できるのがいいですね。

Line Maker

デモ

Demo 1〜Demo 6まで、全部で6種類のデモが用意されています。Demo 1では、いくつかボタンが設置されていて、クリックすることで各ボタンに応じたアニメーションが実行されます。

ボタンは、Hide Lines、Show Lines、Animate Lines Out、Animate Lines In、Create Random Line、Create And Animate、Remove Linesの7タイプがあります。

ラインの表示や非表示、追加や削減などといった動作を確認できるようになっています。

また、そのほかのデモでは、細いラインでグリッドされたものやクールなアニメーションによるもの、滑らかな垂直アニメーションなど本格的に実装されたデモを確認できるので、気になる人はぜひ見てみてください。

かっこいいオシャレなラインのアニメーションをサイトで使いたいというときに、覚えておきたいですね。

Line Maker

関連記事

  1. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  2. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  3. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  4. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

  5. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP