We're celebrating a new year and new skills, by offering a 21% discount off all courses and collections at checkout! ✨

Playground Paris colorful text hover effect

Published

September 20th 2017

Difficulty

Beginner

Posted by

Lawrence Gosset

The new site from Playground Paris has a really nice hover effect on its text. We wanted to show how it was done.

Transcript

- Hi.Lawrence here.What we're gonna make today is this cool hover effectthat's being used on the Playground Paris website.So Playground Paris, they're a graphic design agencyfrom France.And when you hover over the letters in their heading,they turn to a color, and sort of transition in,and when you move your mouse away, they fade out again.So to do this we're gonna use a bit of CSS.And we're first gonna set up a project with a H1 tag.So I've gone with the heading "learn to code now,"I've got this JavaScript file but I haven't addedthat in just yet.I'm gonna explain why later.And inside of our styles, I haven't really done much tools.So I'm just got a slab font from Google Fonts,added that into the top, and I've set up a H1to be quite big and just align in the center.So this is what it looks like.I've got the words "learn to code now" just nice and big.And when I hover over it doesn't actually do anything yet.So how do we get this effect to work?Well, the first thing we need to do is toactually break down our heading here.So each letter is an individual element.

So the way we can do that is inside of your index.html,we're just gonna grab this heading.And for each individual letter, we're going to put itinside of a span tag.So a span tag is designed for wrapping around bits of text.

And you can see here, that I can grab the words "learn"and then just put each one in a span tag.So you might have seen already that's quitea time consuming process.But I'm just gonna demonstrate the idea ofwhat's going on first.

So, in your style.css what we're going to do,is we're going to say when we hover over a span,we're gonna make the color green.

So when you hover over every individual letter,it turns green.This is the kinda basis of the effect.We break down each letter into a span tagand then we're changing the color when we hover over it.So just to take this and make it a bit better,what we're gonna say is we're gonna say H1 span.We're going to add a transition,so this is gonna take the color.Say color, is what we wanna transition.We want it to take one second.So now when we hover over, it's gonna fade in for us nicely,and it's gonna fade out again when we move our mouse away.Now it's a little bit of a sort of drawn out effect.We need to really wait there with our mouse,and if we're kind of mousing aroundit doesn't actually do anything.So the way it works on Playground Paris is whenwe mouse onto it, it instantly shows up,and when we mouse away it fades out slowly.So what we need to say is that when we actually hoverover our span, we want that transitionto happen immediately.So we're still gonna have our transition here,but the time that we're gonna give itis gonna be zero seconds.

So you see now, it flickers on instantly,but then when we mouse away it fades out.

So, this is working for us well so far,but it's a bit annoying to have to go in withall the headings on the page that we want to addthis effect to, and wrap the letters in span tags.So to get around this I've createda little bit of JavaScript that we can drop into our projectthat does that job for us.So, if you go into the main.js file,I'll leave this code in the notes, in the comments.

But basically you just copy and paste it in,and then with this makeSpan functionat the bottom here I just want to pass in thename of the element.So its gonna be a H2.I can give it multiple things if I had a heading class,I could attach it like that.

So, I'm just using a H1 tag so I'm just gonna putmy H1 in there.

And what this does now, is it grabs that H1and it gets each individual letter and just putsit in a span tag for us.So it just saves us a bit of timehaving to do that manually.So now, I've got each individual letterwrapped in a span tag, and this effect is workingnicely for me.

So how do I go about making each letter a different color?Well the way that I'm gonna tackle this isby using something called the nth child property.So in CSS, where we have a series of elements,so in this case we've got a whole list of spans,I can actually add a specific style to onethat is a certain number in the sequence.So nth child looks a bit like this.So I'm gonna say for one n, which meansfor every first one in the sequence,so basically it's gonna apply to every single one,I'm gonna make it red.

And then, what I'm gonna do for every second onein the sequence, so this will be for the second,the fourth, the sixth, and so on, I'm gonna make that green.

And then for the third one in the sequence,I'm gonna make that blue.So I'm just gonna move RGB here usingjust the vanilla CSS colors, just to keep it nice and pure.So let's have a look, to see what this looks like.And you can see now for the first ones I've got red.

For the second and third they're blue and green.So I got a kinda nice even spread of the colorsand this just works quite well for this.So, they're not actually being triggered with hoverat all now, they're just constantly showing.So what I'm gonna do is on top of this,sort of nth child selector after,I'm gonna add a hover state as well.So this is a little bit funky looking nowbecause we have these two colon pseudo statesgoing on at the same time.But that's absolutely fine.CSS let's us do that.So now these styles are only gonna be triggeredwhen we hover over them.

So going into the preview now.Mousing over the letters.This is what we're getting.They're instantly fading in.It's picking out which one in the sequencewe have for applying the color, and when we mouse awayit's fading out again.

So, that's basically it.

Feel free to kind of play around with the nth child.If you wanna look for some examples of it,there's a article called "nth-child Recipes"on the very famous CSS Tricks website.Kinda goes through very common things you might want to do.Shows you various combinations of how to use it.So I recommend playing around with that,making the style of it completely your own,adding new colors and that kind of thing.and feel free to send these back at us,what kind of examples you come up with.So that's it, hope you enjoyed it.

Published

September 20th 2017

Difficulty

Beginner

Posted by

Lawrence Gosset

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration