Create a Parallax Text Outline Effect [Webflow Tutorial]

hey what's going on guys today we're making a text parlax effect inside of webflow it's very easy to do it only takes a few steps so let's see how to do that but before that in the description below you will find a link to the cloneable project so you can clone this particular project inside of your own webflow account so if you would like to follow along with the tutorial with the exact thing that i'm doing you can do that as well so let's jump straight into it so already prepared a bit of content so let me walk you through what i did the first thing i did is i created a div block which i called wrapper and i gave it a width of 100 view width and a height of 150 view height so it's taking 100 percent of the width and 150 of the viewport height i also gave it a display flex with the airline center and justify center so everything that i put inside will be centered next i inserted inside of the wrapper a div block which i called image block and i gave it a width of 800 pixels with a position relative in a z index of two and this block serves to hold the image that i put in and i put in this nice cyberpunk style image so let's create the text right now so the first thing to make that happen is i will insert a div block inside of the wrapper and the shortcut to insert elements quickly in webflow is command e and then i'm going to write div i'm going to press enter and here's my div block i'm going to call that devblock headline i'm going to display flex align center justify center and i'm going to put that as relative the next thing i'm going to do is i will go to the image block and i will switch the position from relative to absolute and now i will go back to headline and again command e for shortcut and i will insert a heading so i'm going to insert a heading and i'm going to write vietnam you can't see it because i didn't we can't see the size of it it's too small so let's go with 280 pixels and a similar height maybe 300 pixels i'm going to change that color to a nice blue let's say something like this yeah looks great i'm going to copy that style so now we can see that the image is on top of the text why is that is because if you go to the image block you see the position as a z index of two and if you take a look at the headline it has a z index of auto which simply means that it's the default mode which means that anything that has a z index finger to zero is going to be placed on top of this one next what we need to do is to create a heading that's going to be the outline that's going to sit on top of the image so what i'm going to do is inside of the headline i'm going to insert another heading that i'm going to code that i'm going to write vietnam as well but what i'm going to do in the heading 1 i'm going to call i'm going to give it a class of headline adding so the similar heading that we used before but i'm going to duplicate that duplicate the class and i'm going to call that heading [Music] absolute and i'm going to go to position switch that from static to absolute and i'm going to give it a z index of 3. so now we can see that the second text is placed on top of the image because the z index f3 and the z index of the image is 2. what i need to do now is i don't want to see this full text i only want to see the outline of the text so the first thing i'm going to do is go to color and i'm going to remove completely the color of this second text and natively you cannot do the outline effect inside of workflow so what you need to do is to add a bit of custom code that's very simple that i'm sharing description below so you just have to copy and paste and change a few things going to work perfectly so you're going to go to the description below and you're going to go to this notion link that i'm sharing with you and you will see this little bit of code all you're going to do is you're going to select the code copy it you're going to go back to workflow project you're going to click on pages on the home you're going to click on this little arrow to see the settings you're going to click on settings you drop down and you're going to paste inside the head tag you're going to paste that here in this particular piece of code you need to pay attention to three things the first is this class you need to replace this css class by your own class so let's do that i'm going to click on save i'm going to go to the heading absolute i'm going to select that copy that going to go back to the custom code and i'm going to remove that i'm going to paste that here an important thing in css is that you cannot put caps inside of a class so what you need to do is to replace the big h by a small age so i'm going to do that so what i can do now is i can modify the visual style of this particular outline effect so this first line is going to determine the width of the outline of your text so i'm going to keep that to two pixels and the second line here is going to determine the color and so what i'm going to do is i'm going to change this particular hex code to the color that i want so i'm going to first save that i'm going to go to the heading the first one with this color i'm going to select that copy that i'm going to go back to the code and then i'm going to just remove this and paste that next all i have to do is save and i will publish it so let's see so let's see what happens and now boom this text is working very nicely so you have the regular text and then next what you have is this nice outline that's sitting on top of the image so it's very nice the one thing i would recommend is that you would still use the outline on the text that's sitting below because let's say you want to have a outline width of 10 pixels this is going to be very big and there's going to be a big difference between the text that has it outlined and the text that doesn't have an outline so all you have to do is to go to the text that's sitting behind you would just copy the class go to the custom code drop down and then next to heading absolute you coma create a dot and you paste your css class but again you cannot have the cap so let's remove the big h and replace it by a small age and then you click on save you publish the changes let's see and now everything is very nice and tight so if you're just looking to do the outline effect then you're pretty much done but if you want to go a bit deeper i'm going to add a bit of interaction to add a nice parallax to the text but the first thing i'm going to do to see this best is i'm going to add a bit of space on top of the this wrapper and below this wrapper so i'm going to add a div block which i'm going to call rapper dot small and i'm going to give that a width of 100 view width and a height of 50 view width and i'm simply going to copy and paste that and i'm going to drag that to the top and i'm going to change the color to black now i'm ready to add the interaction so i'm going to click on the wrapper and i'm going to go to element trigger and while scrolling in view select an action play scroll animation and i'm going to create a new scroll animation and i'm going to call that scroll parallax effect now what i'll do is i will go to the headline i will take the heading and i will click on the plus i will set that to move i will go to the x and i'm going to maybe write this to i want it to start at maybe minus 50 pixels and at the bottom i want 50 pixels next i'm going to go to the adding absolute click i'm going to select move and i'm going to do the same thing minus 50 pixels to start and to end i want a not scale but i obviously want to move by 50 pixels if i just oh i missed something so right click change target i want heading absolute to work then i click on done and smoothing 50 this is a previous test so what i want is create a bit of delay add an offset of maybe forty percent and yeah forty percent is an offset simply means that it will not start as soon as the wrapper scroll into the view but it will wait about 40 of the page before the animation kicks in so i'm going to publish the changes and really see how this works so i'm going to refresh the page and now as i scroll into the text i can see it moving nicely so we created a nice little paradox effect as i scroll up and down and you can see that the outline is following the text so it feels like it's only one line of text but actually it's two so now this is a nice tool that you have in your design arsenal to make your website stand out a little more so that's pretty much it for this tutorial if you found it helpful you can click the thumbs up below and if you would like to see more webflow tutorials where i cover a lot of things about webflow you can subscribe to the channel because i'm posting new videos every single week in the meantime i wish you a good day and i'll see you guys soon cheers

Channel: Al Vision

Views: 5,172

Keywords: Design, designer, startups, startup, Freelance, freelancer, freelancing, freelance designer, web design, web designer, web development, web developer, web development tools, freelance web developer, webflow, freelance web design, web design tutorial, website design, webflow tutorial, webflow tutorial 2020, webflow scroll animation, webflow parallax effect, webflow outline text, webflow parallax tutorial, webflow parallax movement on scroll, webflow text effects, webflow text stroke

Id: EwfPmO8DkeA

Length: 9min 49sec (589 seconds)

Published: Mon Jul 27 2020