Awesome highlight on scroll ( ͡▧ ͜ʖ ͡▧)

Inspired by hsdiego 

First, slowly scroll down.

But how?

So, did you like it?

for that, you should do as following:

1. open an HTML snippet.
2. open and close a p tag
3. where ever you want to highlight, put it between a span tag (span) with a class called text-highlight ( <span class='text-highlight'> </span>)

For example, we have a paragraph like this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis nunc sed blandit libero. In mollis nunc sed id semper risus. Purus sit amet luctus venenatis lectus magna. Vel quam elementum pulvinar etiam non quam lacus. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Nunc id cursus metus aliquam eleifend mi in. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Neque gravida in fermentum et sollicitudin ac. Leo in vitae turpis massa sed. Et magnis dis parturient montes nascetur ridiculus mus. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Vel facilisis volutpat est velit egestas dui id ornare. Habitant morbi tristique senectus et netus et malesuada fames. Lectus quam id leo in vitae turpis massa.</p>

and we want the BOLD part to be highlighted on scroll:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis nunc sed blandit libero. In mollis nunc sed id semper risus. Purus sit amet luctus venenatis lectus magna. Vel quam elementum pulvinar etiam non quam lacus. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Nunc id cursus metus aliquam eleifend mi in. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Neque gravida in fermentum et sollicitudin ac. Leo in vitae turpis massa sed. Et magnis dis parturient montes nascetur ridiculus mus. <span class="text-highlight">Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Vel facilisis volutpat est velit egestas dui id ornare.</span> Habitant morbi tristique senectus et netus et malesuada fames. Lectus quam id leo in vitae turpis massa.</p>

as you see we moved it between <span class="text-highlight"> The part to highlight </span> .

the result will be:

for example, the raw version of what you saw on top, is this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis nunc sed blandit libero. In mollis nunc sed id semper risus. Purus sit amet luctus venenatis lectus magna. Vel quam elementum pulvinar etiam non quam lacus. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Nunc id cursus metus aliquam eleifend mi in. Mattis vulputate enim nulla aliquet porttitor lacus luctus. Neque gravida in fermentum et sollicitudin ac. Leo in vitae turpis massa sed. Et magnis dis parturient montes nascetur ridiculus mus. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Vel facilisis volutpat est velit egestas dui id ornare. Habitant morbi tristique senectus et netus et malesuada fames. <span class="text-highlight">Lectus quam id leo in vitae turpis massa.</span> </p>
</br>
<p>Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Egestas pretium aenean pharetra magna ac placerat. Non tellus orci ac auctor augue mauris augue. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Arcu felis bibendum ut tristique et. Dolor sit amet consectetur adipiscing elit duis. Quis risus sed vulputate odio ut. Laoreet non curabitur gravida arcu ac tortor dignissim.</p>
<br>
<p>Vehicula ipsum a arcu cursus vitae congue. Eu lobortis elementum nibh tellus molestie nunc non. Pulvinar mattis nunc sed blandit. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Mauris pharetra et ultrices neque ornare. <span class="text-highlight">Non diam phasellus vestibulum lorem sed risus. Ultrices sagittis orci a scelerisque purus semper eget. Nec feugiat in fermentum posuere.</span>Viverra vitae congue eu consequat. Nullam eget felis eget nunc lobortis mattis. Quis hendrerit dolor magna eget est lorem ipsum dolor. Quam lacus suspendisse faucibus interdum posuere. Velit egestas dui id ornare. Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Quis imperdiet massa tincidunt nunc pulvinar.</p>
<br>
<p>Lacinia quis vel eros donec ac. <span class="text-highlight">Fringilla urna porttitor</span> rhoncus dolor purus non enim praesent. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Vehicula ipsum a arcu cursus vitae congue. Massa eget egestas purus viverra. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Ullamcorper malesuada proin libero nunc consequat. Nibh cras pulvinar mattis nunc sed. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Tempus urna et pharetra pharetra. Eget nullam non nisi est sit amet facilisis magna. Amet massa vitae tortor condimentum lacinia quis vel eros donec.</p>
<br>
<p>Malesuada bibendum arcu vitae elementum curabitur. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Scelerisque felis imperdiet proin fermentum leo. Sem fringilla ut morbi tincidunt augue interdum velit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Nibh cras pulvinar mattis nunc. Massa sed elementum tempus egestas sed sed risus. Id consectetur purus ut faucibus pulvinar elementum integer. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. Auctor urna nunc id cursus metus aliquam. Mattis molestie a iaculis at. Risus in hendrerit gravida rutrum quisque. Ut tristique et egestas quis. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Eget nulla facilisi etiam dignissim diam quis.</p>
<br>
<p>Erat nam at lectus urna duis convallis convallis tellus id. Ultrices neque ornare aenean euismod. Morbi tristique senectus et netus et malesuada. Faucibus vitae aliquet nec ullamcorper sit amet. Mi eget mauris pharetra et ultrices neque ornare aenean. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Senectus et netus et malesuada fames ac turpis. <span class="text-highlight">Massa id neque aliquam vestibulum morbi blandit. Hac habitasse platea</span> dictumst quisque sagittis purus sit amet volutpat. Sagittis vitae et leo duis ut diam quam. In hac habitasse platea dictumst quisque sagittis. Amet massa vitae tortor condimentum lacinia quis vel. Id velit ut tortor pretium viverra suspendisse potenti. Eu mi bibendum neque egestas congue quisque. Quam pellentesque nec nam aliquam sem et.</p>
<br>
<p>Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Aliquet nec ullamcorper sit amet risus nullam. Ultricies mi eget mauris pharetra et ultrices neque. Sed libero enim sed faucibus turpis in. Leo integer malesuada nunc vel risus. Risus feugiat in ante metus dictum. Ultrices mi tempus imperdiet nulla malesuada. Quam adipiscing vitae proin sagittis nisl rhoncus  <span class="text-highlight">mattis rhoncus urna. Id diam vel quam elementum pulvinar etiam non. Nunc sed velit dignissim sodales ut eu sem integer vitae.</span> Facilisis volutpat est velit egestas dui. Aliquam ut porttitor leo a diam sollicitudin tempor id. Vel risus commodo viverra maecenas. Mauris vitae ultricies leo integer malesuada nunc. Pharetra sit amet aliquam id diam maecenas ultricies.</p>