WordPress：アニメーションするマーカー

公開日: 2019年09月10日　更新日: 2019年09月14日

はじめに

Web上の文章にマーカーで線を引こうと思い、いろいろ調べていたところ、アニメーションするものを見つけたのでここに紹介します。

スクロール位置を取得するコード

head部に以下のコードを追加します。WordPressの場合、[ダッシュボード]-[外観]-[テーマエディター]-[テーマヘッダー(header.php)]に書くことになろうかと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
$(".marker-animation").each(function(){
var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
var scroll = $(window).scrollTop(); //スクロールの位置を取得
var windowHeight = $(window).height(); //ウインドウの高さを取得
if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
$(this).addClass('active'); //クラス「active」を与える
}
});
});

/*読み込まれたら*/

(window.onload = function() {
$(".marker-animation_mark2").each(function(){
$(this).addClass('active-on'); //クラス「active-on」を与える
});

})
</script>

CSSにアニメーションを記述する

CSSに以下のコードを追加します。WordPressの場合、[ダッシュボード]-[外観]-[CSS編集(追加 CSS)]に書くことになろうかと思います。

/*マーカーアニメーション*/
.marker-animation.active{
background-position: -100% .5em;
transition: all 2s ease;
}

.marker-animation {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 2s ease;
font-weight: bold;
}

.marker-animation_mark2.active-on{
background-position: -100% .5em;
transition: all 2s ease;
}

.marker-animation_mark2 {
background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 2s ease;
font-weight: bold;
}

ここまでで準備については完了です。

マーカーで線を引く

ここでいよいよ線を引くわけですが、使用できるクラスが2種類あります。marker-animation の方が通常版。marker-animation_mark2 の方は102938さんの手による改造版です。

<span class="marker-animation">
marker-animation
</span>
<br>
<span class="marker-animation_mark2">
marker-animation_mark2
</span>

marker-animation

marker-animation_mark2

どちらも同じようにアニメーションするのですが、該当の文章が初めから表示されている場合の動作が異なります。前者はスクロール動作が行われるまでアニメーションしませんが、後者は表示動作が終わった時点でアニメーションを開始します。表示動作が終わる前にスクロールしていくと前者の方が早かったりもします。

アニメーションしないマーカー数点

.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

/* マーカー線・赤 */
.marker_red{
background:linear-gradient(transparent 75%, #ff7f7f 75%);
font-weight:bold; 
}

/* マーカー線・青 */
.marker_blue {
 background: linear-gradient(transparent 75%, #9eceff 75%);
font-weight: bold; 
}

/* マーカー線・黄色 */
.marker_yellow{
background:linear-gradient(transparent 75%, #fff799 75%);
font-weight:bold; 
}

/* マーカー線・緑 */
.marker_green{
background:linear-gradient(transparent 75%, #7fff7f 75%);
font-weight:bold; 
}

/* マーカー線・ピンク */
.marker_pink{
background:linear-gradient(transparent 75%, #ff9ece 75%);
font-weight:bold; 
}

pink_line
blue_line
yellow_line
marker_red
marker_blue
marker_yellow
marker_green
marker_pink

まとめ

アニメーションを多用すると、やっぱうるさいですかねぇ。

[Top]

　