edb/studio-2013
Archived
9
0 Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Animated bubbles

Browse Source
This commit is contained in:
nikolark committed 2013-05-11 17:46:12 +02:00
1 parent 2f30e52bba
commit 16ab837171
4 files changed
+128 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wp-content/themes/studio13/css/app.css
+53
View File
@@ -655,3 +655,56 @@ 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 .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.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 */
@-moz-keyframes fade-move { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 230px; } }
@-webkit-keyframes fade-move { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 230px; } }
@-o-keyframes fade-move { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 230px; } }
@keyframes fade-move { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 230px; } }
@-moz-keyframes fade-move-middle { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 330px; } }
@-webkit-keyframes fade-move-middle { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 330px; } }
@-o-keyframes fade-move-middle { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 330px; } }
@keyframes fade-move-middle { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 330px; } }
@-moz-keyframes fade-move-long { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 430px; } }
@-webkit-keyframes fade-move-long { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 430px; } }
@-o-keyframes fade-move-long { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 430px; } }
@keyframes fade-move-long { 0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0; bottom: 430px; } }
wp-content/themes/studio13/footer.php
+5 -4
View File
@@ -3,10 +3,11 @@
<footer class="footer" role="contentinfo">
<div class="wavetop"></div>
<div id="inner-footer">
<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 class="anda-da-zee"><div class="punsjebollen">
<div class="bubble first"></div>
<div class="bubble second"></div>
<div class="bubble third"></div>
</div></div>
</div> <!-- end #inner-footer -->
</footer> <!-- end footer -->
</div> <!-- end #container -->
wp-content/themes/studio13/images/punsjebolle.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 15 KiB

wp-content/themes/studio13/sass/app.scss
+70
View File
@@ -44,6 +44,7 @@
@import "compass/css3/filter";
@import "compass/css3/animation"; // requires compass v0.13, see README.md
@import "compass/css3/images";
@import "compass/css3/border-radius";
$multiplied: #00005e; // FIXME: use this instead of transparent water?
@@ -546,4 +547,73 @@ article {
@include background-image( url('../images/punsjebolle.png'));
background-repeat: no-repeat;
}
.bubble {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
bottom: 30px;
@include border-radius(50% 50%);
border: 6px solid $primary-color;
&.first {
left: 80px;
width: 50px;
height: 50px;
border: 14px solid $primary-color;
@include animation(fade-move-long 4s infinite);
}
&.second {
left: 150px;
width: 35px;
height: 35px;
bottom: 40px;
border: 10px solid $primary-color;
@include animation(fade-move-middle 4s .6s infinite);
}
&.third {
left: 100px;
@include animation(fade-move 4s 1.4s infinite);
}
}
}
/* fade move bubbles */
@include keyframes(fade-move) {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
bottom: 230px;
}
}
@include keyframes(fade-move-middle) {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
bottom: 330px;
}
}
@include keyframes(fade-move-long) {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
bottom: 430px;
}
}