We're celebrating a new year and new skills, by offering a 21% discount off all courses and collections at checkout! ✨
September 20th 2017
The new site from Playground Paris has a really nice hover effect on its text. We wanted to show how it was done.
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.
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.