JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<div id="anim"></div>
<h1>Chapitre 001</h1>
<h1>Chapitre 002</h1>
<h1>Chapitre 003</h1>
<h1>Chapitre 004</h1>
<h1>Chapitre 005</h1>
<h1>Chapitre 006</h1>
<h1>Chapitre 007</h1>
<h1>Chapitre 008</h1>
<h1>Chapitre 009</h1>
<h1>Chapitre 010</h1>
<h1>Chapitre 011</h1>
<h1>Chapitre 012</h1>
<h1>Chapitre 013</h1>
<h1>Chapitre 014</h1>
<h1>Chapitre 015</h1>
<h1>Chapitre 016</h1>
<h1>Chapitre 017</h1>
<h1>Chapitre 018</h1>
<h1>Chapitre 019</h1>
<h1>Chapitre 020</h1>
<h1>Chapitre 021</h1>
<h1>Chapitre 022</h1>
<h1>Chapitre 023</h1>
<h1>Chapitre 024</h1>
<h1>Chapitre 025</h1>
<h1>Chapitre 026</h1>
<h1>Chapitre 027</h1>
<h1>Chapitre 028</h1>
<h1>Chapitre 029</h1>
<h1>Chapitre 030</h1>
<h1>Chapitre 031</h1>
<h1>Chapitre 032</h1>
<h1>Chapitre 033</h1>
<h1>Chapitre 034</h1>
<h1>Chapitre 035</h1>
<h1>Chapitre 036</h1>
<h1>Chapitre 037</h1>
<h1>Chapitre 038</h1>
<h1>Chapitre 039</h1>
<h1>Chapitre 040</h1>
<h1>Chapitre 041</h1>
<h1>Chapitre 042</h1>
<h1>Chapitre 043</h1>
<h1>Chapitre 044</h1>
<h1>Chapitre 045</h1>
<h1>Chapitre 046</h1>
<h1>Chapitre 047</h1>
<h1>Chapitre 048</h1>
<h1>Chapitre 049</h1>
<h1>Chapitre 050</h1>
<h1>Chapitre 051</h1>
<h1>Chapitre 052</h1>
<h1>Chapitre 053</h1>
<h1>Chapitre 054</h1>
<h1>Chapitre 055</h1>
<h1>Chapitre 056</h1>
<h1>Chapitre 057</h1>
<h1>Chapitre 058</h1>
<h1>Chapitre 059</h1>
<h1>Chapitre 060</h1>
<h1>Chapitre 061</h1>
<h1>Chapitre 062</h1>
<h1>Chapitre 063</h1>
<h1>Chapitre 064</h1>
<h1>Chapitre 065</h1>
<h1>Chapitre 066</h1>
<h1>Chapitre 067</h1>
<h1>Chapitre 068</h1>
<h1>Chapitre 069</h1>
<h1>Chapitre 070</h1>
<h1>Chapitre 071</h1>
<h1>Chapitre 072</h1>
<h1>Chapitre 073</h1>
<h1>Chapitre 074</h1>
<h1>Chapitre 075</h1>
<h1>Chapitre 076</h1>
<h1>Chapitre 077</h1>
<h1>Chapitre 078</h1>
<h1>Chapitre 079</h1>
<h1>Chapitre 080</h1>
<h1>Chapitre 081</h1>
<h1>Chapitre 082</h1>
<h1>Chapitre 083</h1>
<h1>Chapitre 084</h1>
<h1>Chapitre 085</h1>
<h1>Chapitre 086</h1>
<h1>Chapitre 087</h1>
<h1>Chapitre 088</h1>
<h1>Chapitre 089</h1>
<h1>Chapitre...

CSS

#anim{
  position :fixed;
  text-align : right;
  border : 1px solid;
  z-index : -1;
  color : white;
  background-image: linear-gradient(to right, white, black);
}

JavaScript

function tick() {
    //let anim = document.querySelector("#anim");
    anim.innerText = parseInt(anim.style.width);
    anim.style.width = 
    `${window.pageYOffset/document.body.offsetHeight*document.body.offsetWidth}px`;
    window.requestAnimationFrame(tick);
}
 
window.requestAnimationFrame(tick);