Draw outline of your web page and disappear.
Inspired by svg drawing animation, I thought we can draw any outline of any webpage by following the paths of box models, and this is the result.
-
To draw page every time when page loads, append the following code at the end of your page
<script src="https://rawgit.com/allenhwkim/drawpage/master/draw-page.js"></script> <script>drawPage()</script>
-
Or, only to test how it looks like
-
Go to any web page, and open a console
-
copy paste the following code if "Content-Security-Policy" is allowed
(function() { var dp = document.createElement('script'); dp.type = 'text/javascript'; dp.async = true; dp.src = 'https://rawgit.com/allenhwkim/drawpage/master/draw-page.js'; document.documentElement.appendChild(dp); })();
-
run
drawPage()
command
-
- drawPage function
Draw all given elements, and disappear when finished.
- argument
- optional, css selector
in default, "div". For example;
drawPage("table")
will draw all tables in the document.
drawPage(".drawme")
will draw all elements that hasdrawme
class.
- optional, css selector
- cutIntoEl function
Draw a single element, and highlight it with the effect of cutting into the element.
The drawing canvas will not disappear and wait for the user to click that element.
- argument
- required, css selector or HTML element
cutIntoEl("#myDiv")
will draw an element with id,myDiv
, then wait for click
- required, css selector or HTML element