Super SMOOTH Hero Section Scrolling Effect with Elementor PRO Motion Effects | TemplateMonster

how everyone and in this video we'll be creating this parallax fade out effect for the hero section you can apply it to a hair section on your home page or maybe this will be the first section on your blog post page so there's a number of different ways where it could utilize this effect and it will also work with the white background color but I chose black the case just just looks cooler and with the responsibility settings it's not so great as you might have guessed but we'll find the workaround later in this video too by the way this entire tutorial was originally inspired by this cold website and I recommend you to go and have a look at it yourself and besides this animated hero section in this tutorial there will be a little bonus we'll also explore how to create this kind of header transition and you see that this header while being on top of the hero section is transparent but once we scroll past the first black section it actually gets a background and it's slightly blurred we've already made a blurry hair tutorial on our channel before but it's not about making the header blurry it's about making this transition from the transparent background into a solid or maybe half transparent background for your header this is not a universal solution it won't work with each and every design and page structure but just in case you're curious I decided to include it in the video too so now in the first part of this tutorial we'll focus specifically on this here section effect for the background image which to my liking looks pretty sick so get your element to editor ready let's get started so now we're an elemental editor and I'll walk you through the process of creating that hero section but I already have a couple of sections prepared so I don't waste your time while making them these are just normal sections that you create with alimentary there is nothing fancy or specific about them those are just normal sections that are there to give you some context for the page and I will now go and create one more section above the first section that I have here the first thing I do is I'll set the fit to screen height so takes up the entire height of the screen but if you plan to use this exact section for the tablet and mobile devices it's recommended that you choose not the fit to screen option but the minimum height option and set the VH to 100 this will allow you to achieve the exact same effect fit the screen on desktop and on mobile or on tablet devices if you need to change it up then you'll simply move the slider because the minimum height option is actually responsive which is not the case with the fit to screen option you can now change the values specifically for each device so this option gives you way more flexibility now the next step is to add the background image so go to style and select the image for our background now in position we'll select Center Center in the size it will be cover and in attachment it will be fixed this how we'll make sure that the image stays still in the background as the other sections will scroll past and if this is not what you're seen on your page click on the section settings of this next section if you cannot access it you can use a navigator and there it is this is my second section and I can go to that index and increase the site index and this is what you can do if you are not seeing this second section above the first section so simply change the side index higher that index means that this particular section will be above other sections if we imagine that there let's say layers on top of each other so let's get back to you the first section and let's rename it let's call it zero now let's add motion effects we'll only you scrolling effects so will enable the scrolling effects option here and we'll start with transparency but overall we'll be changing only these three properties transparency blur and scale transparency goes first and only fade out because we need our image to be disappearing gradually as we scroll down and I'll move the slider to be at 52 or 53 around that point I live the second slider at 80 and we'll see how it works so the image disappears completely and if it's not what you're seeing if your image doesn't disappear completely you can simply increase the level and set it to let's say 15 or it's 12 now there goes blur and this is the same thing fade out and here we'll go through the same process fade out move the first slider to 52 and the second slider will leap at ad and if you want more blur you can simply move this slider and you'll get more blur you can see how the amount of blur changes as you move the slider so I'll leave it at 10 and now the scale the scale is a tricky one because it can get pretty wonky so simply make sure that you move the first slider to 52 that the direction is set to scale up and then we bring the speed down to 3 or 2 so it looks a little bit more subtle and a little bit more elegant so the background image is animated but we can see the white background of the page as you scroll down and this is not what you want to get in the end because the color of our section background is black here so what we can do is go to settings go to style and change this color here body color to the same color that matches the color of our section background here and then this previous section in the next section simply become one and you don't see this transition so it looks something like that but as you remember our also had a little head in here and this is what we're gonna do next I'll drop a head in there as portfolios I don't know why I picked portfolio just some random word I change the color and change the typography sadie's also align it to center and now in advanced settings we'll go to position in and in position all set fixed this is what it's gonna do and in the offset will switch to percent and I'll set it to somewhere around 45 but you can adjust these values to see what fits to your design better so there we have it this is the background transition that we were after and if you have a header on your page and you'll most likely do and if you want this header to be on top of your hair section sometimes this the design solution that you go for and in this case just use negative margin to move your section up I figure that for my particular sections this is the needed value but yours will be different and if needed you can also add the background overlay to your image simply pick the color I'll go for pitch black and I'll switch the blend mode to multiply and I'll bring the pass City down to 2 or 3 depending on my image and how dark I wanted the overlay to be as for the marble and TT you know that attachment fixed for images only works on desktop this is what you're gonna get on the mobile device now to fix that weird look inside all what we could do is to create a duplicate for this title and one version will only show up on desktop and the other version will be stored for the tablet and mobile devices so this is the solution that you can go for it so for the desktop version in the responsive settings all set hydron tablet in Hyden mobile and for the mobile version we'll do the opposite we'll check hide on desktop and for the same mobile version will go to positioning and change the position to default now we'll close this and what we'll get is the regular page that you are used to seeing normally and as you've noticed yes I do have all of the motion effects turned off for the marble layout it's not really a good idea for now to display motion effects on mobile and tablet devices because it might not look as good as you expect it to and sometimes for the user it might be really frustrating and and it might really disrupt the experience on your website so to completely avoid these risks it is safer it so simply disable the motion effects that you're not sure we'll be working on mobile and tablet devices like straightaway now once we're done with the hero section transition and the second part of the video will focus on the header specifically and I'll walk you through all the steps so let's now pick up where we left off this is why it will now jump to the editor and have a look at the header that I have here so this is my setup over there and this is the section with the header elements and you cannot see anything because the background is transparent and our elements are white and this is I'll and I'll temporarily make the color black so you can see what's going on there so this section is for mobile view and it will only appear on mobile devices tablets smartphones etc and all you need to do here will create in your header is go to advanced and sad does that index to the highest value possible to make sure that the header in any circumstances is always above all the rest of the elements on your page also what you need to do is to make sure that it goes to motion effects and you enable the sticky on top option and on what devices to enable and disable it you decide but I would only make it work on desktop and leave this option inactive on tablets and on mobile devices so that's all we need to do here at this point the soil I'll go and I'll remove the backgrounds and click update now let's have a closer look at what's going on as we scroll down you see that the background image and the hidden are both fixed they have a fixed position and as we scroll down to have this fade out of the background image and at this point the background here becomes black but as we scroll past this first section we can clearly see that this transparent diagrams on our header is really distracting and we cannot make sense of anything what is written here we cannot read the text we cannot access the links it's completely unusable and we have to change that to do it we will now need to create one more section right above this first section with black backgrounds and quickly create one more section and I'll see it appear right here in the Navigator and I'll call it backgrounds for header and having this section selected will go to height minimum height and we'll set it to 100 because this is the height of our header I have this section that contains these links these menu items I have it set at 100 pixels I'm using pixels here but yes it's actually recommended to use the HR VW but here for header I'll stick with pixels and in a couple seconds you'll see why we need pixels because it will be actually moving this section using negative margins and it'll be easier for us to pick the right value if you're using pixels here and we'll be using pixels for the negative margin the second thing we'll need to do with this particular section is go to advanced get some margin unlink all the values and in the bottom margin we will need to set it to minus 100 and you see what's happening here now we made these two sections overlap now next thing z-index does that index for this background for header section has to be higher than desire index that this section has which is San we'll remember that we'll click back on the background for header section and set that index to 50 which is higher and now we can see that this section actually appears on top we can see this bounding box is here which means that this section is on top of this section with the text and the very last thing motion effects sticky top and also disabled for a tablet and for mobile devices even hide it on tablet and on mobile because our header itself won't be sticky on tablet and mobile devices so we don't really need this section anymore and actually now this wasn't the last thing the last thing is to change the background color to black but to black in my case in your case it might be a completely different color but to change it to the color you want for your background because we cannot leave the background in the section transparent and now you can see that this section actually is sticky and at the moment as this section reaches the top of the viewport it sticks to the top and the header does too this is why they overlap and the header is on top of this section and they're both sticky and as we scroll down we see what we want to see we see the header with the background at this point it's completely transparent and as we scroll down it's kind of hard to make out what we're seeing because it's kind of hard to distinguish between the backgrounds of the header and the backgrounds of the page you could solve this problem in a couple different ways all we can do is to make this background semi-transparent and add some blurriness to it so it blurs the background underneath this is how we're gonna do it we'll go to color and we'll bring this down to let's say 70 percent opacity you can also bring it even lower and then we'll go to advanced and in custom CSS we'll need to insert a code snippet folks who already watched our tutorial on blurry header background will instantly recognize this code snippet because I used this exact method to create the blurry header background and they even use it on the official Apple website so you might be interested to check out the tutorial to learn more about what this actually is and how it works and how it makes your header background blur all the contents of the page below it but at this point this does the job and we can see that it's way better so if you liked this video and you found this technique as interesting as I did then live this video alike and write a comment if you have any suggestions if you have any requests just feel free to leave them in the comments and you will find a way to find the answers to all of your questions and all of your requests by the way if you need an elementary WordPress theme or some design assets there is template master comm regular discounts huge product selection and round-the-clock technical support this is what you get with Samberg master comm so make sure you'll check it out thank you guys for watching and I'll see you in the next one [Music]

Channel: TemplateMonster

Views: 108,406

Keywords: templatemonster, templatemonsterco, elementor motion effects, elementor pro motion effects, motion effects in elementor, elementor animation on scroll, elementor motion effects tutorial, elementor parallax effect, elementor pro parallax effect, elementor animation effects, elementor pro scrolling effect, elementor animated background, how to animate background, how to use elementor scrolling effect, scrolling effects elementor, elementor custom header, elementor header

Id: 99R03H5KO84

Length: 17min 2sec (1022 seconds)

Published: Sun Mar 08 2020