マーカーアニメーションの実装

お忙しい中ありがとうございます。
初歩的な質問で大変恐縮ですが、ご回答いただければ幸いです。

マーカーアニメーションの実装

実現したいこと
画面を開くと、文字に蛍光ペンのようなマーカーが引かれる動作を実装したいです。

発生している問題
現状のものですと、スクロールに反応してマーカーが引かれるのですが、
スクロール後ではなく、サイトの画面を開いたときにすぐ反応してほしいです。
Javascriptの読解力がないため、解決策が見つかりません。
参照元

初歩的な質問で大変恐縮ですが、ご回答いただければ幸いです。

HTML
1<!DOCTYPE html>
2<html lang="en" >
3<head>
4  <meta charset="UTF-8">
5  <title>CodePen - マーカーアニメーション</title>
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
7<link rel="stylesheet" href="./style.css">
8<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
9
10</head>
11<body>
12<!-- partial:index.partial.html -->
13<br>
14<br>
15<p><span class="c-marker js-markerScrollAnimation">ここにマーカーをつける文章をいれる</span></p>
16<br>
17<br>
18<p><span class="c-marker js-markerScrollAnimation">ここにマーカーをつける文章をいれる</span></p>
19<br>
20<br>
21<p><span class="c-marker js-markerScrollAnimation">ここにマーカーをつける文章をいれる</span></p>
22<br>
23<br>
24<p><span class="c-marker js-markerScrollAnimation">ここにマーカーをつける文章をいれる</span></p>
25<br>
26<br>
27<!-- partial -->
28  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
29  <script  src="./script.js"></script>
30
31</body>
32</html>
33

CSS
1.c-marker {
2	background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
3	background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
4	background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
5	background-repeat: no-repeat;
6	background-size: 200% .8em; 
7	background-position: 100% .5em;
8	transition: 2s;
9}
10.c-marker.is-active{
11    background-position: 0% .5em;
12}

Javascript
1$(window).scroll(function (){
2	$(".js-markerScrollAnimation").each(function(){
3	  var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
4	  var scroll = $(window).scrollTop(); //スクロールの位置を取得
5	  var windowHeight = $(window).height(); //ウインドウの高さを取得
6	  if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
7	    $(this).addClass('is-active'); //クラス「active」を与える
8	  }
9	});
10});

行動規範の内容に同意します

回答2件

js
1$(window).scroll(function (){
2    $(".js-markerScrollAnimation").each(function(){
3      var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
4      var scroll = $(window).scrollTop(); //スクロールの位置を取得
5      var windowHeight = $(window).height(); //ウインドウの高さを取得
6      if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
7        $(this).addClass('is-active'); //クラス「active」を与える
8      }
9    });
10}).scroll(); // これでどうでしょう