【Cocoon】jQueryでマーカー(蛍光ペン)を引くアニメーションを取り入れる方法!

この記事は約7分で読めます。

ノートにマーカーを引くようなアニメーションをブログに取り入れたい!

cssを使えばマーカーのデザインを導入することは簡単ですよね。

例
<style>
/*マーカー*/
.marker{/*赤*/
	font-weight:bold;
	background: linear-gradient(transparent 70%, red 40%);
}
</style>
<span class='marker'>
aaaa
</span>
赤の蛍光ペン

こんな感じです。

これだけだと味気ないので、動きを取り入れてやりたいと思います。

スポンサーリンク

動く蛍光ペン

実際にやってみました。(jQueryなのでampではつかえません)

例
<style>

.marker-under-red {
background:linear-gradient(to left, transparent 50%, red 50%), linear-gradient(to bottom, transparent 50%, red 50%);
background-repeat: repeat-x;
background-size: 200% .8em;
background-position: 0 .5em;
transition: all 3s ease;
}
.marker-under-red.active{
background-position: -100% .5em;
}
</style>
<script>
$(window).scroll(function (){
	$(".marker-under-red").each(function(){
	  var position = $(this).offset().top; 
	  var scroll = $(window).scrollTop();
	  var windowHeight = $(window).height();
	  if (scroll > position - windowHeight){ 
	    $(this).addClass('active'); 
	  }
	});
});
</script>

<span class="marker-under-red">
赤色の蛍光ペン
</span>
赤色の蛍光ペン

こんな感じです。

修正した

例
<style>

.marker1{
background-image: -webkit-linear-gradient(left, transparent 50%, #ffcedb 50%);
background:linear-gradient(to right, transparent 50%, #ffcedb 50%);
background-repeat: repeat-x;
background-size: 200% 1em;
background-position: 0 .7em;
transition: all 6s ease;
}
marker1.active{
background-position: -100% .7em;
}
</style>
<script>
$(window).scroll(function (){
	$(".marker1").each(function(){
	  var position = $(this).offset().top; 
	  var scroll = $(window).scrollTop();
	  var windowHeight = $(window).height();
	  if (scroll > position - windowHeight){ 
	    $(this).addClass('active'); 
	  }
	});
});
</script>

<span class="marker1">
赤色の蛍光ペン
</span>
赤色の蛍光ペン

ampには対応していませんが、一応これで使えます。

アレンジするなら

縦幅を変える

background-position: 0 .9em;

右が縦です。
今は.9emになっていますが、ここを変えることによって幅を変えられます。

2つあるの2つとも変えてください。

background-size: 200% .8em;

こっちも変えて微調整も。

スピードを変える

transition: all 3s ease;

3sが変化にかかる時間です。
easeは緩急です

色を変える

background: linear-gradient(to right, transparent 50%, red 50%);

redのところを変えてください。
rgbでもいけます。

linear-gradient(to right, transparent 50%,rgb(0,0,0) 50%);

こんな感じです。

ベンダープレフィックスをつける

background-image: -webkit-linear-gradient(left, transparent 50%, red 50%);

webkitをつけておけばいいでしょう。
toは不要です。
後逆になります。

おわりに

amp対応できるようにしたいですね。
もうちょっと修正してみます。

Technology
スポンサーリンク
Study Gorilla

コメント