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. 요소의 배경을 그라데이션(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. 배경의 길이를 요소의 200%(2배)로 한다.

background-size: 200% .8em; 

background-size: 横のサイズ 縦のサイズ; 라고 지정할 수 있으므로, 옆이 요소의 200%(2배), 세로가 .8em(em은 문자 사이즈를 1em로 했을 때의 비율의 단위)로 한다.

3. 배경의 위치를 ​​요소만큼 왼쪽으로 옮깁니다.

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)의 사용법을 총 정리!