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. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  2. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  3. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  4. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  5. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP