haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added full logo with loading fade-out effect

This commit is contained in:
Lewis Hemens 2014-03-22 20:39:50 +00:00
parent 0041363c63
commit 809632a0bb
2 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/logo-full.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

24
index.html
View File

@ -136,6 +136,22 @@ textarea {
white-space: pre;
}
#logo-interstitial {
background-repeat: no-repeat;
background-position: center;
background-color: #FFF;
z-index: 200;
position: fixed;
width: 100%;
height: 100%;
transition: opacity 1.5s ease-in-out;
background-size: 100%;
}
.fade-out {
opacity: 0;
}
.box-image { background-image: url('images/box-icon.png'); }
.line-image { background-image: url('images/line-icon.png'); }
.freeform-image { background-image: url('images/freeform-icon.png'); }
@ -143,11 +159,14 @@ textarea {
.move-image { background-image: url('images/move-icon.png'); }
.text-image { background-image: url('images/text-icon.png'); }
.info-image { background-image: url('images/info-icon.png'); }
.logo-image { background-image: url('images/logo-full.png'); }
</style>
</head>
<body>
<div id="logo-interstitial" class="logo-image"></div>
<div id="draw-tools">
<button id="box-button" class="tool active box-image"></button>
<button id="line-button" class="tool line-image"></button>
@ -197,5 +216,10 @@ textarea {
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.jeditable.min.js"></script>
<script src="js-compiled.js"></script>
<script>
window.setTimeout(function() { $('#logo-interstitial').addClass('fade-out'); }, 1000);
</script>
</body>
</html>