JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>Morbi ut elit in metus cursus hendrerit eget vel urna. Vivamus laoreet ex quis massa placerat, ac aliquet sapien ullamcorper. Aliquam erat volutpat. Nullam quis est ut ligula consequat gravida. Duis libero massa, bibendum ac urna sit amet, interdum blandit diam. Integer aliquam varius risus. Fusce viverra faucibus suscipit. Praesent eget ligula auctor erat sodales eleifend id eget mi. Pellentesque auctor laoreet molestie. Praesent ut tincidunt justo. Quisque ultricies ullamcorper augue vitae ultricies. Integer eu mauris ac purus commodo tristique. Sed mauris sem, tempus sed iaculis ac, mollis sed <a href="javascript:;" onclick="overlay('splash');">ipsum.</a></p>

<p>Aenean lacinia eros sed risus rutrum consequat. Sed vel imperdiet nunc, at tincidunt justo. Proin tincidunt turpis a orci hendrerit, et tincidunt nisl placerat. Sed quis maximus mi, id varius felis. Nam venenatis erat sit amet vestibulum egestas. Nunc eleifend lacus eget sollicitudin mollis. Maecenas mauris leo, sagittis eu odio nec, eleifend congue elit. Aliquam vel odio quam. Sed sagittis ullamcorper nibh a ultricies. Quisque vestibulum, lectus sed gravida pretium, eros tellus vehicula neque, ut dapibus massa ipsum sodales neque. Duis laoreet nulla purus, ut faucibus quam iaculis vel. Nulla ut accumsan mauris.</p>

<p>Mauris id sem in purus malesuada ultricies. Vestibulum pharetra, ante sodales condimentum pulvinar, lectus eros aliquet lectus, laoreet rhoncus elit velit sit amet eros. Donec orci enim, scelerisque at augue eu, faucibus dictum tortor. Nunc eget neque hendrerit, molestie sem ac, elementum tortor. Suspendisse volutpat, arcu non convallis pharetra, tellus urna malesuada lectus, et volutpat felis quam convallis arcu. Integer ac lacus sagittis, vestibulum sem nec, posuere tortor. Sed sit amet bibendum leo. Donec fermentum erat mauris, ac laoreet lacus pellentesque in. Phasellus ac ultricies enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed...

CSS

body {position:relative;margin:0;}

.splash {position:fixed;width:100%;height:100%;top:0;right:0;background-color:black;color:white;
clip-path: polygon(50% 50%,50% 50%,50% 50%,50% 50%);
transition:clip-path 0.5s ease;}

.splash_open {position:fixed;width:100%;height:100%;top:0;right:0;background-color:black;color:white;

clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
transition:clip-path 0.5s ease;overflow: auto;}

JavaScript

function overlay(el) {
var pdf = document.getElementById(el);
var body = document.body;
if (pdf.className == "splash") {pdf.className = "splash splash_open";body.style.overflow = "hidden";}
else {pdf.className = "splash";body.style.overflow = "auto";}
}