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

no-image

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です。

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives