RELLAX

JavaScript

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

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

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

デモ

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

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

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

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

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

RELLAX

関連記事

  1. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  2. Babylon Grid
  3. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  4. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  5. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  6. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP