WordPressの記事中の文字にマーカーをアニメーションで引く方法

ここのURLをクリップボードにコピー(copied!)

ブログ等の記事では、強調させたい文章にマーカーを引いたような装飾をつけることがよくあります。

これだけでも文字が強直されてわかりやすくなりますが、さらにマーカーが実際にペンで引かれるようなアニメーションを実装してみましょう。

今回はマーカー線を表示させるCSSと、実際にWordPressの記事中にマーカーのアニメーションを実現するためのjQueryのコードをご紹介します！

1：文章にマーカーを表示させるCSSは？

1-1：マーカーを引くための基本

マーカーをCSSで表すにはlinear-gradientを使います。

各ブラウザに対応する必要がある場合は、ベンダープレフィックスをつけたものも用意します。

デモ

HTML

強調したい箇所に<span class="marker">マーカー</span>を引くことができます

CSS

span.marker {
 background: linear-gradient(transparent 0%, #FFC343 0%);
}

強調したい箇所にマーカーを引くことができます

1-2：マーカーの太さの設定

マーカーの太さの設定は、「%」で指定します。
パーセンテージが大きいほど線が細くなります。

細いマーカー

span.marker {
 background: linear-gradient(transparent 70%, #FFC343 70%);
}

強調したい箇所にマーカーを引くことができます

中太マーカー

span.marker {
 background: linear-gradient(transparent 50%, #FFC343 50%);
}

強調したい箇所にマーカーを引くことができます

極太マーカー

span.marker {
 background: linear-gradient(transparent 20%, #FFC343 20%);
}

強調したい箇所にマーカーを引くことができます

2：マーカーにアニメーションをつける

それでは実際にWordPressの記事を閲覧するときに、マーカーが実際にペンで引かれるようなアニメーションを実装してみましょう。

transitionプロパティを使ってアニメーションを実現します。
サンプルとして中太(50%)のマーカーで線を引きます。

CSS

.marker {
  background-image: linear-gradient(transparent 50%, #FFC343 50%);
  background-image: -webkit-linear-gradient(transparent 50%, #FFC343 50%);
  background-image: -moz-linear-gradient(transparent 50%, #FFC343 50%);
  background-position: 0% bottom;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
}

.marker.animate{
  background-size: 100% 100%;
}

マーカーのタグにanimateクラスをつけることで、アニメーションが実行されます。

記事中のマーカーをアピールするためには、マーカーを引く文章が表示領域に入ったタイミングでアニメーションが実行される必要があります。

そのためjQuery(JavaScript)を用いて、スクロール位置を判断して自動的にanimateクラスをつけてくれる処理を足しましょう。

WordPressでは、テーマファイル内に記事ページを表示させるPHP「single.php」が標準で用意されているため、ここに記述します。

single.php

<!-- jQueryを使えるように読み込みする -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
  $(window).scroll(function (){　
    $('.marker').each(function(){
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight){
        $(this).addClass("animate");
      }
    });
  });
</script>

IEではtransformでbackground-sizeプロパティが効かない？

InternetExplorerではtransitionを用いてのbackground-sizeのアニメーションはできないため、background-positionでのアニメーションにする必要があります。

CSS

.marker {
  background-image: linear-gradient(to right, transparent 50%, #FFC343 50%);
  background-image: -webkit-linear-gradient(left, transparent 50%, #FFC343 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #FFC343 50%);
  background-position: 0% bottom;
  background-size: 200% 50%;
  background-repeat: repeat-x;
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
}

.marker.animate{
  background-position: -100% bottom;
}

この場合、マーカーの太さはbackground-sizeの高さ値で制御しているため、値に比例して太くなります。(例：デモは50%の中太)

まとめ

markerクラスにjQueryを用いて自動的にanimateクラスを付与し、アニメーション表示を実現する方法をご紹介しました！

デモ

強調したい箇所にアニメーションでマーカーを引くことができます

CSS

.marker {
  background-image: linear-gradient(to right, transparent 50%, #FFC343 50%);
  background-image: -webkit-linear-gradient(left, transparent 50%, #FFC343 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #FFC343 50%);
  background-position: 0% bottom;
  background-size: 200% 50%;
  background-repeat: repeat-x;
  -webkit-transition: all 1.0s;
  transition: all 1.0s;
}

.marker.animate{
  background-position: -100% bottom;
}

JavaScript

<script type="text/javascript">
  $(window).scroll(function (){　
    $('.marker').each(function(){
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight){
        $(this).addClass(“animate”);
      }
    });
  });
</script>

※JavaScriptファイルテーマファイル内single.phpなどに記載してください