From 9d398f67e8e1344ab8f6ed3a733ac4d9ae7b8921 Mon Sep 17 00:00:00 2001 From: Nikolai Kristiansen Date: Sat, 11 May 2013 18:42:24 +0200 Subject: [PATCH] More animation --- wp-content/themes/studio13/css/app.css | 22 ++++++++++++++--- wp-content/themes/studio13/footer.php | 9 ++++--- wp-content/themes/studio13/js/main.js | 4 +++- wp-content/themes/studio13/sass/app.scss | 30 +++++++++++++++++++++--- 4 files changed, 53 insertions(+), 12 deletions(-) diff --git a/wp-content/themes/studio13/css/app.css b/wp-content/themes/studio13/css/app.css index df45aba..caa57b8 100644 --- a/wp-content/themes/studio13/css/app.css +++ b/wp-content/themes/studio13/css/app.css @@ -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; } } diff --git a/wp-content/themes/studio13/footer.php b/wp-content/themes/studio13/footer.php index 2134b03..bde4f0d 100644 --- a/wp-content/themes/studio13/footer.php +++ b/wp-content/themes/studio13/footer.php @@ -3,11 +3,10 @@ diff --git a/wp-content/themes/studio13/js/main.js b/wp-content/themes/studio13/js/main.js index 9d38236..83b3b6d 100644 --- a/wp-content/themes/studio13/js/main.js +++ b/wp-content/themes/studio13/js/main.js @@ -29,10 +29,12 @@ jQuery(function($) { /* konami code */ var showing = false; - var anda_da_zee = '
'; + var anda_da_zee = '
'; + function showKonami() { if (showing) { return; } $("#inner-footer").html(anda_da_zee); + $(".wavetop").addClass('animated'); showing = true; } diff --git a/wp-content/themes/studio13/sass/app.scss b/wp-content/themes/studio13/sass/app.scss index b8e796b..981617d 100644 --- a/wp-content/themes/studio13/sass/app.scss +++ b/wp-content/themes/studio13/sass/app.scss @@ -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; + } +}