Building an Ionic Parallax Image Effect

[Music] what's up samonix welcome to a new quick win today we're going into the parallax image effect which you requested a few weeks ago when we have the header disappear tutorial as always the full code to this tutorial is linked below and available for all ionic academy members and otherwise let's go into the video so what i did so far is i've started a blank new ionic application and the only real modifications i did is um first of all to generate a module for a directive since uh we need to generate this effect inside a directive or that's actually recommended and then create the actual directive so once you get this you got a new folder directives with the shared directives module usually if you generate the directive after the module it should already appear right here in the declarations block but we also need to export it here and once we're done with this inside the shared directives module we can go to the home module in which we import the shared directives module and then we can use the directive we created wherever we want inside the home page um so in general we want to add an image to our page and we want to scroll out the image slower than the actual content so from your perspective if you scroll up it goes like a bit like this so the content is above the image and for this we of course need first of all an image um i thought it might be a good idea to simply have this inside a variable because we'll use it as a background image and in the past i think um or in general i think this is like the more dynamic approach if you have like a static image of course it works basically the same but usually you might have an api with product images or something like this so let's do it like this now we can go into our home page and to the ion content we first of all add the name of our directive which should be in the beginning app parallax header of course you can change that but we will just stick to this we also need to output the scroll events from the ion contents so we need to set scroll events to true on ion content in order to catch um this scroll up or scroll down then for the setup um we need to actually introduce two div elements let's call the first one or give it the class parallax image and for the background image we can directly set it in here so that's what i meant with a bit more flexible approach so we can define all of this just in our scss file but if we do it in here we could use it like this url pass in your variable which is my image path and then we need more brackets and close okay so it's a bit complicated it's basically a string inside the string um but that should be fine we don't need anything else in here we will just style this from our home page as css now right now we actually don't see the image yet maybe because we haven't added uh the styling but don't worry let's continue with the main block so this is where you would put all of your content the big this image will be more like in the background and the main block will be above it so inside main do whatever you want i just came up with a dummy list actually i found this way of creating a array right in here without anything inside our typescript file uh so thanks to random person on stack overflow this is really great to create an area of 30 elements for testing i'm really happy about this actually now uh moving on to our homepage scss for the background image uh i think the rest could be set from here uh we hate just pick whatever you want maybe 30 40. anything that works for you and for the main we also need to set the background color because otherwise well let's command it out and you will see and the position absolute so it moves above it actually changing or not changing the background image right now doesn't do anything since we haven't really added our parallax effect but so far we got the list and we got the image and now we want to make the list scroll basically above the image and that's where our parallax header directive comes into play first of all let's define a few variables um so we will grab a reference to the header actually i think that's like the element ref um yeah well not really i think it's the native element what's the type of the native element we will find out so um within our on init we will get first of all the content by using this dot element native element this is only the ion content and now from the ion content we need access to our div object right here uh we can do this in different kind of ways the easiest for now is simply to use content get elements no code completion things by class name and the class name was parallax image hopefully and this will usually give you a list of items and we want to use the first one from that list i actually don't know why for native element we don't really have any code completion it's always have to type any yeah make me kinda kinda sad a bit well so that's our element uh injecting the element ref is just inside the directive the element on which we put the directives in our case ion content um now we need the dump controller from ionic angular which helps us to efficiently make dom rides because you could always say perform this change on our dom object right now but that's most of the time not the most efficient way you can do this more efficiently by using the dump control and calling either read or variety which will then schedule it inside the usual redraw for at the best time so it's like telling angular okay please perform this operation when you're ready for it it's usually quite fast it's not like you're waiting for it five seconds so this is really the best way to build the most performant animations but for now we don't want to write something we want to read something like we did in our header height tutorial and we want to get the header hate by getting it directly from our header and calling client hate so that's what we used in the past as well should work fine hopefully um yeah well great um let's look this dot header hey and there we go so that's actually a lock we should already see let's see um did we actually apply the directive i'm not sure yeah we used it so no locks for me today okay maybe it's not really triggered for um whatever reason because it usually should be but let's just heat on we now need a way to listen to the ion scroll events and we in the past did this right here inside the directive um but actually we can do this also with our host listener and we want to listen to ion scroll uh this will give us back an event yeah spelled a bit differently and we call a function here um i need to be careful with the brackets on content scroll and inside we should have access to the actual event so um let's give it a try maybe it works now otherwise i'll just reload yeah that's what i thought so let's reload it um i will actually use already capacitor in the background you can simply run ionic build npx uh cap add ios android whatever you want and then run the live reload for android or ios for ios actually found this little fix source map fault which helps to debug through safari because i often lost connection um so a lot of little things in this quick win now let's keep this in the background okay that's right um let's do one more line before the live reload comes up so the really interesting part of this event is actually hidden inside detail scroll top that's the difference um we moved or we scrolled from the top to the bottom or back up so therefore let's also lock this uh and see the value because that's really the most important part for our calculation now we get the locks okay we get a lock for the hate in here and once we scroll we see a lot of events and we see the the scroll value coming in here let's go to the bottom and if we move up again we also see different values so based on these values we will now transform the image which we already can access by using our header and we will wrap all of this inside the dump controller function and this time we of course want to write to our dom what we want to do is first of all we want to check if the scroll top is bigger than zero which means we scrolled somewhere down um or actually i think this only affects ios in the end i can bring in my view from the device as well in a second because on ios you can pull this up even more inside the browser it's not working it's always a positive value as you can see but on ios you can actually drag the view even more but this is like the usual case that happens and in the usual case we want to um set two values so we want to move the image but of course we want to move it a bit slower than scroll top so therefore i will just divide it by two you can try three or you can try 1.5 and just play around with it something like two or three actually works best i think and then also uh we can scale the image in the general case right now scaling doesn't make too much sense i think but uh in the ios case um it actually kind of makes sense to um scale the image a bit bigger uh when you uh when you're beyond the um actual border of the view i don't know what's it called bounce i think um so let's keep it like this let's actually leave out the else block for now and then we can go to the most important part which is calling our renderer and call set style so we want to set the style for of course our header element that we grabbed uh what we want to perform is we want to set the webkit transform okay simon please no typo in strings this is really something that hurts and then i i will bring it in because i don't want to make any mistake right now um i will put it into the second line so we will call on our header webkit transform we want to translate 3d first of all which just moves our image a bit up by using our move image remember it's only half the speed of the content scroll so that will give us a nice effect and scale for now will be just one so let's save this and let's check it out and we should actually already see our parallax effect in place you see the image kinda stays there it's not like it's completely scrolling out if i would change this to one that would be like the usual behavior i think so that would just you know that would just keep the image in place which looks horrible um let's do three so the higher value the faster the image scrolls out so right now it's not a huge parallax effect it's a tiny bit so two really did work uh quite well if you also wanna scale it at the same time like making it perhaps bigger or smaller um you could do something in here with scroll top and a little division as well um but i think usually the parallax effect looks like this where the image is just scrolling out a tiny bit slower than the rest now i also wanted to show you this on my real device so there it is um which looks quite nice already and for ios you can see i can now pull this view even more up and usually inside applications you see that the image then scales a bit up and that's what we will do in our else block so let's set move image um to something well i figured out this might make sense um maybe i'll commend it out so you see the problem uh let's just do the scaling for now the scaling of the image should be minus scroll top because scroll top right now is a negative value in that case and we want to make it positive and divide it by our header height and this expression can actually be zero and you don't want to scale the image to zero so put a plus one at the end now i can um um now i can actually i i should be able to actually yeah while clicking is my favorite uh let's comment in move image although i don't think that was the trick um so move image will just move the image a bit more to the top when you go uh when you go in it because otherwise i had this white er a white line above it and that looked kind of bad so and it actually doesn't even work without moving um maybe if i just set it to scroll top we will see it yeah works as well but doesn't look too good so i would recommend to play around with that number as well a bit more and now we're able to move even further into the image and at the bottom we will have the usual parallax effect so that's really what you see in most of the applications um i don't know why we sometimes see this little white bar here right when we start so with a little bit of repositioning or changing the values we could even change that but in general this is already the parallax effect that we wanted to accomplish inside our application so i hope you enjoyed this rather short equipment today but it's really a cool thing that i use already in the past in client applications because it really makes a ordinary boring screen a lot cooler a lot more fancy and it's really just a cool thing to have in your application and as you can see the implementation is so easy that you can do it in like 10 minutes so hopefully this works in your application and if you got applications developed as always leave a link below so i can review them in my app review show that happens sometimes on thursday actually most of the time at least once a month so leave your applications if it includes parallax effects i will definitely give you a thumbs up in the review video if you enjoyed this video please hit the like button and stay subscribed so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ionic academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive slack channel so we can get your app out i hope you enjoyed this video i will see you inside the next video have a great day and happy coding silent you

Channel: Simon Grimm

Views: 4,617

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: TsIVWQf1qNA

Length: 17min 6sec (1026 seconds)

Published: Tue Oct 27 2020