CSSとjQueryで文章にアニメーションマーカーをつける方法を紹介します。コードの行数も少なくコピペで対応できるようになっています。
最近Twitterでこんなツイートを見かけました。
というわけで実際にブログを見てみると「こんな風に文章が見えたらマーカーがアニメーションで引かれる！」
気になって読んでみると「ZEBLINE」というwordpressのプラグインで実装してるようでした。
ZEBLINEの概要
- 価格：買い切りの3000円
- 拡張性：アニメーションスピードや色を自由に変更できる
- 対応：WordPress 4.9 以上 / PHP ver7 以上 / Windows10/Mac OSX/Android7.11 以上 / IE11以上/Chrome64/safari11.0.3 以上
通常の文章のマーカーとは違いアニメーション付きのマーカーであれば、webページの読者に対して「重要な部分をアピールする（読ませる）」ことができますよね。
そうすることで離脱を防いだり、CV率をアップさせることができるというメリットがあるようです。
自分でつくってみた
ここまで多機能でなくてもいいので無料で使いたいと思い自作しました。
いまこの文章がアニメーションしましたよね。
そしてこの文章は青色のマーカーになっていると思います。
CSSとjQueryの知識が少しだけいるのでそれがわかる人であればwordpress以外でも使用することができます。
このコードの機能
- 色は自由に変更できる（デフォルトは黄色）
- フォントの太さはCSSで変更可能
- スピードは変更できるが速さによってバグる可能性あり
ともちろん機能は本家に劣りますが、最低限ほしい部分の実装はできるようになっています。
アニメーションマーカーの実装方法
必要なファイルは以下の3つです。
- JSファイル
- jQuery
- css
手順１：以下のコードをコピーして「anim-marker.js」と保存
js$(document).ready(function(){
//カラーコード取得&割当
$(".anim-marker").each(function(){
var colorCode = $(this).data('color');
//色の指定がなければイエロー自動指定
if(colorCode === undefined){
colorCode = "#eafb5e";
}
$(this).css({
"background-image" : "linear-gradient(transparent 50%,"+colorCode+" 50%)"
});
});
$(window).scroll(function (){
$(".anim-marker").each(function(){
var offsetY = $(this).offset().top;
var scrollVal = $(window).scrollTop();
var windowH = $(window).height();
if (scrollVal > offsetY - windowH + 100){
$(this).css({
"background-position" : "100% 0"
})
}
});
});
}); 上記のコードをまるっとコピーして「anim-marker.js」というファイル名で保存します。
手順2：headでjsファイルとjQueryを読み込む
html<head>
<!-- headタグでファイルを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/anim-marker.js"></script>
</head> headタグでjQueryと先ほど保存した「anim-maker.js」を読み込みます。ファイルパスは自分のサイトに合わせて変更してくださいね。
手順3：CSSを記述する
css.anim-marker{
background-repeat : no-repeat;
background-size : 200% 100%;
background-position : 200% 0;
font-weight: bold; /*フォントの太さ*/
transition: 2s; /*アニメーションの速さ*/
} 上記のコードをcssファイルに記述します。このコードのfont-weightで文字の太さを変更し、transitionでアニメーションの速さを変更できます。
手順4：htmlにクラス名を付ける
ここまで順調にできていればもう文章の好きな部分をspanでマークアップするだけでOKです。
html<!-- 色を指定しない場合 -->
<p>自由に<span class="anim-marker">アニメーションマーカー</span>を引く</p>
<!-- 色を指定する場合 -->
<p>自由に<span class="anim-marker" data-color="#f75065">色変更したい</span>ならこれ</p> アニメーションマーカーを引きたい文章を<span>で囲いclass="anim-marker"というclass名をつけましょう。
マーカーの色を変更したい場合は追加でdata-color="カラーコード"を記述します。
上記のコードのサンプルがこちらです。
自由にアニメーションマーカーを引く
自由に色変更したいならこれ
まとめ
もし役にたったらぜひシェアやリツイートのご協力お願いします！！
この記事を書いた人
web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。
