Create this Awesome AI Parallax Effect

Key Takeaways

this right here is exactly what we're going to be making today it's AI generated art that will turn into this Parallax effect for the web so let's get started enjoy this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy I started out by issuing this prompt to mid-journey stylistic Art of a warrior looking out from a cave it generated this image which I think worked out quite well you want to identify objects that can be cut out and layered for The Parallax effect work now the next step of the process involves cutting out those objects and I'll use Photoshop for this this is the original image that I got from mid-journey and I'm going to toggle some layers here in Photoshop as you can see between these two pictures I made some changes obviously I cut out the character right here but I also cut out this element right here this little um kind of like I don't know Stone thing as well as this column over here um that looks like this so I also cut out this part all right so we have this let's just start with this background this is going to be the first actual layer that we're going to use or the image that we use on top of that will be this element on top or inside of this will be this element and then finally we have the soldier all right so you're going to see a time lapse of me doing that painstaking work of cutting out everything um you just use there's a couple different tools you can use like object selection tool that can kind of quickly cut things out but sometimes it doesn't do a good job so you'll see me most for the most part just using the path tool there's probably quicker ways but I am not a Photoshop expert um so I basically at the end of this we're going to save each one of these uh as a PNG now this one is doesn't need to be transparent so it could be like a low quality JPEG file um and you just hit Ctrl shift alt s and you can just change this to JPEG and make it low like 30 percent uh it'll still be like 100 KB at this size um but then we want to take these ones that have opacity and save those as 24-bit pngs through the same method these are going to be massive but then you can take them into tinypng.com each one of those and it will greatly reduce the file size by about 80 on average all right let's go ahead and watch the quick time lapse and then we'll jump into the code [Music] foreign [Music] so here I am in Visual Studio code we have an index.html we're linking up a CSS forward slash main.css file right there um let's just quickly take a look at the HTML because there's not much of it we have three sections one two and then that's the primary section and then three and that just gives us enough room to be able to scroll to see the effect on the top and bottom these are going to be 100 of viewport height each one of these sections now additionally we have a wrapper inside of this just to hold all four of the elements the actual wrapper right here is going to have a background image it's going to be the first image is going to be this bg.jpg which is this one right here and then the second one um ignore this text Mass thing right here for now the second one is bg2 uh mountains and Soldier so I'm not using the image tag for these you probably could do that but I just chose to we're going to use CSS to put those images in to those elements all right now let's go ahead and look at our SAS I don't have all of it right now so the file actually just looks like this it's butt ugly there's nothing there so I thought it would be pertinent though to cover the main CSS Parts before we drop into the JavaScript so the first we're going to do is um inside of here we're going to gain access create a rule set here with the selectors of bg2 mountains and Soldier all right so for those I which are the three that are nested inside of section container right here we're just setting them um just width 100 transform origin Center because we're actually going to scale this for The Parallax effect you could typically move them up and down on the x or y or on the y-axis uh it depends on the effect that you're going for height 100 Viewpoint height and position absolute so then what we're going to do is take all four of those images and the first image that we're going to be applying this bg.jpg2 is the wrapper element all right so that's going to be a background and so I'm going to paste that rule set right there I know there's quite quite a bit happening so basically on the wrapper with Hunter viewport with um we're using position relative as well that way we can take these elements which are nested inside of wrapper I and position them accordingly the background's right here background size I'm making a slightly larger background repeat no repeat as well I found out how to do that otherwise there was some painting in certain areas z-index is zero because remember we want this the very back aspect ratio 16 by nine if you if you remove this it'll kind of just break the whole thing margin zero Auto to Center this area and then text the line Center because we do have a bit of text all right so if we save that I'm not expecting to see too much sorry that's the wrong window yeah we don't see anything just yet just just hang tight all right so after that we have bg2 all right so bg2 is just the background Z index three with 100 um we have the same thing here for mountains pretty much except we're just changing mountains uh dot PNG Z index two and then also we have our soldier which is z index two height 100 viewport height same old stuff here and then finally we're going to select these three selectors once again because we're using the background we probably should have just used the background image property right here let you know what let's do that I'm going to refactor my code it makes more sense to do what I was about to do all right here and then what we're going to do is just we're going to take these two elements background size 100 background repeat oh sorry we need to put that there there we go um no repeat right there okay so we save this it's going to be well I thought it was going to be almost ready to rock but apparently I am forgetting something um because nothing apparently has been changed so let's figure this out I'm going to leave this in here just because I I want to see you I want you guys to see me stumble around trying to figure out what in the hell is happening like because I'm starting to debate myself is the CSS even being included well it's being watched all right so open with live server oh there we go yeah there was something clearly going on there all right so not quite ready it's look at this we have the H1 it's the H1 is actually throwing stuff off it's not working correctly so we're going to paste in that those rule sets as well and there's actually quite a bit of them unfortunately not quite a bit of rule sets but quite a bit of properties in those role sets so H1 here's what we're dealing with um position absolute zndick six we want it on top of everything margin zero because H1s especially at a font size of three Ram has a lot of margin padding zero colors white tops 50 transform translated y negative 50 this is just the to get these centered up basically because it's position absolute and then nothing else too exciting happening we do have a text mask element right here it's the H1 itself with a class and then a span inside is the text so we put overflow hidden to create that sort of reveal effect that we're going to use and then finally let's get that Spanish is going to be display block we have to apply this otherwise the effect won't work uh we won't be able to move it with gsap so let's go ahead and now go back there we go this is pretty much what we want it's pieced together here although I see this is clipped off at the bottom here so we'll revisit that let's go ahead and get this working so first things first is I would go to Google type in gsap 3 CDN and you'll be able to check out the first result which will give you a code snippet actually let me just show you because some of you are going to be newbies about it gsap3cdn don't be too lazy Gary all right so it's this one the top result we just click this middle tag right there the script tag and that would give us this all right this big lengthy script all right additionally we're going to use scroll trigger from that same result which is right down here scroll trigger min we'll copy that now scroll trigger is going to allow us to actually you know the scroll trigger Works in conjunction with uh green sock right here and you'll see how that comes into play we're also going to use a smooth scroll because just because it makes the effect nicer and this is going to be from lennis all right ellenis l e n i s smooth cruel so if you type lennis um smooth scroll in Google you'll find the installation instruction just you can just grab this from the code pen which is like the YouTube description all right next up we'll do some just JavaScript right here in our index.html file the first thing I want to do is get the smooth squirrel roll a screw smooth scroll work working they have an installation page and it's just super simple it's these lines right here and it will work right out of the bat there's options you can specify here I'm not specifying any I like lettuce because it's not actual scroll hijacking like some of the other smooth scroll libraries are so you can see now it has a nice smooth scrolling effect okay now after that let's go ahead and I'm going to paste in some consts some variables here um I've got a background one which is wrapper background two which is bg2 mountains is mountains soldier soldier H1 and we're just grabbing the span specifically for all those now the first thing we're going to do is create a timeline and inside of a scroll trigger and the way we do this here's how this works const TL let's make this large and big and large and beefy uh const timeline equals gsap timeline all right and it takes options when you create a timeline by the way you can just do default but because we want scroll trigger we're going to attach a scroll trigger to this timeline when we use it all right so it'll essentially mean whenever we use this timeline it will only I activate those animations based on this scroll trigger properties based on where we're scrolling and how far we scroll uh scrolled so trigger is the first Prime Property that you need so the trigger is going to be wrapper which is right up here all right so right here basically it's where this starts this whole section starts all right so that tells us all right this is around the point where we need to do something and the next property is going to be start well this one works in two different values and it's a string format so we say in relation to wrapper we're going to say when the top of the wrapper meets the bottom and then we can go ahead the bottom of I believe it's the viewport we can go ahead and start uh the animation I may have screwed that that description up we're going to do scrub one which will make it so that any animations that we Define in Timeline I they're tied to the scroll position and not just time itself if that makes sense and if it doesn't just take this out and see what happens uh to see where what What's Happening Here we could put markers true this is just temporary thing for development so if we save this we're gonna see up here so scroll or end we see scroll start and that's right where trigger the trigger class is now we don't see anything happening because we haven't yet defined actual animations so for that let's go ahead and get this set so before we get to that timeline animation we can just say gsap set Soldier scale 0.8 that simply means what it says we're just going to set the scale which is a short for transform uh the CSS transform property scale property so we're just scaling the soldier down a little bit and that was something I just wanted to do based on the effect uh just make it a little bit smaller than default now now we're going to say two mountains we're going to scale the mountains by 1.4 or 140 percent and we're we're also going to push it down on the y-axis by 30 pixels also make sure you spell mountains correctly Jesus all right let's try this now okay um scrolling down all right so it looks like I need to specify overflow hitting because this is not supposed to happen don't worry about that for now but we can see the effect very cool looking indeed now let's just add one more and that is for the soldier so we're going to say uh two Soldier we're going to scale 1.7 so we're scaling him more so because he's closer y90 and when we put the um the third parameter here and we put zero that means it's going to happen at the same time as this the way the timeline works by default is uh this chained to beneath this first one will wait for this one to finish but we want these to happen at the same time so we just put a a comma and a zero right there so let's save this all right looks like overflow hidden uh maybe I forgot to apply over here somewhere so let me go look at that real quickly and all right that's actually really strange because I refreshed and it's the problem is fixed itself like I don't see the issue at all even despite changing the uh orientation but yeah um one final thing is just the uh the warrior awaits okay let's let's go ahead and get that situated so I over here we can create I just wanted to show you another way to create a scroll trigger and we don't even have to use a timeline we just have one element the H1 um and you could probably add H1 right here and and get it to animate as another two method but I want to do it this way gsap from H1 so whenever you're using um gsap or a timeline you have the method to or from which means you're going to be animating the H1 element where it currently stands from a new position all right or if you go two in these cases it's going to be wherever they are by default currently and they're going to go to a new value so hopefully that makes sense um what we're going to do is put y percent uh 100 all right so the H1 is targeting the span element which holds the type and we're just taking it on on the y-axis moving it up a hundred percent which means because the H1 element has text over I mean has um overflow hidden then we're not going to see it scroll trigger the trigger is going to be H1 itself the span element start top bottom scrub one all right let's save it and this should be it so scroll down the warrior awaits could probably make that text larger but we are pretty big right here so there we go now of course we take off the markers save it there we go that is the effect very very cool stuff all right everybody hopefully you enjoyed that if you did make sure to check out designcores.com also designcores.com forward slash AF this is where you can enter your email to be notified when the advanced front ends course releases we're going to be learning JavaScript green stock animation platform Barbara JS and even 3js to build breathtaking interactive UI so that's going to be coming sometime this year and of course check out these encourse.com we already have our interactive UI ux course and CSS course top level stuff very very awesome anyhow hopefully you enjoyed that make sure to subscribe here and I'll see you soon goodbye