RELLAX

JavaScript

超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

RELLAXは、滑らかなパララックスを実装できるバニラJavaScriptによるライブラリです。ファイル容量が超軽量なので、サクサク動作するパララックスを自サイトに取り入れたいときに活用したいですね。マークアップ、使い方ともにシンプルなところもグッドです。

シンプルな使い方でスピード調節もできる

デモ

スクロールしていくと、滑らに動作するパララックスを確認できるはずです。テキスト、数値、図形などが、メインコンテンツとは異なる速さでスクロールしていきます。

Webサイト内で奥行感や立体感、浮遊感といった視覚効果を表現したいならピッタリの機能ですね。マークアップもカンタンなので、手軽に利用できるのではないでしょうか?

また、オプションではスピードの設定が可能です。スピードの指定できる値の範囲は「10 〜 -10」の間です。data-rellax-speedという項目で設定できます。ちなみにデフォルトのスピードの値は「-4」とのこと。

スピードの強さを調節しながら、実装するサイトの雰囲気にあわせてカスタマイズできるのがいいですね。

ファイル容量がかなり軽量なので、たくさんの機能やオプションが用意されているわけではありませんが、シンプルにサクサク動作するパララックスを求めている人には、使いやすいライブラリになるはずです。

RELLAX

jQuery Pageモバイルに最適なスライドやフリップを実装できる「jQuery Page」前のページ

タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」次のページSpriteSpin

関連記事

  1. no-image
  2. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  3. Building a Vertical Timeline With CSS and a Touch of JavaScript
  4. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  5. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  6. no-image

    JavaScript

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

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

最近の記事

  1. 高輪ゲートウェイ駅のスタバ
  2. 新幹線
  3. リッチモンドホテル
  4. ハーブバターチキン 石窯フィローネとドリップコーヒー
  5. 中洞牧場 グラスフェッド牛乳

アーカイブ

PAGE TOP