Letter Effects and Interaction Ideas

A couple of ideas for typography animations and letter (hover) effects for playful interactions.
LetterInteractions_Featured

Today we’d like to share four typography animations with you. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters.

Update: We’ve created some additional demos, read more about them here: Letter Effects and Interaction Ideas (Part 2)

Attention: We use some modern CSS properties like CSS Grid and CSS Variables in the demos, so please view them with a capable browser.

Please note that some of the effects are specifically made for hover so mobile support is limited.

Here are the previews of the demos:

LetterInteractions_01

LetterInteractions_02

LetterInteractions_03

LetterInteractions_04

We hope you have fun with these little effects and find them inspiring!

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 13

  1. 4

    Manoela: (I know you like to be called Mary Lou, but I just like the sound of Manoela). I have a suggestion. Instead of having a error message script for IE why not have a redirect to some other page like Google? It took me several hours to search the net to find the answer.

    So for those who do not wish to to their own hunting

    1. Delete Manoela’s crept from the head section
    2. Paste following code

    if(navigator.appName.indexOf(“Internet Explorer”)!=-1 || navigator.userAgent.match(/Trident.*rv[ :]*11\./))
    {
    //This user uses Internet Explorer
    window.location = “http://www.gigiyut.com/”;
    }

    It works for me. I have no clue if it follows proper programming conventions or not.

  2. 7

    Sorry, but I’m not an expert. I wanna know why the user only can see the links names in responsive design mode but not in the PC display design mode? The concept is beautiful, but some users maybe will find difficult to navigate through it.

Follow this discussion

Leave a Comment