Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save strarsis/fd3c5b3381b1ac5d5534e742063fab6d to your computer and use it in GitHub Desktop.
Save strarsis/fd3c5b3381b1ac5d5534e742063fab6d to your computer and use it in GitHub Desktop.
Create a curve to text using Lettering.js, Sass, and Compass
/* Add a wave alignment to your title text using Sass, Compass, and Lettering.js.
*
* Lettering.js wraps each letter with a span with a class of .char<#>.
* Compass provides math functions including the sin which provides the wave form.
*/
$length: 11; // The word is 11 letters long
@for $i from 1 through $length {
.char#{$i} {
@include transform(translateY( sin(($i - 1)/($length - 1)*2*pi()) * -25px) );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment