JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="reveal bg" id="reveal"></div>

<p><a href="#" onclick="myFunction();">link</a>
Vivamus eget posuere tellus, nec posuere ex. Etiam bibendum libero nisl, in bibendum nunc ultricies nec. Aliquam rutrum ac risus a lobortis. Mauris pharetra et magna id tempor. Nunc vitae tellus at metus consectetur fringilla id et justo. Fusce commodo sed leo tristique hendrerit. Nulla enim elit, tempor in lacinia sit amet, luctus molestie sem.</p>
<p>
Praesent semper purus pretium nulla accumsan pulvinar. Ut vel magna libero. Curabitur magna felis, auctor quis varius sed, tincidunt rhoncus ante. Nullam in vulputate libero. Maecenas feugiat, erat ac varius varius, odio tortor euismod enim, sit amet feugiat arcu enim at lorem. Vivamus vulputate porta elit, sed varius diam pretium vel. Curabitur feugiat vehicula ligula sit amet malesuada. Fusce at mollis dolor. Donec mi dui, ultrices quis consequat nec, sollicitudin sit amet ante. Integer lobortis nisi vel eros tempus ultricies. Donec eros est, imperdiet in efficitur sed, aliquet eget sapien. Praesent sed est nisi. Praesent at nisi nec sapien scelerisque blandit vitae at nisl.</p>
<p>
Nullam vitae leo faucibus, lacinia purus eget, gravida ipsum. Sed eu dapibus libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam rhoncus ornare mi, a egestas massa. Curabitur luctus mollis tempus. Curabitur ac sapien quis sem tempus consequat in at ligula. Etiam sed magna nulla. Nunc vitae odio nec felis viverra vestibulum. Sed cursus nisi egestas tortor ullamcorper, non semper lorem tincidunt. Mauris sollicitudin sit amet sapien dictum porttitor. Maecenas ac rhoncus felis.
</p>

CSS

body {margin:0;overflow:hidden;}
.reveal {position:absolute;top:-200%;left:0;z-index:99;width:100%;height:300%;background-color:#ffffff;transition: top 5s;}
.reveal2 {position:absolute;top:0%;left:0;z-index:99;width:100%;height:300%;background-color:#ffffff;transition: top 5s;}

.bg {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+35,ffffff+64,ffffff+100&0+0,0+35,1+64,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,1) 64%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,1) 64%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,1) 64%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

JavaScript

const myTimeout = setTimeout(myFunction, 100);

function myFunction() {
var reveal = document.getElementById("reveal");
reveal.className = "reveal2 bg";
}