Letter Effects and Interaction Ideas (Part 2)

Jul 25, 2017

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