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


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

スクロールしてみてね。

<p class="codepen" data-height="249" data-theme-id="0" data-default-tab="js,result" data-user="himeka223" data-slug-hash="oNvwwyy" style="height: 249px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="マーカーアニメーション">
  <span>See the Pen <a href="https://codepen.io/himeka223/pen/oNvwwyy/">
  マーカーアニメーション</a> by himeka223 (<a href="https://codepen.io/himeka223">@himeka223</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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




#HTML

```html

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

```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`を指定。

```scss:
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;
```

<img width="500px" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/64557d58-6ac7-4e4a-d203-a27287e44e03.png">



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

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

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

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

```scss
background-size: 200% .8em; 
```

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

<img width="100%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/8afab794-5d14-9a69-96e6-ea0c073433eb.png">

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

```scss
background-position: 100% .5em;
```

<img width="100%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/22863f75-2308-5f1f-2c0b-8ca7287d5f27.png">


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

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

```scss
.c-marker.is-active{
  background-position: 0% .5em;
}
```
**`is-active`クラスに付与後、背景がもとの位置に戻る。**
戻っていく動作にアニメーションを付けて、マーカーがひかれる仕組みを作る。

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

```scss
transition: 2s;
```

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


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

```js

$(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`を付与する。

<img width="800px" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/5eaa8a23-89f3-e147-96b6-8da8009e9047.png">


####完成！！！

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


#参考サイト

マーカーアニメーションの基本として▼
[スクロールで開始！CSSとjqueryで作るマーカー（蛍光ペン）アニメーション \- ぐりおブログ]
(https://gurio.work/marker-animation01/)
マーカーのひかれる仕組み▼
[CSSでホバーすると蛍光ペンで線を引いたようなアニメーション \| SPYWEB](https://spyweb.media/2017/11/16/css-hover-text-highlighter-line-animation/)
グラデーションについて詳しく▼
[CSSのグラデーション（linear\-gradient）の使い方を総まとめ！](https://saruwakakun.com/html-css/basic/linear-radial-gradient)