Skip to content

Commit 05525eb

Browse files
ZaecheZaeche
committed
Added update, cleaned up some of the code, learnt CSSAnim tricks
1 parent 36327f7 commit 05525eb

File tree

3 files changed

+112
-12
lines changed

3 files changed

+112
-12
lines changed

‎css/w3.css

+20-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
44
html {
55
-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%
6-
background: url(images/bg.jpg) no-repeat center center fixed;
6+
background: url(placeholder-img.jpg) no-repeat center center fixed;
77
-webkit-background-size: cover;
88
-moz-background-size: cover;
99
-o-background-size: cover;
@@ -348,4 +348,22 @@ input[type=checkbox].w3-check:disabled+.w3-validate,input[type=radio].w3-radio:d
348348
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
349349
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffd7!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
350350
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60;filter:alpha(opacity=60)}
351-
.w3-text-shadow{text-shadow:1px 1px 0 #444}.w3-text-shadow-white{text-shadow:1px 1px 0 #ddd}
351+
.w3-text-shadow{text-shadow:1px 1px 0 #444}.w3-text-shadow-white{text-shadow:1px 1px 0 #ddd}
352+
353+
/* Custom add-ons
354+
.custom-delayed-tooltip {
355+
position:relative;
356+
display:none;
357+
transition:0s;
358+
transition-delay:1s;
359+
}
360+
.custom-delayed-tooltip:hover .w3-text{
361+
display:inline-block;
362+
}
363+
364+
365+
.exit-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
366+
@-webkit-keyframes exittop{from{top:0;opacity:1} to{top:-300px;opacity:0}}
367+
@keyframes exittop{from{top:0;opacity:1} to{top:-300px;opacity:0}}
368+
369+
*/

‎index.html

+91-9
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,22 @@
3535
<img src="placeholder-img.jpg" alt="Lights" style="width:100%;height:1010px;">
3636

3737
<div class="w3-display-topleft">
38-
<a onclick="document.getElementById('alert-1').style.display='block'" class="w3-btn-floating-large w3-text-pale-blue w3-hover-blue w3-blue-grey w3-border w3-border-blue w3-hover-text-white w3-ripple w3-lobster" style="position:relative;left:10px;top:10px;">i</a>
38+
<a id="notify" onclick="ExpandElement(this)" onmouseover="ExpandToolTip()" onmouseout="ContractToolTip()"
39+
class="w3-btn-floating-large w3-text-pale-blue w3-hover-blue w3-blue-grey w3-border w3-border-blue w3-hover-text-white w3-ripple w3-lobster"
40+
style="position:relative;left:10px;top:10px;"> i </a>
41+
42+
<div id="tooltip" class="w3-text w3-tag w3-round w3-xlarge w3-blue-grey w3-row-padding w3-section w3-text-shadow w3-bold"
43+
style="display:none;position:absolute;top:0px;left:75px;"> Information </div>
3944

4045
<!-- Alert 1 -->
41-
<div id="alert-1" class="w3-modal w3-card-8 w3-section w3-hover-blue w3-blue-grey w3-animate-left w3-row-padding w3-text-shadow w3-bold">
42-
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn w3-hover-text-red">&times;</span>
43-
<h3>Information</h3>
44-
<p> 28/07/2016: Site under construction. Reviewed and revised the inital design, simplifying it.</p>
46+
<div id="alert-1" class="w3-modal w3-card-24 w3-section w3-hover-blue w3-blue-grey w3-animate-left w3-row-padding w3-text-shadow w3-bold" style="max-width:700px;">
47+
<span onclick="document.getElementById('alert-1').style.display='none'" class="w3-closebtn w3-hover-text-red">&times;</span>
48+
<p> 28/07/2016: Beginning site construction. Reviewed and revised the inital design, simplifying it.</p>
49+
</div>
50+
51+
<div id="alert-2" class="w3-modal w3-card-24 w3-section w3-hover-blue w3-blue-grey w3-animate-left w3-row-padding w3-text-shadow w3-bold" style="max-width:700px;">
52+
<span onclick="document.getElementById('alert-2').style.display='none'" class="w3-closebtn w3-hover-text-red">&times;</span>
53+
<p> 01/08/2016: Reviewing which web technologies I want to be using and are best suited for the design I have in mind.</p>
4554
</div>
4655
</div>
4756

@@ -129,21 +138,94 @@ <h2><a href="https://github.com/Zaeche" title="Go to GitHub!" class="w3-btn w3-x
129138
</div>
130139
</div>
131140
</div>
141+
142+
<style>
143+
#tooltip{
144+
-webkit-transform: perspective(350px) rotateX(-90deg);
145+
transform: perspective(350px) rotateX(-90deg);
146+
-webkit-transform-origin: 0% 0%;
147+
transform-origin: 0% 0%;
148+
animation: flipperUp 0.75s;
149+
animation-fill-mode: forwards;
150+
-webkit-animation: flipperUp 0.75s;
151+
-webkit-animation-fill-mode: forwards;
152+
}
153+
154+
#tooltip.flipped
155+
{
156+
animation: flipper 0.75s;
157+
animation-fill-mode: forwards;
158+
-webkit-animation: flipper 0.75s;
159+
-webkit-animation-fill-mode: forwards;
160+
}
161+
162+
@keyframes flipper
163+
{
164+
0% { transform: perspective(350px) rotateY(-90deg); }
165+
33% { transform: perspective(350px) rotateY(0deg); }
166+
50% { transform: perspective(200px) rotateY(7.5deg); }
167+
66% { transform: perspective(275px) rotateY(-5deg); }
168+
90% { transform: perspective(350px) rotateY(2.5deg); }
169+
100% { transform: perspective(350px) rotateY(0deg); }
170+
}
171+
172+
@-webkit-keyframes flipper
173+
{
174+
0% { -webkit-transform: perspective(350px) rotateY(-90deg); }
175+
33% { -webkit-transform: perspective(350px) rotateY(0deg); }
176+
50% { -webkit-transform: perspective(200px) rotateY(7.5deg); }
177+
66% { -webkit-transform: perspective(275px) rotateY(-5deg); }
178+
90% { -webkit-transform: perspective(350px) rotateY(2.5deg); }
179+
100% { -webkit-transform: perspective(350px) rotateY(0deg); }
180+
}
181+
182+
@keyframes flipperUp
183+
{
184+
0% { transform: perspective(350px) rotateY(0deg); }
185+
45% { transform: perspective(350px) rotateY(-10deg); }
186+
100% { transform: perspective(350px) rotateY(90deg); }
187+
}
188+
189+
@-webkit-keyframes flipperUp
190+
{
191+
0% { -webkit-transform: perspective(350px) rotateY(0deg); }
192+
45% { -webkit-transform: perspective(350px) rotateY(-10deg); }
193+
100% { -webkit-transform: perspective(350px) rotateY(90deg); }
194+
}
195+
</style>
132196

133197
<script>
134-
// Get the modal
135-
var alarum = document.getElementById('contact');
198+
var timeDelay = "400";
199+
200+
// Get elemnnt
201+
var alarum = document.getElementById('contact'); var tool = document.getElementById('tooltip');
202+
var oneAlert = document.getElementById('alert-1'); var twoAlert = document.getElementById('alert-2');
136203

137204
// When the user clicks anywhere outside of the modal, close it
138205
window.onclick = function(event) {
139206
if (event.target == alarum) {
140-
alarum.style.display = "none";
207+
alarum.style.display="none";
141208
}
142209
}
210+
211+
function ExpandToolTip() {
212+
tool.className += " flipped ";
213+
tool.style.display = "inline-block";
214+
};
215+
216+
function ContractToolTip() {
217+
tool.className = tool.className.replace( /(?:^|\s)flipped(?!\S)/g , '');
218+
};
219+
220+
221+
function ExpandElement() {
222+
setTimeout(function() {oneAlert.style.display='block'}, timeDelay);
223+
setTimeout(function() {twoAlert.style.display='block'}, timeDelay*2);
224+
};
225+
143226
</script>
144227

145228

146-
<!-- ----------------------- Miscellaneous Stuff ----------------- -->
147229
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
148230
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
149231

‎js/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
$(document).ready(function() {
1+
$(document).ready(function() {
22

33
});

0 commit comments

Comments
 (0)