第1号（2021年06月10日）

最新のトレンド　パララックスアニメーションについて

はじめに

 ホームページ刷新にあたり、いま現在のトレンドデザインにはどのようなものがあるのか調査しました。
 その中でも私が一番気になったデザイン、パララックスアニメーションについてまとめました。

パララックスアニメーションとは

 Webページにおけるパララックスとは、表現技法の一つです。
 自分がページをスクロールなど操作した際に、合わせてページの要素が動き、あたかも自分がページ全体を操作しているように感じさせることで、 そのコンテンツに興味をひかせることのできるデザインとなっています。
 以下がサンプルになります。JavaScriptを使用して実装も可能のようですが、今回はHTMLとCSSのみで作成してみました。
 スクロールすると、見え方が変わり、画像が動いているように見えます。
サンプル
PARALLAX1
COMMENT1
PARALLAX2
COMMENT2
PARALLAX3
COMMENT3
HTML
  <div class="parallax-main">
    <div class="parallax img_bg01">PARALLAX1</div>
    <div class="comment_content">COMMENT1</div>
    <div class="parallax img_bg02">PARALLAX2</div>
    <div class="comment_content">COMMENT2</div>
    <div class="parallax img_bg03">PARALLAX3</div>
    <div class="comment_content">COMMENT3</div>
  </div>
CSS
  .parallax-main {
      width:70%;
      heigh:400px;
      overflow-x:hidden;
      overflow-y:auto;
      font-size:300%;
  }
  
   /*パララックスエリア*/
  .parallax {
      background-position:center top;
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-size:cover;
      padding:15% 0;
      text-align:center;
  }
      
   /*コメントエリア*/
  .comment_content {
      padding:100px;
      background-color:#fff;
      text-align:center;
  }
      
   /*各パララックスに設定する画像*/
  .parallax1.img_bg01 {
      background-image:url( 画像のURL );
  }
  .parallax1.img_bg02 {
      background-image:url( 画像のURL );
  }
  .parallax1.img_bg03 {
      background-image:url( 画像のURL );
  }

サンプルを応用した実装

 私は今回、コメント欄とパララックスを一纏めにしたく、パララックス上にコメント欄を追加したものを最終的に３つ並べて実装したいと考えていました。 組み込みつつ動きを確認すると、リストを3つ表示させることはできても、パララックスアニメーションは一番上のリストしか動作しなかったり、 コメント欄が思うような大きさで表示されずパララックス画面がはみ出てしまったりと、なかなか苦戦しました・・。
 結局、それぞれをdivクラスで分けることで、なんとか実装することができました。
 背景画像にパララックスを設定し、その前面にコメント欄を表示させています。 COMMENT2で使用しているリストを「margin: 0 50%;」とすることでコメント欄が右側に表示されるようになります。
応用

COMMENT1

COMMENT2

COMMENT3

HTML
  <div class="parallax-main">
    <div class="parallax img_bg_01">
     <div class="paraList1">
      <div class="paraText">
       <p>COMMENT1</p>
      </div>
     </div>
    </div>
    <div class="parallax img_bg_02">
     <div class="paraList2">
      <div class="paraText">
       <p>COMMENT2</p>
      </div>
     </div>
    </div>
    <div class="parallax img_bg_03">
     <div class="paraList1">
      <div class="paraText">
       <p>COMMENT3</p>
      </div>
     </div>
    </div>
  </div>
CSS
  .parallax-main {
      width:70%;
      heigh:400px;
      overflow-x:hidden;
      overflow-y:auto;
      font-size:300%;
  }
  
   /*パララックスエリア*/
  .parallax {
      background-position:center top;
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-size:cover;
  }
      
   /*各パララックスに設定する画像*/
  .parallax1.img_bg01 {
      background-image:url( 画像のURL );
  }
  .parallax1.img_bg02 {
      background-image:url( 画像のURL );
  }
  .parallax1.img_bg03 {
      background-image:url( 画像のURL );
  }
      
   /*リストボックスの設定*/
  .paraList1 {
      background:#70b0eb;
      color:#fff;
      width:50%;
  }
  .paraList1 .paraText {
      padding:25% 5%;
      height:100px;
  }
      
  .paraList2 {
      background:#70b0eb;
      color:#fff;
      width:50%;
      margin:0 50%;
  }
  .paraList2 .paraText {
      padding:25% 5%;
      height:100px;
  }

まとめ

 パララックスアニメーションは今回初めて知った技法でした。HTMLはあまり得意ではないので、複雑な組み込みだったらどうしよう・・と不安でしたが、 CSSだけで実装できるということもあり、組み込み自体はとても簡単にできました。 ひと工夫するとそれなりに大変だったりしますが、その工夫があるかないかで画面の仕上がりが全然変わってくるので、 HTMLの仕組みに対してもっと理解を深め、更に色々なことに応用していけたらと思います。
一覧へ戻る

↑