no-image

JavaScript

背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

ckLine.jsは背景にSVGによるライン(線)をランダムで生成するjQueryプラグインです。スーッと線が滑らかなアニメーションで引かれていきます。どこか神秘的な印象を受けてしまう、そんなさりげなくも美しい背景アニメーションを求めている人にはピッタリですね。

ckLine.js

ckLine.js

デモではブルーのグラデーションによる美しい背景上に、細長いラインがアニメーションで引かれていきます。ランダムで次々に引かれていくラインは、とても繊細で思わずボーッと眺めていたくなりますね。

使い方も特に難しいことなく、簡単に実装できるはず。またオプションもいくつか用意されているので、カスタマイズして使えるのもいいですね。主なオプションは、svgId、width、height、strokeColor、strokeWidth、animateTime、interval、fadeOut、lifeTime、easing、leftRight、animationTimeRangeです。

デフォルト値は、svgIdがnull、widthがSvgWidth、heightがSvgHeight、strokeColorが#000、strokeWidthが2、animateTimeが1000、intervalが600、fadeOutが800、lifeTimeが2000、easingがswing、leftRightがtrueです。

そのほか、具体的な実装方法や詳細は冒頭で紹介したページから確認できるので、気になる人はぜひチェックしてみてください。

関連記事

  1. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  2. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  3. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  4. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  5. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

  6. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP