Elementor Parallax Text Effect

hey everybody in this video i'm going to show you how to do this awesome parallax text outline effect now the techniques you're going to learn in this video you can take and apply to do dozens and dozens of other effects so you're going to learn a lot it's going to be a lot of fun and let's get started all right so i'm just going to set up my environment real fast now you can add this text effect anywhere you want on your website but for training purposes i'm just going to work on kind of a blank canvas that way you can focus more on what we're making and not everything else going on around it you want to make sure you have your navigator open if it's not open or you don't know how in the bottom left corner it's a second icon from the left navigator when you're working with multiple layers especially parallax when you know layers are on top of each other the navigator is super handy and pretty much required so let's get this started i'm going to add a heading element now the style options are kind of up to you i'm just going to center it i'm going to put in my text and then i'm going to go to the style tab i'm going to change the text color to white again you can make it whatever color you want and in the typography i'm going to choose a nice thick font i'm going to do helvetica with the weight of 800 and transform of uppercase and then i'll probably make the size around 115 or so yeah 115 maybe 112. perfect so that's gonna be my text so you see in my navigator here i'm gonna double click the heading name and then i'm gonna name it solid i'm gonna come to my advanced tab i'm gonna go to positioning and i'm going to position it to absolute from here i'm going to duplicate this layer and then the newly duplicated layer i'm going to quickly rename to outline and then with my outline layer selected i'm going to go to style i'm going to change the text color to transparent so no color and then i'm going to go to advanced and i'm going to give it a css class called text hyphen outline perfect so now i'm going to add an image i'm just going to drag an image in here i already have one uploaded and ready to go quick little side tip of how i easily created that is in photoshop i just created a normal square document and then i added using the ellipse tool uh hold shift down for a perfect circle i put an ellipse in here in the middle and then i just added the image i want on top of that and then holding the alt key you'll see how if you hover your cursor between the layers the cursor changes to like a little down arrow with the white square if you left click you'll see that that masks the layer on top to what's below it so from here you can kind of move it around and position it how you want uh save for weapon devices and you're good to go so just a little side tip on that now with my image layer selected i'm going to go to advanced and i'm going to go to positioning and absolute so what i want to do here is you see under vertical orientation there's a little top and bottom option i want to choose the option that gets me the closest to the end result i want so for example i want some of the bottom of this image to go into the text now if i choose bottom here that gets me closest to where i want my end result to be so i'm going to choose bottom of my case and then i'm going to do an offset of let's say negative i think negative 125 works so almost done here i'm just going to go back to advanced and in the css classes i'm going to give it two classes the first one is called text hyphen bounce so that's one class i'm going to hit space the second class is text hyphen bounce hyphen annie for animation so we have two classes in here separated by a space so now what i'm going to do is i'm going to click the solid layer for my navigator and i'm going to go to you know advanced z index i'm going to give it a z index of 5 and then i'm going to click my image i'm going to give it a z index of 6 and then i'm going to click my outline and give it a z index of 7. so what we just did here is the solid we set to a 5. so that puts it in the way back we set our image to 6 which puts it just over our solid text layer which is set to 5 and then the outline we set to 7 which puts it on top of the image and the solid text so the higher the number the higher the priority in in the layer hierarchy five is behind six six is behind seven and seven is on top now you can't actually see the outline because remember we made this style of the color to you know transparent but we're going to fix that right now so now that we have this all set up let's go ahead and click update and then i'm going to go to the front end i'm just going to click preview changes and then customize now when i'm adding custom css i always like to add it under additional css of the wordpress customizer or my style.css and my child name so let's add the outline this is going to be real simple we're going to target the class that we added to our outline layer which was text outline and then open curly bracket which will automatically add the closing one i'm going to hit enter once and then i'm gonna put in hyphen webkit hyphen text hyphen stroke and then colon one pixel white now you would probably want to make this color whatever your text color is in my case white so that's it right there you could see that we now have our you know parallax effect everything looks good now let's add the animation to give it a little bit of light i am going to go on you know new line and i'm just going to copy and paste this in so you don't have to you know sit and wait for me to type it out there'll be a link in the description uh with this code that you can copy and paste as well so i'm just going to paste this in and you'll see immediately when i do that it starts kind of bouncing very subtly now this is really great we're not using any javascript nothing but as you can see just a few lines of css to make this happen now you can also tweak this to your liking so i have it very subtle the key with the animation is do not overuse it right be subtle with it now you'll see here the negative 10 pixels if you were to make that negative 100 it would go up 100 pixels that's a little bit that's not a little bit that's definitely way too much so i think the 10 pixels is good maybe 15 will go uh you'll see up here under the animation duration if i were to make that point five seconds it would go really fast way too fast right if i were to make it five seconds it would go way too slow i think so i think two and a half seconds is a good little number nice and subtle uh you can change uh both of these to your desire though okay now that's really all there is to it i'm just going to hit publish so i hit publish just to save this i'm going to go back to my elementor i'm going to go ahead and refresh this page just so i can see the css applied to it and i'm going to start by just checking out where we're at with the responsiveness so desktop that looks good i'm going to go to tablet that looks pretty good too nothing really to change there and then mobile so the mobile needs a tiny bit of work on the text so what i'm going to do is remember we have our navigator so i'm going to go to my navigator i'm going to go to the solid text layer style and i'm going to change the size on mobile to something that fits so let's say maybe like let's just say 60 and then i'm going to go to my outline layer and change it to the exact same number so 60. the image is a little bit large now so i'm going to click my image layer go to style again all on mobile still and i'm going to change the max width to actually i think 60. that works pretty good and with my image layer still selected i'm just going to go to advanced and i'm going to go to positioning and i'm going to change the offset on mobile just to maybe raise it up a little bit oh we're down now we'll go up a little bit perfect so now you don't need to match these settings exactly some of this comes up to with how you want to put it right so if you don't want it like that you could certainly put it you know like this it also depends on the image you're using right so this image is kind of busy so it doesn't really work too well like this but we'll leave it for now so as you can see if we cycle back through everything seems pretty responsive it looks good on desktop looks good on tablet looks good on mobile so i'm going to click update so i'm just going to go to front end again preview changes and i want to show you one more thing so this uh text outline here you see it set to 1 pixels you can actually change that to be thicker so for example i think it actually probably looked better in this case with maybe like a 2 or no 3. yeah i think the 3 is actually working pretty good so you can tweak these things to your liking and i hope this was helpful i'll see you next time

Channel: You Can Code It

Views: 6,695

Keywords:

Id: z616cLS6cnw

Length: 10min 7sec (607 seconds)

Published: Tue Apr 06 2021