Skip to content

Instantly share code, notes, and snippets.

@joshbeckman

joshbeckman/gist:5949332

Last active December 19, 2015 11:39
Show Gist options
  • Save joshbeckman/5949332 to your computer and use it in GitHub Desktop.
Save joshbeckman/5949332 to your computer and use it in GitHub Desktop.
Download ZIP
ColorType in-browser text editor, rainbow-effect
Raw
gistfile1.html
data:text/html,
<html>
<head>
<title>ColorType</title>
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<style type="text/css">
html { font-family: "Merriweather" } * { -webkit-transition: all linear 1s; }
</style>
<script>
window.onload=function(){
var e=false;
var t=0;
setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*3).toString(16);document.body.style.backgroundColor="#f"+n+"f"+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}
</script>
</head>
<body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
@joshbeckman
Copy link
Author

To customize your fade color, edit this part:
backgroundColor="#"+n+"ff"+n
Currently set to green.

Red: backgroundColor="#ff"+n+""+n

etc.

@joshbeckman
Copy link
Author

Just copy the code and paste it into your browser navigation bar. Bookmark it if you like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment