スクロールの動きに合わせて画像を横に動かそう

こんにちは！WEB制作担当のYです。
前回の記事に続いて、今回もScrollMagicを使ったスクロール連携アニメーションを実装する方法をご紹介します。

こんな感じでスクロールの動きに合わせて画像が左から右へ動きます。
ぜひデモページをご覧ください。

「走る人」実装時の注意点は画像の上下に十分スクロールができる量のコンテンツや余白があることです。つまり、ページのトップに横移動させたい画像を置いてもうまい具合にページの端から端へは移動しないので、気を付けてください。
「走る車」はページをスクロールしていって指定の高さ（今回は画面40％の高さ）のところに車の画像が見えたらアニメーションが発火するようになっているため、アニメーション時に自動的に車の上下にスペースが空くようになっています。（画像は画面40%の高さ固定で横に動きますが、画像の上の要素は固定されずそのままスクロールで上に行き、下の要素はアニメーションが終わってからスクロールが開始されるからです。）

この「走る人」と「走る車」の2種類のアニメーションですが、「走る人」についてはScrollMagic無しで実装可能です。しかし、「走る車」のようにページの指定の高さでアニメーションが発火するようにするにはScrollMagicを入れた方が簡単に実装できます。

「走る人」の動き

①HTML

<div class="run_man_area">
    <div class="run_man">
      <div class="run_man_img">
        <img src="img/run.png" alt="走る人">
      </div>
    </div><!-- run_man -->
</div><!-- run_man_area -->

こんな感じです。画像のディレクトリやファイル名は適宜変更してください。

②CSS

/* 走る人 */
.run_man_area {
  height: 60px;
  overflow: hidden;
}

.run_man {
  position: relative;
  height: 100%; 
}

.run_man_img {
  position: absolute;
  top: 0; 
  left: 0; 
}

.run_man_img img {
  height: 60px; 
  width: auto;
}

height: 60pxの部分ですが、表示する画像の大きさによって適宜変更してください。

③JS

document.addEventListener('scroll', function () {
    var image = document.querySelector('.run_man_img');
    var imageContainer = document.querySelector('.run_man_area');
    
    var progress = Math.min(Math.max((window.scrollY + window.innerHeight - imageContainer.offsetTop) / 
                   (imageContainer.clientHeight + window.innerHeight), 0), 1);
                   
    image.style.transform = `translateX(${progress * window.innerWidth}px)`;
});

上記のソースをそのままコピペしてください。※HTMLの方のクラス名を変えたりしていたら適宜そのクラス名に変更してください。

実装例として、株式会社立花書房様の新キャラクター：コウセイくんのコウセイくんというキャラクターの紹介ページでコウセイくんが走っているような動きをしています。

「走る車」の動き

①HTML

<div class="run_car_area">
     <div class="run_car">
        <div class="run_car_img">
          <img src="img/car.png" alt="走る車">
        </div>
     </div><!-- run_car -->
</div><!-- run_car_area -->

「走る車」のHTMLは「走る人」と変わりありません。画像のディレクトリやファイル名は適宜変更してください。

②CSS

/* 走る車 */
.run_car_area {
  height: 110px;
  overflow: hidden;
  border-bottom: 50px solid #ccc;
}

.run_car {
  position: relative;
  height: 100%; 
}

.run_car_img {
  position: absolute;
  top: 0;
  left: 0;
}

.run_car_img img {
  height: 60px;
  width: auto;
}

CSSも「走る人」とほぼ変わりがないのですが、車が道路を走っているように見せるため、run_car_areaのDIVにborder-bottom: 50px solid #ccc ;を入れています。

③JS

まずはScrollMgicのCDNをページに掲載する必要があるので、前回の記事の①ScrollMagicの導入を見ながら進めてください。

document.addEventListener('DOMContentLoaded', function () {
    var controller = new ScrollMagic.Controller();
    var image = document.querySelector('.run_car_img');

    var scene = new ScrollMagic.Scene({
        triggerElement: ".run_car_area", 
        triggerHook: 0.4, // 画面の40%の高さでトリガー
        duration: window.innerWidth 
    })
    .setPin(".run_car_area") 
    .on("progress", function (event) {
        var progress = event.progress; 
        var translateX = progress * (window.innerWidth - 0); 
        image.style.transform = 'translateX(' + translateX + 'px)';
    })
    .addTo(controller);
});

また、ScrollMagicとは別に上記のJSも必要になります。ご自身で用意したJSファイルに上記をコピペしてください。

「triggerHook」の数字は画面の高さの上から何パーセントで横へ動くアニメーションを発火させるかを記載する部分です。今回は画面の高さ40%で発火させるので、0.4と記載していますが、適宜ご自身で調整してみてください。

その他もしクラス名を変えている場合はこのJSに記載されている.run_car_imgや.run_car_areaなどのクラス名も同様に変更してください。

反対方向（右から左）に動かす方法

反対方向に動くデモページはこちらです。
走る人はJSを以下のものに差し替え、走る車は以下のCSSとJSを差し替えすると右から左へ動くようになります。

走る人のJS（右から左ver）

document.addEventListener('scroll', function () {
    var image = document.querySelector('.run_man_img');
    var imageContainer = document.querySelector('.run_man_area');
    
    var progress = Math.min(Math.max((window.scrollY + window.innerHeight - imageContainer.offsetTop) / 
                   (imageContainer.clientHeight + window.innerHeight), 0), 1);
    
    var translateX = (1 - progress) * window.innerWidth;
    image.style.transform = `translateX(${translateX}px)`;
});

上記のソースをそのままコピペしてください。※HTMLの方のクラス名を変えたりしていたら適宜そのクラス名に変更してください。

走る車のCSS（右から左ver）

.run_car_area {
  position: relative;
  height: 110px;
  overflow: hidden;
  border-bottom: 50px solid #ccc;
}

.run_car {
  position: relative;
  height: 100%; 
}

.run_car_img {
  position: absolute;
  top: 0;
  right: 0;
}

.run_car_img img {
  height: 60px;
  width: auto;
}

走る車のJS（右から左ver）

document.addEventListener('DOMContentLoaded', function () {
    var controller = new ScrollMagic.Controller();
    var image = document.querySelector('.run_car_img');
    
    var scene = new ScrollMagic.Scene({
        triggerElement: ".run_car_area",
        triggerHook: 0.4,
        duration: window.innerWidth
    })
    .setPin(".run_car_area")
    .on("progress", function (event) {
        var progress = event.progress;
        var translateX = -progress * (window.innerWidth + image.clientWidth);
        image.style.transform = 'translateX(' + translateX + 'px)';
    })
    .addTo(controller);
});

上記のソースをそのままコピペしてください。※HTMLの方のクラス名を変えたりしていたら適宜そのクラス名に変更してください。

以上で、スクロールの動きに合わせて画像を横に移動させる方法の紹介は終わります。今後面白そうな動きの実装方法をご紹介できればと思います。

私たちは、お客様のご要望にあわせて様々なコンテンツ、アプリを制作いたします。
ご質問やご要望は、＜お問い合わせページ＞よりお送りください。

加藤文明社 | 東京都千代田区三崎町、1914年創業。印刷業における「100年の経験」と「最新のデジタル技術」を強みに、確かなソリューションをご提供する加藤文明社。メディアの枠を超えて、高品質の情報コミュニケーションを創出します。加藤文明社

株式会社　加藤文明社（Kato Bunmeisha) | Chiyoda-ku Tokyo