ファーストビューの次は中身にこだわりたい

HOME
コラム
Web Marketing
ファーストビューの次は中身にこだわりたい

コラム

2020.06.16

こんにちは。（基本的には）コーディング担当している平林です。

第二回目はサイト制作時にはほぼ入れているライブラリのご紹介です。

前回はファーストビューに着目しましたが、今回はページ内の「動き」についてご紹介します。

そのままページを表示することが正しいデザインのwebサイトももちろんあると思います。
ただ、そこにちょっとした「動き」をつけるだけでぐっと印象がよくなることも多いです。

animate.css

サイト内右側のメニューをクリックすると様々な動きが見られます。
そしてこれらを全て無料で使えます。
すごいですね。（ありがたい）

使い方によってかわいい印象をつけたり、かっこいい印象をつけられたりします。

ただ、こちら名前の通り「css」です。
スクロールに応じて動きを出したりしたい場合には、「javascript」を使用する必要があります。

こちらもやはりCDNが便利です。そしてこれだけで動きます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<p class="animated bounce">はねます</p>
<p class="animated fadeIn">フェードインします</p>
<p class="animated bounce infinite">ずっとはねます</p>

「ずっとはねます」サンプルはこちら

こちらだけでも少しアクセントを加えるにはとってもいいですね。

では続いて、画面をスクロールすると動くタイプのものをご紹介します。
少しコードが変わります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

<p class="animated" data-animate="bounce">はねます</p>
<p class="animated" data-animate="fadeInLeft">左から出てきます</p>
<p class="animated" data-animate="fadeInRight">右から出てきます</p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript">
$(window).on('load scroll', function(){
  var el = $('.animated');
  el.each(function () {
      //data属性からアニメーション名を取得
      var isAnim = $(this).data('animate');
      //animated要素に位置を取得
      var elOffset = $(this).offset().top;
      //現在のスクロールポジションを取得
      var scrollPos = $(window).scrollTop();
      //ウィンドウの高さを取得
      var wh = $(window).height();

      //要素がウィンドウ内に入るとアクティブ
      if(scrollPos > elOffset - wh){
          $(this).addClass(isAnim);
      }
  });
});
</script>

少しだけ難易度があがります。（動きを何度も見るにはリロードしてください）

このように注目してもらいたい箇所は文字を大きくしたりアイコンを使用するのも良いですが
動きが加わるとより注目しやすいかなと思います。

ただあまりにもたくさん使用するとごちゃごちゃしてしまうこともありますので
適切な量を適切な箇所に使っていくことが大切です。
（まさに“用法用量を守って”です）

お客様から、ここの動きはこれで、と指定されることは滅多にないですが、
このような動きが使えることを少しでも知っていただけると
サイト活用がより効果的にできるかと思います。

その辺りの“見栄え”についての細かいご相談もぜひお気軽にご連絡くださいませ。>> ご相談はコチラ