jQuery/Vanilla Javascript

【Javascript】パララックスを簡単に実装できるRellax.jsの使い方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

webデザインにおけるパララックス(視差)効果とはスクロール時に背景と要素のスピードを変えることで立体感などを出すことができます。

今回はパララックス効果を簡単に実装できるjsプラグインのRellax.jsをサンプルデモ付きで解説していきます。

公式サイトRELLAXJS

ダウンロードは以下のGitHubよりCodeボタンからDownload Zipを選択します。
GitHub – rellax

HTML

rellax.min.jsを読み込み、以下のようにパララックス効果を付与するクラス名.rellaxを設定します。

<script src="js/rellax.min.js"></script>
<script>
//default JS Setting
  var rellax = new Rellax('.rellax'); 
</script>

HTML

パララックス効果したい要素にclass=”rellax”を付与してタグの属性(data-rellax-speedなど)で詳細を設定します。

<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5" data-rellax-zindex="5">
  <figure>I’m super fast</figure>
</div> 

これで基本的な設定は終了です。
サンプルでは背景画像とテキストのスピードを変えています。

サンプル

data-rellax-speed属性を使用して、.rellax要素の速度を調節できます。
マイナスの値は通常のスクロールよりも移動が遅くなり、プラスの値は移動が速くなります。以下のように速度を-10から+10の間で設定できます。

HTML

<div class="rellax" data-rellax-speed="7" data-rellax-percentage="0.5" data-rellax-zindex="5">
  <figure>I’m super fast</figure>
</div> 
<div class="rellax" data-rellax-speed="-3" data-rellax-percentage="0.5" data-rellax-zindex="5">
  <figure>I’m slow</figure>
</div> 
<div class="rellax" data-rellax-speed="0" data-rellax-percentage="0.5" data-rellax-zindex="5">
  <figure>I’m super nomal</figure>
</div>
<div class="rellax" data-rellax-speed="3" data-rellax-percentage="0.5" data-rellax-zindex="5">
  <figure>I’m fast</figure>
</div> 

サンプル

ブレイクポイントを設定してモバイルやタブレットごとでスピードを変えることができます。

JS

breakpointsに配列でブレイクポイントを設定します。
配列の左側からdata-rellax-mobile-speed ( モバイル ), data-rellax-tablet-speed ( タブレット ),デスクトップPC( data-rellax-mobile-speed )となります。

<script>
//default JS Setting
  var rellax = new Rellax('.rellax', {
    breakpoints:[500, 768, 1200]
  }); 
</script>

HTML

上記jsで設定したブレイクポイントが以下の属性で反映されます。
data-rellax-speed:デスクトップPC用
data-rellax-tablet-speed :タブレットPC用
data-rellax-mobile-speed :モバイル用

とそれぞれスピードを設定します。

<div class="rellax" data-rellax-speed="10" data-rellax-tablet-speed="-8" data-rellax-mobile-speed="3" data-rellax-percentage="0.5" data-rellax-zindex="5">
  <figure>Speed</figure>
</div> 

サンプル

trueにすると.rellax要素が垂直にセンタリングされます。

<script>
//default JS Setting
  var rellax = new Rellax('.rellax', {
    center:true
  }); 
</script>

サンプルでは 「RELLAXJS SAMPLE」というテキストが垂直センタリングされています。

サンプル

水平方向にスクロールとき専用のパララックスです。

horizontal:trueで有効になります。その際にデフォルトの垂直パララックスはvertical:falseとして無効にします。

<script>
  //Enable Horizontal Parallax Scrolling
  var rellax = new Rellax('.rellax', {
    horizontal:true
    vertical:false
  });
</script>

サンプル

※fullpagejsの水平スクロール使用時はうまく動きませんでした。

引数概要
data-rellax-zindexセクションにリンクするメニューを指定する。data-menuanchor で紐づけする。
data-rellax-percentageパララックス要素の垂直のスタート位置。
wrapper クラスやIDを渡すことでパララックスしたい部分を局所的に指定できる。

要素のスピード設定の工夫でいろいろな演出ができるので奥行きのあるサイトデザインなどにはまだまだ使用価値があると思いました。

uhaha

パララックスなんてオワコンとか聞くけどさりげなく使えばちょっとおしゃれですよ(´ε` )♥

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*