Letter Effects and Interaction Ideas (Part 2)

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

Letter Effects and Interaction Ideas (Part 2) was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants