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. Before and after slider
  2. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  3. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  4. JavaScript

    2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

    multiscroll.jsというおもしろいjQueryプラグインがあ…

  5. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  6. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

最近の記事

  1. 梅の花
  2. 三菱ブレッドオーブン
  3. 浜離宮恩賜庭園

アーカイブ

PAGE TOP