Intro to Wix Corvid

hey guys we are going to be jumping into a really cool tool that Wix offers called corvid and corvid allows you to basically write your own javascript code into your Wix website you can get to their website by going to Wix calm slash corvid for now we’re gonna just start with the very very basics today what I’ll be showing you guys how to do is create this cute little scene with little animals and when you mouse over them they talk to you so
what we’ll do is just go to Wix if you haven’t signed in already you’re going to want to go through the process of getting signed in and you’re going to want to create a new site it’s gonna ask you you know what kind of site are you’re gonna create we’re just gonna do other and then it gives you the choice between a DI and Wix editor so let’s just choose template we actually don’t want any of this stuff we just want a blank slate so on the left
here we’re gonna choose blank templates and then just choose start from scratch and click the edit button okay it’s gonna have this intro video you can just close that out so what we’re going to do first is just create a background so I’m gonna click background and I’m just gonna choose a nice soft color like this blue to cream gradient so click that there’s lots of other options if you go under image your color and we can close that out so now
I’m just gonna add all my animals and plants so I’m going to click add and then go to vector art the cool thing about vector art is you can actually customize your colors and you can scale them up without losing any details so I’m gonna click animal in nature by the way you can choose whatever scene you want I’m just choosing animals for mine you can even import your own images so put whatever you want here I’m just showing you the process so I’m
going to add my little tiger and I’m gonna scale it up just put it right there I’m gonna add some other animals okay so now let’s say I want this tree in the back I’m just gonna press command and down and you’ll have to hit down several times but then I can scale this up and it’s gonna be behind now let’s say I don’t maybe this yellow color is a little too prominent it’s a little too distracting so I’m going to click the design button now let’s
do me choose these colors so I’m going to change that to something a little more mild like that and then I can even turn down the opacity a little bit so now we’re gonna go ahead and save and we’ll just call this animals next is the coding part so we’re gonna go to death mode and click turn on death mode and this is a video explaining what core of it is so close that and here is our coding panel it also shows all this which we don’t really need
at this point so we’re gonna click that and hide it so now what we want to do if you hover over each creature you’ll notice there’s a hash tag that says vector image so that if you remember from HTML is the ID so we’re gonna give each of these animals an ID I’m gonna click on this tiger and this properties panel here is here that shows the ID so I’m just gonna click that in this type of tiger get better if you don’t see this panel you just go you
can just right click and then choose view properties so I’m gonna click on the bird I’m gonna type bird click on this critter critter so now we actually need the quote bubbles to pop up so the way we do that is we go to add we’re gonna go under box and you should see there’s like several options here so I’m gonna go with this little simple quote bubble here so I’m gonna drag that onto my scene it’s way too big so I’m gonna drag the cornice and
I’m going to move this here and instead of purple I want this to be white so I’m gonna click on the design and then customize and then click fill and then change the color to white and then there’s that little tiny arrow at the bottom so I’m gonna change that sunder border may change that’s white there we go so now I’ve got my quote phone so I’m gonna place that and then now I need to add some text so click add text and then just add header so
I’m just gonna drag this here I’m gonna double click and type and then I need to make sure this blue box is small enough to fit inside of the quote bubble so that it can be attached so I’m gonna drag that to the right and then I have to just kind of click off of it and then click and drag and you notice that light blue box shows up that allows me to attach it so now I let go and now if I move my quote bubble they are attached ok so now I’m going
to duplicate this by either in Chrome OS and windows U or Linux very much every system you hit ctrl D in Mac you hit command D and it duplicates it and then I’m gonna add that there the birds gonna save chirp I’m gonna click this duplicate again and then my Tiger is gonna say there are ok so now you notice these say box one box two box three I’m just gonna give those IDs as well so this one I’ll call later box and what i’m doing here is called
camelcase it’s where you capitalize the first letter of each word and in cases where you can’t use spaces like see if I put a space it complains so I’m going to delete that you type camel case also it won’t let me type dashes so camel case is the way that we can separate words a little bit better so that says critter box we call this one tiger box and then call this one bird box alright so now we have our animals and our boat boxes so what we
need to do is set it so that when our mouse hovers over one of these animals their whole box pops up so I’m gonna click on my critter and my properties panel is gone so I’m going to right click sorry right-click and choose view properties and I’m going to click plus next to on mouse in and on Mouse out okay and it creates this code right here and so basically it’s it’s we’re priming this so that when our mouse is over and when the mouse goes off
of it it’s gonna do whatever is between these curly brackets so I’m gonna do that for the tiger as well so click the tiger and then click on mouse in onmouseout and then i’m gonna click the bird and do the same thing on mouse in onmouseout and now for each of these boxes i’m going to check the box that says hidden onload so that they’re hidden when we first open the page so all three of those like that so we don’t want to click on the text we
want to click on the text bubble now you notice they’re a little bit faded so that’s just showing us that they’re gonna be hidden so what we’re gonna type for a code is have these boxes show and hide so I’m gonna scroll to my first set here which it says critter mouse in so this is when I mouse over the critter and they added this little bit of code here that says add your code for this event here so I’m gonna hit enter and all we have to type is
the dollar sign so that’s shift for dollar sign and this prompt pops up and it’s basically asking for a selector so if you remember from the CSS the selector is what do we want to affect so I’m going to hit the down arrow on my keyboard until I see critter box there it is so critter box so then once it’s highlighted I press Enter and so I’ve selected the critter box and now it’s like okay what do you want to do so I’m gonna type period and again
it auto fills out this part I want it to show so I’m gonna start typing SH and it autocompletes it but I don’t want right here these are like special effects I don’t want any of those so I’m just going to type show and then the parentheses and then after the parentheses just a semicolon to finish it off and now if I wouldn’t be really lazy I can copy that and now where it says critter mouse out under that I’m gonna hit command V or ctrl V to
paste and instead of show guess what I’m gonna type if you said hide you’re correct all right so now let’s test out our code someone click preview and look at that he says hello pretty cool huh all right so now we just do the exact same thing pour the tiger and the bird so we’ve got Tiger Mouse in I’m gonna paste and instead of critter box I’m going to type Tiger box and let’s see it doesn’t like that let’s make sure I type like oh it’s big and
here’s the problem I called it taiga without an R so I’m just gonna change that to Tiger there we go and now it’s not complaining and now Tiger mouse out paste so again Tiger box at this time instead of show I’m gonna hide so let’s preview that boom where our hello hello so now one more for the bird so for the bird command-v instead of critter box what box – i won not the critter not the tiger I want the bird box and now I want the bird box again
but instead of show I want hide so chirp chirp for our hello all right so let’s it already saved mine go ahead and publish your work if you haven’t and you’re going to copy that and paste it into your assignments I hope you enjoy this tutorial and didn’t find it too tricky and hopefully it’s a nice stepping stone for more interesting and exciting code stuff thanks