Letter Effects and Interaction Ideas (Part 2)

A new set of letter effects and animations for playful typography interactions.
LetterInteractions2_Featured

Today we’d like to share some more letter effects with you. Just like in the first set, we play around with hover and click interactions to create some fun typography animations. For some animations we use anime.js. Charming.js helps us with the needed structure for the letters.

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

The crossword demo makes use of the new CSS grid layout. By just giving a set of columns and rows for each word, we can easily position each letter in a grid layout. With a structure like this, we can automatically set each grid-row and grid-column property:

<h2 class="word word--crossword">
	<span class="word__main" data-column="1" data-row="4">Karma</span>
	<span class="word__cross" data-column="1" data-row="4">Kiss</span>
	<span class="word__cross" data-column="2" data-row="2">Heart</span>
	<span class="word__cross" data-column="3" data-row="1">Embrace</span>
	<span class="word__cross" data-column="4" data-row="3">Smile</span>
	<span class="word__cross" data-column="5" data-row="1">Innate</span>
</h2>

The word__main runs horizontally and all word__cross elements vertically. The data-row for the word__cross defines in which row the word starts. Given the number of letters and their cells, we have a 5×7 grid for this example.

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

Here are the previews of the new demos:

LetterInteractions_05

LetterInteractions_06

LetterInteractions_07

LetterInteractions_08

LetterInteractions_09

We hope you enjoy these new effects and find them useful!

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 8

  1. 5

    One of my favorite website I love all your work. You always come up with something new.

  2. 7

    Really great stuff, but how the heck do I make those cool typographies to begin with? I don’t know where to start or find resources :(

  3. 8

    Great insights, gonna test new typos interactions right the way. Thank you very much for sharing it!

Follow this discussion

Leave a Comment