Placeholder Image

字幕列表 影片播放

  • now, Have you been watching YouTube for any time at all?

  • Then you most certainly been told to fashion like but the native algorithm.

  • But no matter how many times you click it or how hard you click it, all it does is turn blue.

  • So in this video, I'm gonna show you how to create a like button using SPG and CSS, which you can actually smash and destroy.

  • Let's get started now, But before we get started, I want to give you an entire year of hosting for free by using today's video sponsor atlantic dot net.

  • And that's right atlantic dot net hosting is giving you an entire year of hosting for free.

  • And if you use the code, Kyle, when you sign up, you get in additional $50 of credit, which you can use on top of the free year of hosting.

  • And this isn't some weak little server.

  • They're actually giving you an incredibly powerful server.

  • It's more powerful than the server that my own site runs on, and it's all for free for an entire year.

  • So I highly recommend you check out atlantic dot net hosting and use the code.

  • Kyle when you sign up.

  • Welcome back, Toe Web.

  • Deva simplified My name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

  • So if that sounds interesting, make sure you subscribe to the channel for more videos just like this.

  • On the right hand side here I have the finished version of our product so we can see what we're trying to emulate before we actually build it.

  • We just have a simple like button, and as you click it more and more you can see it will start to get cracked.

  • It'll kind of grow when you click on it to really emphasize you're clicking on it.

  • And once you click it enough times, it's going to break apart into a bunch of little pieces, and we're able to do all of this with just spg CSS and a very little bit of JavaScript just to add in the explosion.

  • So, in order to get this fancy looking like button, we use Sigma to create it.

  • So here I just have the finished version of our like wooden, and as you can see, it's broken in all of these different pieces so we can actually individually modify all of these different groups as we want me just undo this bag.

  • To have it was And in order to get this into our project, if we just click on this right click, we can copy and paste this as an SPG and I'll put a link to this spg for you So you can actually download this and do this along with me.

  • So just check down in the comments for a link to the SPG and then if we come in here and open up index dot html, just get the boilerplate html instead of our body, we can actually paste this SPG.

  • And as you can see, this is just a bunch of different text.

  • Essentially, it's just looks a lot like HTML and it's SPG.

  • Itjust defines the shape, So if we actually open this up with live server, make sure everything saved.

  • You can see we get this exact same design as we had over here.

  • But now it's inside of our HTML over here, and we can actually play around with this and actually move it around and modify our SPG using CSS.

  • But in order to do that, we first need to figure out what all of these different paths correspond with because I mean reading this, I have no idea what end 25 8337 is.

  • So in order to do that easily, if we just come in here and inspect our element.

  • And I just dragged this over so we can easily sue or working with here.

  • And we just hover over different part of our SPG.

  • For example, this first path you can see that this first path in our SPG corresponds to this black rectangle on the left.

  • As you can see, it's highlighted in blue.

  • So we know that this first path right here is going to be our very first section or very first group, and to create a group in SPG, you just use this G like this and then everything inside of this SPG we can actually correspond by selecting this single group.

  • So if we move this group, it moves everything inside of it.

  • So we can just give this a class here which is going to be, for example, group cuff and for this simple example, since there's only one thing in the group.

  • We don't have to group this, but I'm going to group all of the rest of our sections because there's multiple paths in them.

  • So for consistency will also group this one.

  • Now let's see where the rest of our sections are will hover over this very next path which, you can see, is this bottom right outline, as we can see here.

  • And the very next path after that is the crack to left and then the crack to the top.

  • And then this crack here.

  • So we know that everything up to this next big path section is all going to be our bottom right hand group.

  • So all of this code here is all going to be in one group.

  • So it's create our group.

  • We'll just move that down like that.

  • So now we have this section which is our bottom right inside of another group.

  • We'll give this a class of group bottom hopes bottom great, just like that.

  • And now we can create another group based on our next section.

  • Salts open our SPG up.

  • This next path you see is our top rate path.

  • After that is one of the cracks for it.

  • And then this next small path is another crack Ford.

  • So again, these next three paths are all gonna be in our class here, which is a group top.

  • Right?

  • Close that off.

  • And we just put this closing tag for a group down here.

  • And now let's go back to our SPG.

  • So now we have our three groups here.

  • Let's see what this next section is.

  • We can see it looks like it's our top.

  • We also have this crack for that top section, and that's the only crack for the top section.

  • So just these next two paths are going to be our top section.

  • So put it in a G here with a class of group top.

  • Close that off and we'll just move this down here and there we go.

  • Now, we have just this final path section left, which is going to be this left side crack over here.

  • We know that this is all that's left, so we can just assume this is going to be our left side.

  • So we're again going to wrap this inside of a group, move this around, put the G at the bottom there, and We want this here to be a class which is going to be group, and this will just be our left group.

  • And now, in order to actually see how this is working and understand how everything's going, let's add in the style sheet and start applying styles to these different groups to really see what we're working with so we can just come in here.

  • If we want to add a link for a style sheet, we just call it styles that CSS and let's actually create that styles that CSS and inside here we can select are different groups.

  • We have our group top, and we also have a group which is going to be our top great, another group which is going to be for the cuff and another group, which is going to be the bottom right, and then lastly, we're going to have our group, which is on the left.

  • So in order to understand how this works, I was just coming here and add a display of none.

  • Toe are different groups you can see that's made our top group disappear.

  • If we apply this toward top right, you can see our top right group has disappeared.

  • We do it.

  • Our cuff are cuffed, disappears Same thing with bottom, right?

  • Save that Our bottom right disappears and we do it again last night with our group on the left and are left group disappears.

  • So by using these different classes, we can target each individual group.

  • So that way, when that thing explodes, we can move each group independently from each other, which is exactly what we want.

  • Obviously, for now, we don't want to hide them social.

  • Get rid of that code.

  • And the thing that I want to work on first is going to be centering are like button in the middle of the screen.

  • That's actually pretty easy to do.

  • If we select the body, we can use a display here of flex.

  • We can justify our content in the centre, align our items in the center and then all we need to do is set a min height on our body of 100 view height.

  • If we save, you can see that centered it.

  • But we have this scroll bar.

  • We could just remove the margin on our body.

  • And now you can see we have no more scroll bars and are like button is dead center in our screen.

  • Next, let's actually select are like button.

  • We use a class of white button to do that.

  • So in order to actually select are like button, which is this whole SPG.

  • We just want to add a class which is going to be, like button on to R S v G.

  • And now we can actually select that here.

  • And the first thing I want to do is change our cursor to be the pointer cursor.

  • So when we hover, we'll get that click looking cursor that will we know we can click this like button.

  • And I also want to change one thing which is overflow.

  • I want to change this to be showing So we're just gonna say it visible.

  • And the reason for this is by default, and SPG has a certain size.

  • If we just inspect this again, it should be pretty easy for me to demonstrate this.

  • And if I just use this little selector tool, you can see that we have a specific rectangle around our SPG.

  • And when we explode our SPG components, all of the different top right left bottom groups they're gonna leave this SPG rectangle, this blue rectangle, and we want to make them showing because by default, anything outside of this rectangle is going to be hidden.

  • So in order to make it show, we need to use that overflow, which we specified here of visible.

  • Lastly, if you remember right when we clicked on the button, we wanted to quickly grow and then shrink.

  • So in order to do that animation, we're going to put a transform on our like, Clayton, which has a transition, and this transition is going to be for 50 milliseconds, and we're just Dewey's in and out, and we only want to transform our transition to transform property.

  • So essentially, whenever we change transform, it's gonna have a 50 millisecond transition between the two different states, which is gonna give us a really quick animation, which is gonna look pretty good.

  • And in order to make our button grow to a size and then shrink back down, we want to select our like button and we want to do this whenever we apply the class of big we want to mend, change are transformed and we want to change this scale.

  • I'm just going to scale it to about 20% larger.

  • So we use 1.2.

  • And now, if we ever apply the class of big to this like button, you can see it's gonna grow to that big size.

  • Nor move it.

  • It's going to shrink back down, toe a normal size.

  • And in order to dictate this size of big versus small, we're actually going to use JavaScript to do that.

  • So let's link in here a Java script tag.

  • We're just gonna use script dot Js and make sure that we defer this soda load after our SPG content.

  • And then what's created that script file script dot Js and inside of here, let's just create a variable, which is going to be far like button.

  • We're gonna select this like button by using document dot query selector.

  • We just want to select for the class of like button just like that, and then we can actually set up an event listener So we'll say at event listener.

  • So whenever we click on this link button, we want to run this function in here, and in this function, we're just going to add the class of big so we'll say like button dot class list dot ad and we'll put in here the string of big.

  • So now when we click on this button, you can see it animated toe a larger size, which is that big size.

  • But you can see it's stained this big size.

  • We wanted to kind of pulse big and then shrink back down.

  • So in order to do that, we can actually use another event listener.

  • So we'll just do another ad event.

  • Listener tore button.

  • And there's a property here called Transition and just one word.

  • No capitals.

  • All lower case.

  • And what this is going to do is this is going to fire whenever an animation on our object is done being performed.

  • So we have that transition in our style sheet of 50 milliseconds.

  • So this is going to fire essentially 50 milliseconds after we click the button.

  • And in here, what we can do is we can take our like button our class list.

  • We just want to remove the big class, and this is going to do is gonna make it animate down to a smaller size.

  • Now, if I click on this, you can see it grows up, and then 50 milliseconds later, it shrinks back down to that size that it was before.

  • And I can do this as many times as I want And you could see no matter how fast or slow I click, it's always going to work.

  • Now, if you remember when I showed you the final version of this, it started out with no cracks.

  • And as we clicked it, we added more and more cracks.

  • So we need to do instead of our index dot html, we need to find each one of our cracks, which are these smaller looking pads.

  • We're gonna add a class here of crack to denote that these are the cracks inside of R S V g.

  • So for each one of these small paths, which just make sure we add that class of crack, I'm gonna scroll down to every single one of these.

  • There we go.

  • Now we have this class of crack on every single one of those smaller sections of our SPG, and in order to make sure that these don't show up instead of our style sheet was just select crack and we just change the display here to none.

  • And if I save, you can see all of the cracks have been removed from our like button.

  • And in order to slowly add those cracks back in, we can actually track the number of clicks inside of our JavaScript.

  • So it's a creative variable called number of clicks.

  • We're gonna default this to zero, and then inside of here we're going to increment this buy one, so it's a number of clicks plus plus, this will add one to our number of clicks.

  • Then what we can do is we can actually do some if statements here, for example, we're gonna increment every three clicks.

  • So at the very last section, when we have 12 or more clicks, what we're gonna do is want to explode our element.

  • So you can say if the number of clicks is greater than or equal to 12.

  • Inside.

  • Here is where we're gonna do the explosion of our element else we can do another else.

  • If here hopes else.

  • If the number of clicks is greater than or equal to nine, this is going to be our next increment ng what We're gonna add some more cracks in.

  • We'll do another else.

  • If for the number of clicks greater than or equal to six and then lastly we're gonna have a final else if this is going to be for a number of clicks greater than or equal to three.

  • So essentially, every three times that we click this like button, we're going to get more cracks all the way up until this last one where we're going to make the actual thing explode.

  • And in order to add the cracks in, we're gonna want to add them in per individual group that we have here, each one of these G tex.

  • So in order to do that, we're gonna want to pull in those different groups to our JavaScript.

  • And instead of making you watch me type all this out, I've just copied this code over.

  • It's pretty simple.

  • We just have each one of our groups we named, and we selected them by the class that we gave each one of those groups.

  • So we have all five of our groups in here and now, in order to start adding in thes different classes, the very 1st 1 will just say group top.

  • We wantto ad where we wantto select the classless.

  • Sorry.

  • And we want to add a class, and this is going to be our class of cracked.

  • Essentially, we're saying we have this section and we want to show all of the cracks by using this cracked class.

  • Now, before I go through filling out all of the rest of these, if else, let's just make sure that this single one works for a group top.

  • So if we save this, go over to our style shit, we're gonna select our group top, and we want to select it when it has the cracked class.

  • We want all over elements that air crack elements to change their display from display, none to display block, essentially just making them show up.

  • Now, when we click three times, we should see these top level cracks showing up, which is exactly what we want.

  • Now let's do the same thing with all of the rest of our sections.

  • So let's do this year, we're gonna have our group top, right?

  • We want to do class list dot ad cracked.

  • Let's just actually just copy that, it'll be a little bit easier.

  • Then we're gonna have our group of bottom, right, Same thing.

  • And here we're going to have our group, which is our left group.

  • I think that's the last one left.

  • Now, if we save that and click this bunch of times, we got our cracks on the top.

  • And, of course, we need to make sure we add our styles for all the other groups.

  • So we're gonna do Group Top, right?

  • Man, do our group bottom right.

  • Our group left.

  • It will even do the group cuff, even though there are actually no Stiles on that for the crack.

  • Unless just copy this cracked section down for all of these.

  • So whenever any of these have the cracked class, we want to show all of the different cracks.

  • So now if I click this three more times, you should see we now have this showing up on the top, right?

  • Three more times, and we're getting here the bottom right, and three more times, and it's showing up for the left one's.

  • But since the left cracks are behind these other cracks, you don't notice any noticeable difference.

  • But one this explodes.

  • It'll actually make a difference.

  • And speaking of exploding, when we get to these 12 clicks.

  • This is when we actually want to explode are like button.

  • So we could just add a class two are like button.

  • Say class list dot ad.

  • We're gonna add a class of exploded to denote that are like button is exploded.

  • And then we want to make all of these different pieces spin out of control when we get to that point.

  • So let's save that, go into our style sheets.

  • And in order to do that, we want to select exploded.

  • We're gonna get our group top, for example.

  • And in here we want to have some form of animation that makes this fly off the top of our screen.

  • Now, the easiest way to do that is going to be by using the transformed property along with translate, which will allow us to move our position.

  • And we're also going to, on top that use rotate in order to make this rotate all over the place.

  • And right now, which was put in here of rotation of 500 degrees, so it's gonna spin quite a bit, and we're gonna translates this slightly to the left and slightly up, so we're just gonna use negative 15 lips negative 15 view with.

  • So it's gonna do 15% of the width of our screen to the left.

  • We're also gonna do negative 40 VH, so it's gonna move up negative 40% of our view height.

  • And if we save that, we just click this a bunch of times, you can see that this has popped off.

  • So in order to figure out exactly where this flew to and why we can't see it and also in order to make our explosion animated instead of just popping from one place here to another place was actually come in and set up a transition, just like we have here for our, like Latin on our actual groups.

  • So you want to select all of our different groups, we're gonna do Group Top.

  • We're gonna have group top club's top rate.

  • We're gonna have a group bottom, great.

  • Our group on the left, and we're also going to have our group, which is going to be our cuff.

  • And for each one of these, we wanna have a transition, and this transition is going to be just for the transformed property again.

  • And we're gonna want this to be one second, so it's a little bit longer.

  • And if we say this now, you can see that this piece has a really weird spin.

  • You can see that wherever it's rotating around.

  • If I save it again, it's rotating around a really weird spot.

  • So in order to make it rotate around the center of its own position, we can change the transform origin to center.

  • And now when we save, you can see it's now spinning around its own center, which has it showing up on our screen right where we want it.

  • Let's just refresh.

  • So we start off with a fresh button, do all of the clicks and make sure everything works out.

  • And as you can see, it's spun up exactly to where we want it to be.

  • Let's just refresh it all back to normal, and we're going exploding out all of the rest of our pieces.

  • I'm gonna copy this.

  • We're gonna first work on our top, right Next.

  • So far, a top rate piece.

  • We're gonna want to make it move up to this top right hand corner.

  • So to do that, we're gonna want to make it move 40% of the screen to the right, and we're also gonna want to make it move 30% of the screen upwards.

  • And let's just change this rotation to maybe 100.

  • Now, if I save, click this a bunch of times.

  • We should see this piece here fly up to the top, right?

  • And as you can see, it flew up to the top right with a lot less spin, because compared to this piece, because we have this lower rotation also, let's make sure we have semi colons at the end here.

  • Let's move this down.

  • We're gonna do next our bottom right, And for a bottom, right.

  • It's going to be very similar to our top, right?

  • But we actually want to move it down and to the right, so this 40 view with is gonna be perfectly fine.

  • But instead we're just gonna move it down 30 view height, and we're gonna change our rotation here to 200 degrees.

  • As you can see, it's made it go down to the bottom hander of our screen to the bottom, right, Just like that, which looks pretty good.

  • Although we have left are these left hand sections So what's copy this down?

  • We're gonna do our group on the left next and for our group left.

  • Where we're gonna want to do is move it mostly to the left will also give it a little bit of vertical movement.

  • So we'll do negative 40 on the view with and will change this to be negative 15 view height.

  • Let's give it a pretty wild rotation of 400 degrees.

  • As you can see, it spins kind of wildly up into this left hand corner.

  • That's slightly upward now for our cuff in order to make it so doesn't overlap this too much.

  • We're gonna move this down to the bottom left.

  • So which changed this to be a cuff And again, we'll just keep this negative 40 Here.

  • We just changed this deposit of 15 and will mess with the rotation will do 370 degrees we haven't used yet.

  • And now it always save.

  • You can see that this moves down to this section over here, And if we refresh our page and click this a bunch of times you're gonna see our cracks are showing up just like we want.

  • As soon as we're done clicking all of the pieces explode all over.

  • Well, you'll notice a couple problems first, our cursor still has the pointer cursor and secondly, only click you can see the entire thing still scales.

  • We obviously don't want that scaling toe happen anymore, and we want this cursor to disappear.

  • Luckily, we can fix both of those in CSS.

  • We can say that when we have our like button and we have it exploded, we just want to change our cursor back to normal.

  • So we'll say cursor of initial is just gonna reset our cursor back to default.

  • And now, as you can see our cursor over here back to default, all we have left is to remove that scaling effect.

  • So what we can do here is we can say also when I like Button is big, but also when it is not dot excluded.

  • So we're saying when it's big but not exploded.

  • So essentially, we're just ignoring this whenever I like.

  • Button is exploded.

  • Now, if we save, we can click all we want.

  • That big class is being applied, but it's not actually exploding are like button.

  • We could also do this in the Java script by having an if check here and only adding big if it's not exploded.

  • But I figured that doing it in the CSS is just a Z Z, so there's really no reason not to, and that's all it takes to smash the like button.

  • If you enjoy this video, make sure you check on my other videos linked over here and maybe smashed a like button down below as well.

  • Also, when you're down there, you can click the subscribe button for more videos just like this one.

  • Thank you very much for watching and have a good day.

now, Have you been watching YouTube for any time at all?

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

我使用CSS和JavaScript來粉碎 "喜歡 "按鈕。 (I Used CSS and JavaScript To Smash The Like Button)

  • 0 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字