Text Heading Effects – Inspiration for Text Styles and Hover Effects
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
When it comes to tiny animations and effects on text, be it a link, a typographic logo or an introductory sentence, there’s really no limit to the creative possibilities. So today we’d like to share a couple of text styles and hover effects with you to get your creative juices flowing. We hope you enjoy them and find them inspiring!
The markup for this effect is simply a link with a data attribute:
<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>
The common styles for all link effects are as follows:
.link {
outline: none;
text-decoration: none;
position: relative;
font-size: 8em;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
If you have a look at the Kukuri effect, you will see that, on hover, a bar appears by sliding in from the left. This bar will “drag” along the colored version of the text which we pack into the ::before pseudo element. We set the initial position of the bar to be outside of the link box which we set to overflow: hidden.
The other pseudo element that contains the text copy will animate it’s width and because the text inside is set not to wrap, we create a “reveal”-like effect. This transition will happen after a delay, so that we first see the bar passing through. The timing function used for the bar adds some jazz:
.link--kukuri {
text-transform: uppercase;
font-weight: 900;
overflow: hidden;
line-height: 0.75;
color: #b2b0a9;
}
.link--kukuri:hover {
color: #b2b0a9;
}
.link--kukuri::after {
content: '';
position: absolute;gi
height: 16px;
width: 100%;
top: 50%;
margin-top: -8px;
right: 0;
background: #F9F9F9;
transform: translate3d(-100%,0,0);
transition: transform 0.4s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.link--kukuri:hover::after {
transform: translate3d(100%,0,0);
}
.link--kukuri::before {
content: attr(data-letters);
position: absolute;
z-index: 2;
overflow: hidden;
color: #424242;
white-space: nowrap;
width: 0%;
transition: width 0.4s 0.3s;
}
.link--kukuri:hover::before {
width: 100%;
}
Webiste: http://tympanus.net/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/
Demo: http://tympanus.net/Development/TextStylesHoverEffects/
Thanks for reading,Web Editor