Skip to content

Instantly share code, notes, and snippets.

@co3k

co3k/chrome.html

Last active December 16, 2015 08:09
Show Gist options
  • Save co3k/5403763 to your computer and use it in GitHub Desktop.
Save co3k/5403763 to your computer and use it in GitHub Desktop.
Download ZIP
CC0
Raw
chrome.html
<!DOCTYPE html>
<html>
<head>
<title>Chrome</title>
</head>
<body onload="UraCra.loadImage()">
<ul>
<li><button onclick="UraCra.background()">Background</button></li>
<li><button onclick="UraCra.zoom()">Zoom</button></li>
</ul>
<style>
#icon {
position: absolute;
width: 1px;
height: 1px;
transition-property: width, height, left, top;
-moz-transition-property: width, height, left, top;
-webkit-transition-property: width, height, left, top;
-o-transition-property: width, height, left, top;
-ms-transition-property: width, height, left, top;
transition-duration: 25s;
-moz-transition-duration: 25s;
-webkit-transition-duration: 25s;
-o-transition-duration: 25s;
-ms-transition-duration: 25s;
transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
-ms-transition-timing-function: ease;
z-index: -100;
}
#icon.zoom {
top: -30px;
left: -30px;
width: 3000px;
height: 3000px;
}
</style>
<input id="url" value="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" onchange="UraCra.applyImage()" />
<p>Hint: You can specify image URL on loading by: http://example.com/path/to/script#http://www.tejimaya.com/wp-content/uploads/2009/07/ohira.jpg</p>
<p>Examples: </p>
<ul>
<li><a href="#http://upload.wikimedia.org/wikipedia/commons/e/e2/Google_Chrome_icon_%282011%29.svg">svg version</a></li>
<li><a href="#http://newtricks.me/wp-content/uploads/2010/08/firebug-large.png">firebug</a></li>
<li><a href="#http://www.tejimaya.com/wp-content/uploads/2009/07/ohira.jpg">ohira</a></li>
</ul>
<img id="icon" src="" />
<script>
var UraCra = {};
UraCra.getUrl = function () {
return document.getElementById("url").value;
};
UraCra.loadImage = function () {
if (location.hash) {
document.getElementById("url").value = location.hash.substr(1);
}
UraCra.applyImage();
};
UraCra.applyImage = function () {
var icon = document.getElementById("icon");
icon.setAttribute("src", UraCra.getUrl());
};
UraCra.background = function () {
document.body.style.backgroundRepeat = "repeat";
document.body.style.backgroundImage = "url('" + UraCra.getUrl() + "')";
};
UraCra.zoom = function () {
var icon = document.getElementById("icon");
icon.setAttribute("class", "zoom");
};
window.onhashchange = function () {
UraCra.loadImage();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment