Transcript

00:06 hey everybody
00:07 this is Joe workman and I know you've
00:10 probably checked out all the other JAC
00:12 videos and this is the last in the
00:14 series this is on all of the great hover
00:17 effects that you can do with Jack with
00:21 Jack for we've separated out all of the
00:23 hover effects into its own separate
00:26 stack so that you actually have to if
00:29 you want hover effects you add the Jack
00:31 hover stack to the page so let's jump in
00:36 and show you how to do it so here we are
00:39 in the Jack hover demo page and as I've
00:43 said in all the other videos you can
00:44 download this project file from the Jack
00:47 doc portal as well as you can get it
00:50 from the disk image that you use to when
00:51 you purchase Jack
00:52 okay now the Jack hover stack is
00:57 actually a separate stack that you add
00:59 to the page so if you want to add hover
01:04 events you need to add your Jack stack
01:07 the wavy in style at the exactly the way
01:09 that you want view all the other Jack
01:12 videos to see how we've styled things
01:14 this way now if I want to change
01:17 anything about that Jack stack when you
01:19 hover over it I need to add this Jack
01:22 stack into a Jack hover stack now let's
01:27 look at the Jack hover settings you'll
01:30 notice at the top you we have animation
01:33 speed so you can define the speed at
01:35 what the animation is and then the
01:37 easing effect so as you play with these
01:40 you'll see exactly what these easing
01:42 effects do probably for a lot of things
01:44 linear would make sense and ease in and
01:47 ease out but they're basically how
01:50 things are timed their timing functions
01:52 just in general if you want to hover
01:54 have hover effects for any of the Jack
01:57 settings you need to enable that
01:59 settings section so in this particular
02:01 instance I want to enable hover layout
02:04 so I need to check I want to change the
02:08 layout settings on hover if you look at
02:12 border I don't have this checked so it
02:15 doesn't matter what settings I have here
02:17 they're not going to be used because I
02:20 do not have enable hover border same
02:23 thing if I if I don't turn on hover
02:25 background that the background is not
02:27 going to change
02:28 same thing with shadows so it is
02:32 important that if you want settings to
02:36 be changed on hover you need to enable
02:40 them inside Jack hover now another thing
02:44 once you enable Jack hover all of this
02:48 settings that are shown inside this in
02:51 this example Jack hover layout all these
02:55 settings are going to basically used on
02:57 hover so if I don't want to change the
03:00 padding on hover I need to make sure
03:03 that on hover the padding is set to be
03:06 exactly the same as the normal Jack
03:08 stack so let's look at what this jack
03:12 stack is this particular Jack stack has
03:18 a padding set to 10% it has a minimum of
03:22 max height set of 100 100 it has
03:25 flexible to browser set to 25% now let's
03:31 see exactly what Jack hover is set to
03:35 now if we look at the the Jack hover
03:38 settings well notice that there are a
03:40 few options not showing you can't change
03:43 you can't go from let's say static
03:45 height to proportional Heights inside
03:48 Jack hover but if you wanted to go from
03:50 static hypostatic height you could so
03:53 that's why some of these top settings
03:54 for flexible for width as well as height
03:58 options only contain values that are
04:00 animatable this particular stack will
04:05 notice that the max height on hover is
04:07 set to 140 but everything else is
04:10 identical therefore when we hover over
04:13 the stack it's going to animate from 10
04:16 pixels to 140 pixels let's see that in
04:20 action so as you see as I hovered over
04:23 this height stack
04:25 it is animating from 100 pixels to 14
04:29 pixels and the same thing can be done
04:33 with all of these width rotates and even
04:36 the skew thing now I'm not going to go
04:39 over each and every one of these you see
04:42 the concepts you set your cut your base
04:45 layout that you want inside Jack and
04:48 then whatever you want changed needs to
04:52 be inside Jack hover and the same thing
04:56 applies to borders if I want to increase
05:00 the border size on this particular stack
05:03 we'll see that if we look at borders I
05:08 have my borders set to 3 pixels 99%
05:13 opacity around corners 3% okay and if
05:17 this will notice that my border is
05:19 animating to ten pixels or if we look at
05:23 this example which is pretty amazing we
05:26 animate the actual border radius so deep
05:32 by default the Jack stack is set to be
05:34 50% border radius which will give us a
05:39 circle when we preview the page but on
05:42 hover we're animating that to be 1
05:45 pixel radius so I'm sure you've seen
05:48 this demo when I hover over this the
05:51 border radiuses change to be a circle to
05:55 a rounded rectangle and on this one I'm
06:00 animating both the border size and the
06:03 opacity the same thing can be done for
06:07 backgrounds by changing background
06:09 images changing the opacity of a
06:12 background hovering shadows changing
06:15 shadow values so that pretty much does
06:19 it for Jack hover right I didn't go into
06:22 all the examples because the concepts
06:24 are exactly the same if you want to
06:26 hover if you know various styles on Jack
06:30 you set your base Jack to be the exact
06:32 styles that you want then you insert it
06:35 inside of a jack hover stack where
06:38 the any deltas need to be changed inside
06:41 that hover stack now if there are values
06:44 again that you don't want to be changed
06:46 on hover you need to make sure that
06:47 those values are also set inside Jack
06:49 cover is if you have that particular
06:52 settings group enabled so I hope that
06:55 you use these hover effects um I hope
06:58 you don't need to crazy things with them
06:59 I've seen some pretty ugly things with
07:01 hover so um keep things subtle I think
07:04 subtlety is is very good so I hope you
07:07 loved Jack again the more you use it the
07:10 more you'll love it okay
07:12 and it really is an indispensable tool
07:15 that you know you use a pretty much
07:18 every web project so thanks for being of
07:21 great value customers go forth and make
07:24 your websites great thanks everybody bye"}]