[HTML/CSS/jQuery]スクロールしたらマーカーがひかれるアニメーション___φ(.. )

スクロールでマーカーがひかれてくアニメーションを学んだのでまとめ。___φ(.. )

スクロールしてみてね。

See the Pen マーカーアニメーション by himeka223 (@himeka223) on CodePen.

FLOCSS設計ベースで使用することを考えて、コンポーネントとして作成。
クラス名については以下のルール。

• JavaScript(jQery)で動的に変更するスタイルはSMACSS（スマックス）のステートクラスを使いis-プレフィックスを付与。is-active
• JavaScript(jQery)から参照されるセレクタ自体にはにスタイルを当てたくないので、js-プレフィックスを付与したクラス名の、もう一つのセレクタを用意。js-markerScrollAnimation"

HTML

<span class="c-marker js-markerScrollAnimation">ここにマーカーをつける文章をいれる</span>

CSS

.c-marker {
    background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.c-marker.is-active{
    background-position: 0% .5em;
}

マーカー部分

マーカー部分は、要素のbackground。
backgroundが動いてマーカーがひかれたように見える仕組みである。

構造

1. 要素のbackgroundをグラデーション(linear-gradient)で左半分を透明、右半分を黄色**として、no-repeatを指定。

background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%); 
background-repeat: no-repeat;

linear-gradientはベンダープレフィックスで書き方が少し違うので気をつける。

background: -moz-linear-gradient(開始位置, 開始色, 終了色);
background: -webkit-linear-gradient(開始位置, 開始色, 終了色);
background: linear-gradient(to 方向, 開始色, 終了色);

今回は、左から黄色を50%（半分）、続いて透明を50%（半分）という指定。

2. backgroundの長さを要素の200%（2倍）にする。

background-size: 200% .8em; 

background-size: 横のサイズ 縦のサイズ;と指定できるので、横が要素の200%（2倍）、縦が.8em(emは文字サイズを1emとしたときの比率の単位)とする。

3. backgroundの位置を要素分、左にずらす。

background-position: 100% .5em;

background-position: 横の位置 縦の位置;と指定できるので、横が要素の100%（要素分）左にずれ、縦が.5em(emは文字サイズを1emとしたときの比率の単位)下にずれる。

4. is-activeクラスに、左にずらしたbackgroundの位置をもとの位置に戻すための指定をする。

.c-marker.is-active{
  background-position: 0% .5em;
}

is-activeクラスに付与後、背景がもとの位置に戻る。
戻っていく動作にアニメーションを付けて、マーカーがひかれる仕組みを作る。

5. transitionでアニメーションの指定をする。

transition: 2s;

transition: 秒数;
2分かけてアニメーションする。

6. jQueryでウインドウ内に入ったら、クラス付与の司令を出す

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

var position = $(this).offset().top
ページの一番上（ウインドウに見えてない部分も含む）から.js-markerScrollAnimationまでの距離。

var scroll = $(window).scrollTop();
ページの一番上（ウインドウに見えてない部分も含む）から、スクロールされた位置。スクロールされて見えなくなった部分。

var windowHeight = $(window).height();
ウィンドウの高さ

ページの一番上から要素までの距離 - ウィンドウの高さがスクロールした分の距離より大きくなったら、スクロール位置が要素の位置を過ぎたことになり、is-activeを付与する。

完成！！！

まさかこの動きが背景のグラデーションで出来てるとは。
色んなアレンジができそうな気がした。

参考サイト

マーカーアニメーションの基本として▼
スクロールで開始！CSSとjqueryで作るマーカー（蛍光ペン）アニメーション - ぐりおブログ
マーカーのひかれる仕組み▼
CSSでホバーすると蛍光ペンで線を引いたようなアニメーション | SPYWEB
グラデーションについて詳しく▼
CSSのグラデーション（linear-gradient）の使い方を総まとめ！