Web development: web page animation tutorial using JavaScript and Wix Code

hey guys sim color here and today are going to show you how you can implement professional animations timeouts and elements how you can show and hide them and many other things that are to come in the future so we are going to use wigs for this and the reason is because weeks recently launched a feature called with weeks code and weeks code allows us to write our JavaScript into a week’s websites which is amazing so yeah this will allow us to
basically make our own databases make our own animations make dynamic pages and all of this without having to worry about the design elements of the of the page which is what weeks is all about so it is amazing that you can now just focus on the code and make really building a website truly fast and straightforward which is important for people that are launching projects so yeah let’s do this and enjoy okay so here we are we are in the landing
page of the Wix called web page and in here you’ll spend a lot of your time because it has everything that you need and I’m going to scroll to the bottom and click on explore resources because in here you have the API you have examples you have video tutorials which will come really use useful whenever you want to do something specific that you don’t know how to do and in the API references we have everything that you need and so it is great it
is really detailed and you can as you can see can get all the information that you want through here so yeah use this it will be your best friend even though it isn’t really hard to do it the logic behind the code is or better yet than the code itself is a bit different than normal JavaScript so sometimes you’ll have to come here and just figure out how you should do things but it is extremely easy and it’s tremely straightforward so now I’m
going to show you my webpage which is this one right here and as you can see it looks great but it doesn’t have it isn’t captivating because it doesn’t have moving elements it doesn’t and doesn’t have anything that pops out and so that’s what I want to do and the two things that we are going to do is whenever first of all whenever we hover this button you’ll make these moon fade in or pop in or whatever some a cool animation to make it really
stand out and we will have this rocket right here like kinda moving into position and we’ll make a cool animation for that so you’ll see it in a second so I’m going to show you just how you can make some cool use of some of the cool features that you have with Wix code so let’s get right on with it and go into the editor page that you get for your website so in here you have everything and you can move around everything and if you’ve worked with
weeks before you understand it if not it is extremely easy you simply add items to whatever you’d like and it will look awesome and I use a template for this and base my web page around it so now let’s go into the tools and open up properties panel and it will pop up a panel right here that has the information of every item where you click it so you can get set the IDS you can set if if the item is hidden onload collapsed on walls and then you
have a series of events that you can import to make trigger some kind of response that you want and these events will be right here in the home page code when to delete this right here and I’m going to explain to you what these does so all the code that you write will end up right here you can if you click on this arrow right here you can see that you can add files and whatnot and this is just so that you can make your code smaller and make
JavaScript files and it then can import it inside these on page codes so yeah everything will end up eventually right here and right now it is basically empty and all that you have is the on Riley function and this function is triggered any time the page loads up so if you want to start right off by doing running some kind of code as the user types in the link and enters you can you simply place the call right here but right now what we want is
to trigger an event of whenever we hover this button the moon will fade in so all that you have to do and I’m going to make this a tiny bit smaller is go click on the button and then go and click on Mouse in so this is triggered whenever we simply move the button in the cursor into the button and we don’t need to click it and we can go ahead and click the plus sign and it will and click enter and it will automatically create a function that will
be called whenever that happens so it is really cool we can erase this comment right here we don’t need it so anytime we move the mouse into the button this function will be triggered and any code that we have inside it will be triggered as well so let’s get on with it and the first thing that we want to do is make the moon fade in and it is extremely easy and all that we have to do is say dollar sign W and this dollar sign W is the the best way
to understand it is it is the global variable of the site so anytime you want to access an element you must say dollar sign W and then simply place the ID of the elements so let’s say like this and place it within that and now we must give the our moon an ID and we do that simply by clicking the moon and go inside here and giving needs at the name moon so moon and now when we want to find the element moon we simply say hashtag moon and that’s it
we have access to the moon and everything that it does so we as I’ve said before we want to show it with an animation so we simply say show and open parentheses and then we say specify the animation that we want and in this case it will be expand in okay so yeah okay so now let’s just test it and it is working for sure because it is a really simple line of code but you can see one thing that well the moon it is already there so when we try to
move in the mouse it doesn’t go it doesn’t show up because it is already there and there is a simple way to fix this and it is just by clicking the moon in this case minimize that and bring up the properties panel and as you can see you can set even unload and that’s exactly what we need so let’s click it and now as you can see no moon shows up and when we move the mouse in it pops up it is exactly what we want it so yeah awesome now let’s move
on and actually start working on the ships appearing in succession so what I’m going to do is to have multiple images of ships and from time to time show up or Heath or hide the chips that are behind and you’ll understand it in a second let’s just make copies of this we can three is enough so yeah let’s give it the let’s give them names that are reasonable and not this so let’s go inside here and open up our properties panel so ship one give it
ship 2 and this is just so that we can more easily find out which ships we must show or hide so it will first show the ship 3 then the ship – and the ship 1 and whenever the animation of show ends we are going to hide the ship free and the ship – and the ship 1 will be there this is just to make a go succession and so it will look extremely cool I’ve tested it and yeah it looks amazing and you are free to to use it obviously so let’s go inside
here and let’s create a function function and let’s say move ship I always try to give reasonable names – to your functions and to your variables it is extremely important so ok we can create a function right here and we can call it whenever the button is history it triggers the event mouse in so now what we want to do is to use a timer in order to figure out in how much time you want the in how can I say it so we don’t want to just fade in all
of these ships right away we want them to fade in but we want first fading to the ship 3 then the ship – and then only the ship 1 so you can do this by using a timer and it is really easy to use to make use of because yeah it is just a timer and you can set actly how much time you want for each chip to to take so let’s do it and to use a timeout all you have to do is say sets timeouts and open up brackets open up brackets again inside those
brackets not outside make sure you do it right and then simply say equals bigger the end sign and then we open up brackets and let me just go inside here and make it a tiny bit bigger okay that’s it and simply close with the semicolon and there we go so now we can set the delay that we want for this timer and in this case for the first image it will be 5 500 and this 500 the time that you put in here which is the delay in which this timeout is
called is divided by a thousand and what I mean by that is that this is not 500 seconds or 500 minutes this is half a second so if you want think in seconds and so you can divide this by a thousand and it becomes 0.5 seconds okay so that’s the the whole logic behind the set timeout it will call the function inside after a certain time in this case 500 milliseconds or 0.5 seconds and yeah so now what we want to do is to first of all show the first
ship after the 500 millisecond mark and so you can simply do this by saying dollar sign W open up the things right there then ashtag ship 3 okay and make sure you always finish with a another quotation mark it went you must have a beginning and an end that’s all obviously important and then we simply say show with the animation name that we want and in this case we’ll do fade in just make it different from the the moon one and then we say then
and I’ll explain to you in a second what is the reason why I’m doing this then an open up equal major sign then brackets just like you did for the time out and close that up and we will use this function then to make the the chip fade out once the failing is then so this then is always called whenever the animation for the fading finishes and that way we can get a cool effect of fading in and fading out right away that’s a really cool effect that
you can place in our website so let’s simply grab the chip variable and we’ll do hide instead of show so yeah you want to hide the object not show it again and open up the quotation marks and say fade out to make it to the exact opposite of these right here so this will fade in and then fade out right away and we can test this it will work but just so that you can see it and once again we didn’t hide onload so let’s get back to the editor and
let’s set these two actually every one of them because they all must be hidden onload so let’s say here and here on unload hidden on load and hidden unload so that’s it what’s going to preview and as you can see nothing shows up and we when we hover the the button it shows up and then disappears okay so after that we add the code for the chip – and the Sheep one so we can simply copy this and we can actually copy it – twice so yeah and now let’s
do the same thing for the chip to simply change the names and now the delay will be different so that first shows up the Sheep one the chip three Oh actually and then only the ship – after some times so for that we’ll set the delay to a thousand which is one second and for the for the the cheap one which I’m going to change the name right now you’ll set the delay to 1500 and we’ll make it a change because the chip one this one right here will
only fading and won’t fade out so let’s remove the then don’t forget to add the semicolon at the end and now let’s test it and see if everything shows up but it will because well this code is pretty straightforward so let’s go ahead and preview and hover the button it fades out fades in and this doesn’t go anywhere and there we go so the the website already looks that much better because that it has more interaction with the user and that cat
awaits the user into looking into its and it just looks better looks more professional it looks awesome so yeah in this lesson we learn how we can use the timeouts how we can use the elements how we can hide them how we can show them how we can implement animations and how we can do some cool things like this one with the rocket which is really truly awesome and you are more than free to use it in your website if you want to which you probably
will so yeah if you have any thing that’s that you want to do more specific then go straight into the API reference and you’ll have everything there that you might need and just one thing after you implementing implemented all of this don’t forget to publish your websites and after this everyone will be able to see the cool things that you’ve done with just a few lines of code with 25 lines of code which aren’t even that many because we didn’t
write these lines right here the unready so it is more like I don’t know 19 18 lines of code so that’s pretty amazing in and of itself so yeah in the next lesson we’ll continue to work with wakes in order to make everything that we need we’ll work with database as I’ve said in the beginning of this lesson we’ll work with a lot of the cool features that Wix has but we won’t touch all of them unfortunately we don’t have the time but we’ll focus on
the most important ones and the biggest one so that you can start off by having a cool website of your own for your project which is extremely important as I’ve said that’s all for today but if you have any question that you would like me to answer in the next video then please leave a comment down below with your question if I can’t put it in a video then I’ll be sure to answer 1200 of your questions down below so make sure to do it and if you
are interested in building your own Wix website then go to wix.com and it is free you can try it you can see if it fits your needs and yeah that’s all for today I hoped you again tomorrow and