CSSとJQueryを使って文字を動くマーカーで装飾
画面に文字が入ってきた際に文字列にマーカーを引くCSSを紹介します。
(スイッチにJQueryでクラスを付与しています。)
「スクロールで開始！CSSとjqueryで作るマーカー（蛍光ペン）アニメーション」
https://gurio.work/marker-animation01/
こちらの記事をパ…参考にさせていただきました。
その分jQueryについて詳しく記述させていただきました。
サンプル
マーカーが引かれます
改行していてもマーカーが引かれます
もう一度見る場合はページを更新してください。
簡単な動きを説明すると、
- スイッチオン (要素の位置とスクロール位置をjQueryで検出しClassを変更)
- アニメーション(Classの変更を起点にCSSトランジションの実行)
以上です。
それでは順を追って説明したいと思います。
スイッチオン
要素の位置とスクロール位置をjQueryで検出しClassを変更
今回はトランジションで動かすので変化をさせないといけません。
スイッチの方法にはいろいろありますが、一般的なものは画面に入ったらjavascriptでクラスを付与するというものだと思います。
場合によりけりですが、筆者はdelightersというプラグインを使うのが簡単だと思います。
delightersについては割愛させていただきますが、
簡単にいうと「印をつけておいて画面内に入ったら３つのクラスを順番に付与する」というものです。
ちょっと凝ったスライドインとフェードインなどに使えて非常に便利です。
チェックボックスを使う方法もありますが、今回の場合には不向きだと思います。
話はそれましたが、ようは「トランジションを使ってアニメーションさせるには何かしら変化させなきゃいけない」という事です。
今回は元サイトのJQueryを説明したいと思います。
$(window).on("load 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」を与える
}
});
});コードに書いてある注釈でなんとなく何をしているか、わかっていただけると思いますが詳細に説明します。
私のイメージが多分に含まれる為、厳密には違うのでその辺りはjQueryの日本語リファレンスなどで調べてください。
また、jQueryについては説明されなくてもわかってるよ！という方は飛ばしてください。
$(window).on("load scroll”,関数);window(ブラウザ画面)がload(読み込み)の時とscroll(スクロール)の時に関数を.on(実行)します。
ちなみにfunction(){}は即時関数という関数の記述方法でざっくり説明すると中括弧内の記述を関数として実行する的なやつです。詳しくはjQueryの日本語リファレンスを見てください。
$(“.marker-animation”).each(関数);任意のセレクタ(.marker-animation)のeach(それぞれ)に関数を実行します。
var position = $(this).offset().top;positionという変数に this(直前に選択したセレクタこの場合は.marker-animation)のtop(上部)のoffset(位置)を代入します。
var scroll = $(window).scrollTop();scrollという変数に window(ブラウザ画面)のscrollTop(スクロール位置の上部)を代入します。
var windowHeight = $(window).height();windowHeightという変数に window(ブラウザ画面)のheight(高さ)を代入します。
if (scroll > position - windowHeight){}if(もし)scroll(ブラウザ画面のスクロール位置の上部)がposition(.marker-animationの上部位置)からwindowHeight(ブラウザ画面の高さ)を引いたもの(つまり画面下部)より大きい(この場合は上部)場合は{}の中を実行します。
windowHeightの後に + 200など任意の数値をプラスする事で開始タイミングを変えることができます。
$(this).addClass('active');this(直前に選択したセレクタこの場合は.marker-animation)にactiveをaddClass(クラスとして追加します)
アニメーション
Classの変更を起点にCSSトランジションの実行
同様にCSSについても説明します。
.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;
}
.marker-animation.active{
background-position: -100% .5em;
}
ざっくり説明すると
background-image：背景画像の設定
background-repeat：背景の繰り返しの設定
background-size：背景の大きさ
background-position：背景の場所
transition：遷移 変化する物、時間、変化率等
背景の大きさを要素の200%(２倍)のサイズに設定し左から右に向かう50%(半分)をtransparent(透明)にもう半分を任意の色に設定し、x方向(横)に繰り返しています。
その為見えてない範囲では、要素の幅で左から順に透明黄色透明黄色…を繰り返しています。
そしてClassが追加された際に下の画像のように背景の位置を左に100%ずらします。
するとあらどうでしょう？なぜか左から黄色い線が！
なんで？
私も最初は意味がわからなかったのですが、
おそらく下の画像の様な形でbackgroundの位置自体は左側に100%分ずれるのですが、同時にグラデーション自体はCSSで描画しているので左から透明黄色透明黄色の順番に表示するために右へ移動している様に見えるのではないかと思います。
まとめ
今回使った、「要素の位置とスクロール位置をjQueryで検出し、Classを変更」はスライドイン・アウト、フェードイン・アウトなども含めて色々な場所に使えます。
また、こちらの機能は最初に書いた通りjQueryのプラグインもあるのでぜひ使ってみてください。
色や、速さについては元サイトを参考にしていただくかデザインが得意な方はCSSの数値を少しずついじって好みの物を作っていただくのがいいと思います。
この程度でもCSSとjQueryを使えると色々なことができるので。動きのあるにぎやかなサイトを作るのに良いと思います。
しかし、アニメーションはつけすぎるとサイト自体が重くなってしまう事もあるので気をつけて使いたいところです。
