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

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

EZ Plusタッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」前のページ

サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」次のページTag-it

関連記事

  1. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  2. Combodate

    JavaScript

    日付や時間をドロップダウン式にしてくれる「Combodate」

    Combodateは日付や時間の入力をドロップダウン式に置き換えてくれ…

  3. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  4. Add To Cart Interaction
  5. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  6. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP