Archived
More animation
This commit is contained in:
nikolark committed
1 parent
16ab837171
commit
9d398f67e8
4 files changed
+53
-12
No files matched your search
@@ -632,7 +632,8 @@ article .article-footer { text-align: right; }
|
||||
|
||||
.wave { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background-color: #007aff; }
|
||||
|
||||
.wavetop { position: relative; bottom: 12px; height: 12px; background-image: url("../images/wave_top.png"); background-size: 48px 12px; background-repeat: repeat-x; width: 100%; }
|
||||
.wavetop { position: relative; bottom: 12px; height: 12px; background-image: url("../images/wave_top.png"); background-size: 48px 12px; background-repeat: repeat-x; background-position: 0; width: 100%; }
|
||||
.wavetop.animated { -webkit-animation: move-left 1s infinite linear; -moz-animation: move-left 1s infinite linear; -o-animation: move-left 1s infinite linear; animation: move-left 1s infinite linear; }
|
||||
|
||||
.row { /* FIXME: responsive */ width: 1000px; max-width: 1000px; }
|
||||
|
||||
@@ -655,9 +656,11 @@ article .article-footer { text-align: right; }
|
||||
/* Samuel E. Wright - Under the sea */
|
||||
.anda-da-zee { position: relative; width: 100%; height: 5000px; background-image: -webkit-linear-gradient(#007aff, #00005e); background-image: -moz-linear-gradient(#007aff, #00005e); background-image: -o-linear-gradient(#007aff, #00005e); background-image: linear-gradient(#007aff, #00005e); border-bottom: solid 65px #000043; }
|
||||
.anda-da-zee .punsjebollen { position: absolute; bottom: -40px; left: 25%; z-index: 1; width: 512px; height: 340px; background-image: url("../images/punsjebolle.png"); background-repeat: no-repeat; }
|
||||
.anda-da-zee .trail-of-bubbles { position: absolute; top: 475px; left: 50%; }
|
||||
.anda-da-zee .trail-of-bubbles .bubble { border-color: #0062cc; }
|
||||
.anda-da-zee .bubble { width: 20px; height: 20px; display: inline-block; position: absolute; bottom: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50% 50%; border-radius: 50% 50%; border: 6px solid #007aff; }
|
||||
.anda-da-zee .bubble.first { left: 80px; width: 50px; height: 50px; border: 14px solid #007aff; -webkit-animation: fade-move-long 4s infinite; -moz-animation: fade-move-long 4s infinite; -o-animation: fade-move-long 4s infinite; animation: fade-move-long 4s infinite; }
|
||||
.anda-da-zee .bubble.second { left: 150px; width: 35px; height: 35px; bottom: 40px; border: 10px solid #007aff; -webkit-animation: fade-move-middle 4s 0.6s infinite; -moz-animation: fade-move-middle 4s 0.6s infinite; -o-animation: fade-move-middle 4s 0.6s infinite; animation: fade-move-middle 4s 0.6s infinite; }
|
||||
.anda-da-zee .bubble.first { left: 80px; width: 50px; height: 50px; border-width: 14px; -webkit-animation: fade-move-long 4s infinite; -moz-animation: fade-move-long 4s infinite; -o-animation: fade-move-long 4s infinite; animation: fade-move-long 4s infinite; }
|
||||
.anda-da-zee .bubble.second { left: 150px; width: 35px; height: 35px; bottom: 40px; border-width: 10px; -webkit-animation: fade-move-middle 4s 0.6s infinite; -moz-animation: fade-move-middle 4s 0.6s infinite; -o-animation: fade-move-middle 4s 0.6s infinite; animation: fade-move-middle 4s 0.6s infinite; }
|
||||
.anda-da-zee .bubble.third { left: 100px; -webkit-animation: fade-move 4s 1.4s infinite; -moz-animation: fade-move 4s 1.4s infinite; -o-animation: fade-move 4s 1.4s infinite; animation: fade-move 4s 1.4s infinite; }
|
||||
|
||||
/* fade move bubbles */
|
||||
@@ -708,3 +711,16 @@ article .article-footer { text-align: right; }
|
||||
@keyframes fade-move-long { 0% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; bottom: 430px; } }
|
||||
|
||||
/* move left */
|
||||
@-moz-keyframes move-left { 0% { background-position: 0; }
|
||||
100% { background-position: 48px; } }
|
||||
|
||||
@-webkit-keyframes move-left { 0% { background-position: 0; }
|
||||
100% { background-position: 48px; } }
|
||||
|
||||
@-o-keyframes move-left { 0% { background-position: 0; }
|
||||
100% { background-position: 48px; } }
|
||||
|
||||
@keyframes move-left { 0% { background-position: 0; }
|
||||
100% { background-position: 48px; } }
|
||||
@@ -3,11 +3,10 @@
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="wavetop"></div>
|
||||
<div id="inner-footer">
|
||||
<div class="anda-da-zee"><div class="punsjebollen">
|
||||
<div class="bubble first"></div>
|
||||
<div class="bubble second"></div>
|
||||
<div class="bubble third"></div>
|
||||
</div></div>
|
||||
<a href="http://studentersamfundet.no/"><img src="<?php echo get_template_directory_uri(); ?>/images/streamer.png" /></a>
|
||||
<!--<nav role="navigation">
|
||||
<?php wp_nav_menu( array( 'theme_location' => 'footer', 'menu_class' => 'footer-menu' ) ); ?>
|
||||
</nav>-->
|
||||
</div> <!-- end #inner-footer -->
|
||||
</footer> <!-- end footer -->
|
||||
</div> <!-- end #container -->
|
||||
|
||||
@@ -29,10 +29,12 @@ jQuery(function($) {
|
||||
|
||||
/* konami code */
|
||||
var showing = false;
|
||||
var anda_da_zee = '<div class="anda-da-zee"><div class="punsjebollen"></div></div>';
|
||||
var anda_da_zee = '<div class="anda-da-zee"><div class="trail-of-bubbles"><div class="bubble first"></div><div class="bubble second"></div><div class="bubble third"></div></div><div class="punsjebollen"><div class="bubble first"></div><div class="bubble second"></div><div class="bubble third"></div></div></div>';
|
||||
|
||||
function showKonami() {
|
||||
if (showing) { return; }
|
||||
$("#inner-footer").html(anda_da_zee);
|
||||
$(".wavetop").addClass('animated');
|
||||
showing = true;
|
||||
}
|
||||
|
||||
|
||||
@@ -47,6 +47,7 @@
|
||||
@import "compass/css3/border-radius";
|
||||
|
||||
$multiplied: #00005e; // FIXME: use this instead of transparent water?
|
||||
$punch-color: #000043;
|
||||
|
||||
/* General styles */
|
||||
body {
|
||||
@@ -461,7 +462,11 @@ article {
|
||||
background-image: url("../images/wave_top.png");
|
||||
background-size: 48px 12px;
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0;
|
||||
width:100%;
|
||||
&.animated {
|
||||
@include animation(move-left 1s infinite linear);
|
||||
}
|
||||
}
|
||||
.row {
|
||||
/* FIXME: responsive */
|
||||
@@ -536,7 +541,7 @@ article {
|
||||
width: 100%;
|
||||
height: 5000px;
|
||||
@include background-image(linear-gradient($primary-color, $multiplied));
|
||||
border-bottom: solid 65px #000043;
|
||||
border-bottom: solid 65px $punch-color;
|
||||
.punsjebollen {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
@@ -547,6 +552,16 @@ article {
|
||||
@include background-image( url('../images/punsjebolle.png'));
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.trail-of-bubbles {
|
||||
position: absolute;
|
||||
top: 475px;
|
||||
left: 50%;
|
||||
|
||||
.bubble {
|
||||
border-color: darken($primary-color, 10%);
|
||||
}
|
||||
|
||||
}
|
||||
.bubble {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@@ -560,7 +575,7 @@ article {
|
||||
left: 80px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 14px solid $primary-color;
|
||||
border-width: 14px;
|
||||
@include animation(fade-move-long 4s infinite);
|
||||
}
|
||||
&.second {
|
||||
@@ -568,7 +583,7 @@ article {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
bottom: 40px;
|
||||
border: 10px solid $primary-color;
|
||||
border-width: 10px;
|
||||
@include animation(fade-move-middle 4s .6s infinite);
|
||||
}
|
||||
&.third {
|
||||
@@ -617,3 +632,12 @@ article {
|
||||
}
|
||||
|
||||
}
|
||||
/* move left */
|
||||
@include keyframes(move-left) {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 48px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user