Skip to content

Instantly share code, notes, and snippets.

@norilog4
Created March 14, 2020 19:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save norilog4/46e395d4f0b275020fc3ba324a30086f to your computer and use it in GitHub Desktop.
Save norilog4/46e395d4f0b275020fc3ba324a30086f to your computer and use it in GitHub Desktop.
動く蛍光ペン風マーカーのスクリプト
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).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」を与える
}
});
});
</script>
@norilog4
Copy link
Author

⬇️このコードの使い方を紹介しているブログ記事はこちら
https://noripon.blog/2020/03/15/how-to-make-css-design-moving-highlighter/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment