{"id":66730,"date":"2019-06-10T02:34:09","date_gmt":"2019-06-10T09:34:09","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/06\/how-to-code-smart-text-effects-with-css\/"},"modified":"2019-06-10T02:34:09","modified_gmt":"2019-06-10T09:34:09","slug":"how-to-code-smart-text-effects-with-css","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/06\/how-to-code-smart-text-effects-with-css\/","title":{"rendered":"How to code smart text effects with CSS"},"content":{"rendered":"

Rollover links are a great way to grab a user’s attention, especially if they do something unusual or original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation, which kicks in when the visitor hovers over the word. The animation helps convey the sandwich brand’s playful character.\u00a0<\/p>\n

In this article, we show you how to recreate the effect on your site. For more inspiration, take a look at our guide to the best CSS animation examples<\/a> (with instructions on how to code them).<\/p>\n

01. Rollover text effect<\/h3>\n

One of the great text effects on the Middle Child website is for the rollover effects on the menu, where the letters split apart on the text and rotate slightly. Start this with some simple HTML tags.<\/p>\n

02. Create CSS<\/h3>\n

Use a separate CSS file or style tags to add the following CSS rules and make the page fill the full size of the browser by ensuring the body and the wrapper take the full height available.<\/p>\n

03. Position the word<\/h3>\n

The word<\/strong> class centres the word in the grid. Any text that is given the word<\/strong> class can have this applied. The up<\/strong> class is going to be applied to every other letter and these will move upwards.<\/p>\n

04. Up and over<\/h3>\n

Now the down<\/strong> class shares very similar settings to the up<\/strong> but the hover shows the movement upwards for the up<\/strong> rollover. Upwards is also rotated slightly to enhance the look.<\/p>\n

05. Hovering down<\/h3>\n

When the user hovers over the text, the down class moves the text downwards. Later in JavaScript the text will be split into separate spans with the classes added automatically to alternate spans.<\/p>\n

06. Automatic for the people<\/h3>\n

It’s a bit of a hassle to have to put every letter in alternating spans with different classes, so we’ll automate the process by getting JavaScript to query the selector and take each letter. Here the str<\/strong> variable grabs the current letter as it loops through the text.<\/p>\n

07. Add alternating classes<\/h3>\n

Now another loop places each letter in its own span element and adds either the up<\/strong> or down<\/strong> class to the spans. If you look at this in the browser you will see the text split by each letter up and down, while rotating slightly.\u00a0<\/p>\n

You can see the effect in action on the Middle Child website<\/a>.<\/p>\n

This article was originally published in creative web design magazine <\/em>Web Designer<\/em><\/a>.<\/em> <\/a>Buy issue 286 <\/em><\/a>or <\/em>subscribe<\/em><\/a>.<\/em><\/p>\n

Read more:<\/strong><\/p>\n