夢みるゴリラ
夢みるゴリラ

Rellax.jsの使い方

パララックス
してるかい？

01
Gorilla Type 01

徘徊するゴリラ

ゴリラにとって重要な仕事の１つに、徘徊があります。それはジャングルを歩き回ること。見たことがないゴリラが縄張りに入らないように日々チェックする必要があるのです。

徘徊するゴリラの特徴

  • 仲間意識が強い
  • 保守派
  • リーダー気質
02
Gorilla Type 02

威嚇するゴリラ

もし縄張りに入ってくるような奴がいたら威嚇して追い払います。声を荒げて威嚇する方法もありますが、できるゴリラなら睨むだけで十分。じっと数秒睨むだけでほとんどのゴリラは逃げていくでしょう。

威嚇するゴリラの特徴

  • 気が短い
  • 自己中心的
  • カルシウム不足
03
Gorilla Type 03

驚くゴリラ

時にはこんなお茶目な表情をすることも。常に気をはっているゴリラですが、不意のサプライズには対応できないことがほとんど。驚かせるときは一言声をかけておきましょう。

驚くゴリラの特徴

  • 落ち着きがない
  • ビクビクしている
  • ドキドキしている
04
Gorilla Type 04

決意するゴリラ

ゴリラの中には強い意思を持っているものがいます。その顔を見れば必ずやり遂げるとだれもが思うでしょう。ただ、何をしたいのかだれも知る由もない。

決意するゴリラの特徴

  • 一点を見つめている
  • あまりしゃべらない
  • 無表情

headに書くこと

<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.1/rellax.min.js"></script>

JavaScriptで書くこと

document.addEventListener("DOMContentLoaded", function () {
  const rellax = new Rellax(".rellax-target", {
    breakpoints:[375,768,1200]
  });
});

CSSで書くこと

/* 省略 */

HTMLで書くこと

一部のみ書いています。

<div class="demo">
  <div class="demo_inner">
      <div class="demo_wrap01" id="demo_top">
        <div class="img_box">
           <div class="in-shadow">
             <img src="https://yumegori.com/wp-content/uploads/2021/10/gorilla01.jpg" alt="" />
           </div>
           <div
              class="deco01 rellax-target"
              data-rellax-speed="1"
              data-rellax-mobile-speed="0.6"
              data-rellax-tablet-speed="0.8"
              data-rellax-desktop-speed="1"
              data-rellax-zindex="2"
            >
            01
            </div>
        </div>
        <div class="txt_box">
           <div class="deco_txt">Gorilla Type 01</div>
             <h3 class="txt_ttl">徘徊するゴリラ</h3>
                <p>
                  ゴリラにとって重要な仕事の１つに、徘徊があります。それはジャングルを歩き回ること。見たことがないゴリラが縄張りに入らないように日々チェックする必要があるのです。
                </p>
                <div class="list_box">
                   <h4 class="list_ttl">徘徊するゴリラの特徴</h4>
                   <ul>
                      <li>仲間意識が強い</li>
                      <li>保守派</li>
                      <li>リーダー気質</li>
                   </ul>
                </div>
           </div>
         </div>
     </div>
</div>