730 source/css/txt.wav.css

Large diffs are not rendered by default.

25 source/js/txt.wav.js
@@ -0,0 +1,25 @@
(function() {
var textWaveElements = document.getElementsByClassName('text-wave');

for (var i = 0, length = textWaveElements.length; i < length; i++) {
var el = textWaveElements[i];
var text = el.outerText;

el.innerHTML = null;
spanWrapHelper(el, text);
}

function spanWrapHelper(el, text) {
for(var i in text) {
if(text[i] === " ") {
var span = document.createElement('span');
span.innerHTML = "&nbsp;";
el.appendChild(span);
} else {
var span = document.createElement('span');
span.innerHTML = text[i];
el.appendChild(span);
}
}
}
})();
26 source/sass/_flip.scss
@@ -0,0 +1,26 @@
// Flip-Wave
$flip-offset: -16px;
$flip-count: 20;
$flip-duration: 4;

@for $i from 0 to $flip-count {
@keyframes flip-wave-#{$i} {
#{($i * 5) + 5 }% {
-webkit-transform: translate3d(0, -16px, 0) rotate(720deg);
}
#{($i * 5) + 10 }% {
-webkit-transform: translate3d(0, 0, 0) rotate(720deg);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(720deg);
}
}

.text-wave.flip :nth-child( #{$flip-count}n + #{$i} ) {
display: inline-block;
-webkit-animation-duration: #{$flip-duration}s;
-webkit-animation-name: flip-wave-#{$i};
-webkit-animation-iteration-count: infinite;
}

}
85 source/sass/txt.wav.scss
@@ -0,0 +1,85 @@
@import 'flip.scss';

// Slow-Wave
$slow-offset : -10px;
$slow-count : 25;
$slow-duration : 3;

@keyframes slow-wave {
from {
transform: translateY(0);
}
to {
transform: translateY( $slow-offset );
}
}

.text-wave.slow span {
display: inline-block;
animation-duration: #{$slow-duration}s;
animation-name: slow-wave;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@for $i from 0 to $slow-count {
.text-wave.slow :nth-child( #{$slow-count}n + #{$i} ) {
animation-delay : -#{($slow-count - $i) * 2 * $slow-duration / $slow-count }s;
}
}

// Bounce-Wave
$bounce-offset : -10px;
$bounce-count : 25;
$bounce-duration : 0.3;

@keyframes bounce-wave {
from {
transform: translateY(0);
}
to {
transform: translateY( $bounce-offset );
}
}

.text-wave.bounce span {
display: inline-block;
animation-duration: #{$bounce-duration}s;
animation-name: bounce-wave;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@for $i from 0 to $bounce-count {
.text-wave.bounce :nth-child( #{$bounce-count}n + #{$i} ) {
animation-delay : -#{($bounce-count - $i) * 2 * $bounce-duration / $bounce-count }s;
}
}

// Vibe-Wave
$vibe-offset : 4px;
$vibe-count : 10;
$vibe-duration : 0.08;

@keyframes vibe-wave {
from {
transform: translateY(0);
}
to {
transform: translateY( $vibe-offset );
}
}

.text-wave.vibe span {
display: inline-block;
animation-duration: #{$vibe-duration}s;
animation-name: vibe-wave;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@for $i from 0 to $vibe-count {
.text-wave.vibe :nth-child( #{$vibe-count}n + #{$i} ) {
animation-delay : -#{($vibe-count - $i) * 2 * $vibe-duration / $vibe-count }s;
}
}