웹페이지에 형광펜 칠하는 효과 적용하기

한국일보 웹사이트의 뉴스기사에는

신문지면의 중요한 단락에 형광펜 칠하는 듯한 효과를 내는 기능이 적용되어 있다.

기사를 스크롤해가며 읽으면 strong tag가 적용되어 있는 부분이 화면 가운데 부분을 지나갈 때 형광펜을 칠해 준다.

이 기능을 (한국일보의 허락을 구하지 않고) 셀디샵 블로그에 적용하였다.

적용한 기능을 (역시 한국일보의 허락을 구하지 않고) 여기 공유한다.

css

.post-body b {
    background-image: linear-gradient(90deg, transparent 50%, rgba(0, 51, 0, .2) 0);
    background-position-x: 0px;
    background-position-y: center;
    background-size: 200%;
    transition-behavior: normal;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: background-position;
}
.post-body b.on {
    background-position-x: -100%;
}

• 참고로 blogspot(구글 블로거)에 적용시 HTML편집에서 ]]></b:skin> 의 앞부분에 끼워넣는다.
• 한국일보의 strong tag를 b tag로 변경하고 형광펜 색상과 투명도도 변경하였다.

javacript

<script type="text/javascript">
//<![CDATA[
var articleReadability = function() {
  var t = document.querySelectorAll(".post-body b")
  , e = new IntersectionObserver(function(t, e) {
    t.forEach(function(t) {
      t.isIntersecting && (t.target.classList.contains("on") || t.target.classList.add("on"))
    })
  }
  ,{
    rootMargin: "-40% 0px -55% 0px",
    threshold: 0
  });
  t.forEach(function(t) {
    return e.observe(t)
  })
};
window.addEventListener("DOMContentLoaded", function() {
  articleReadability()
});
//]]>
</script>

• 참고로 blogspot(구글 블로거)에 적용시 HTML편집에서 </head> 의 앞부분에 끼워넣는다.