Transcript

00:09 in this video I just want to cover the
00:12 differences between chroma and chroma
00:14 Pro and the way we use markers to fix
00:19 our styles in chroma Pro so first of all
00:24 we'll look at the simple basic chroma
00:27 stack from the examples project and the
00:30 setup here is very simple without our
00:33 initial styles and we have our triggered
00:36 styles so we're going to set the
00:39 triggered styles to when sticky fixes we
00:43 can use a marker if we want but it's
00:46 easy and simple just to use the sticky
00:50 fix settings so what we've got is we've
00:52 got a gray background before it fixes
00:56 and then we've got our black bear
00:57 background when it fixes so we can see
01:01 it as we fix we get a nice transition to
01:05 our black background and we've also
01:08 added some padding that you can see
01:10 we've got 10 pixels top and bottom it
01:11 just adds a little more to the effect so
01:15 that's very simple and that's how the
01:17 basic chroma stack works now if we look
01:21 at the same page but using chroma Pro
01:25 will notice a couple of differences
01:27 straightaway we've got a marker here
01:29 above the stack and we've got our fixed
01:33 Styles and this is the the key
01:35 difference in the way that chroma Pro
01:37 works in order that we can have lots of
01:40 different style definitions on a page
01:41 each of our thick styles is defined in
01:45 the child stack we can add another one
01:47 if we want we're just going to have one
01:50 on this page for that for now though so
01:53 if we look at the settings again we've
01:56 got our default styles now this is our
01:59 gray background that we can see being
02:01 applied on the page now with no padding
02:02 and before we had our triggered styles
02:06 now we're going to define those in our
02:09 fixed style stack so when it fixes these
02:12 styles are going to be a
02:13 right so all I've done is set favorite
02:15 background color and 10 pixels top and
02:18 bottom padding that we had in our
02:20 triggered styles for the normal chroma
02:22 stack
02:23 so that's sensible and logical we need
02:27 to tell it when to trigger though so
02:29 these styles take effect when a style
02:33 marker like this chroma marker here
02:35 reaches the top of the page we can have
02:38 it trigger when it's at the bottom of
02:39 the page but just for now we'll go in
02:41 with the default settings so in order
02:44 for this to change its style when it
02:47 fixes we've got it set to sticky so when
02:52 it gets to the top of the page it will
02:54 become fixed and we need a marker to say
02:58 when the happens we're going to apply
03:00 style 1 which is our definition here so
03:05 obviously the marker needs to go above
03:07 the chroma stack and if it's right above
03:11 it it will essentially be at the same
03:13 point on the page markers have no height
03:15 so so as soon as the top of this gets to
03:18 the top of the page it's going to fix
03:21 now I'm going to show you it's setup
03:24 wrong first in the default state we have
03:29 our default style and we have this
03:32 inbuilt marker and it's set to use if
03:35 initial style name now the inbuilt
03:38 marker is a marker that's automatically
03:40 placed in the chroma spec itself so just
03:43 like this one that you we've added to
03:46 the page here they'll be one hidden away
03:49 inside the chroma stack and it will be
03:51 called default style because this is
03:56 what we've got set here it's using the
03:57 initial style name so if we look at what
04:00 happens here we've got our initial style
04:07 a of the stacks gray it gets to the top
04:09 of the page it fixes and it stays gray
04:13 so our style hasn't been applied now
04:16 that's quite simple because our style
04:21 one gets to the top of the page so it
04:23 should go black but instantly
04:26 our inbuilt style imagine there's
04:28 another one of these inside this chroma
04:30 stack that's called default style that
04:33 gets to the top of page and so this
04:37 default coloring is applied again so we
04:40 never actually see the change so if we
04:42 turn that in built marker off so there
04:45 is no marker now for default style so
04:48 the default style will be used when no
04:51 other marker is present it doesn't have
04:53 to be called that with the changes name
04:55 to radically want and it would still
04:57 work or even spell it right but now that
05:05 we haven't got a marker in the stack
05:07 this dole be used when no other markers
05:09 are active so it's great when it gets to
05:13 the top of the page start ones applied
05:16 so everything works as we expect so all
05:18 we need to do for this case is we need
05:21 to remove the marker the inbuilt marker
05:26 so when would you want to use the
05:28 initial style name
05:30 well sometimes you may have another
05:34 style that you want beforehand and it's
05:38 useful to have this marker in the stack
05:40 and we'll take a look at the demo
05:45 project next and you'll see how I made
05:49 that using different names to this
05:52 darling so quick example if I just copy
05:56 this marker and paste it up at the top
06:00 so that's at the top of the page now and
06:03 just to make sure we'll just give it an
06:04 offset to minus 10 so this marker now is
06:07 star one which we're going to rename so
06:10 we'll call this red this is going to be
06:14 active as soon as the page loads so a
06:18 crumber Pro stack add default style is
06:25 using the initial star line at the
06:27 moment if we change that to red then
06:31 these default styles which are applied
06:36 when no other marker is active on the
06:38 page I'm not going to get into
06:40 because we've said that the default
06:41 style is red so we need a style for red
06:47 so will other child will call it red and
06:50 we'll just simply change the background
06:52 to red horribly bright but there you go
06:56 so now when we load the page before it
07:01 fixes a chrome resurrect so we haven't
07:04 used the inbuilt settings at all and our
07:09 marker is on so it stays red so if we
07:13 then go back to our chroma stack and we
07:18 say we don't want any marker so now
07:21 again there's no marker in the stack so
07:24 what we've got is we're going to say a
07:26 default default style instead of using
07:29 these settings it's going to be called
07:30 red so we're going to use red the red
07:34 marker then when we get to our star one
07:38 it's going to go black so it's like free
07:44 to refresh and as we get to our style
07:47 one marker it goes black now this if you
07:52 think about it is a very very powerful
07:54 feature because we're not tied to the
07:59 background that we set in the stack we
08:02 can completely ignore that if we want
08:03 and there are several situations where
08:06 that's desirable to do we don't want it
08:09 to suddenly change to these inbuilt
08:10 settings it's nice to have them for
08:12 convenience but it's also nice to be
08:15 able to ignore them and we do that by
08:17 turning the marker off and making sure
08:20 that we have another style in use all
08:24 the time so now we'll take a look at the
08:28 demo page and see how that works okay so
08:36 here we are in the chroma demo project
08:39 and in this case we've got our chroma
08:42 menu as a partial so we can just go in
08:48 there and say we've got a chroma Pro
08:50 stack and then I'm using a button bar
08:53 menu
08:54 and straightaway we'll see that here we
08:58 have the inbuilt marker ID as a drop
09:02 zone as a HTML area and this means that
09:06 when we're out of our partial because I
09:10 want indeed we can enter the default
09:13 style separately - for each page that we
09:17 want so on this on this page I've left
09:22 the default style set to default style
09:28 which again is just an arbitrary name
09:31 but we've got the marker set to custom
09:34 use with partials and that's what makes
09:37 this area appear rather than if we've
09:40 got it set to use initial style name it
09:43 will just use whatever we type in in
09:45 here now ordinarily that's fine but
09:48 because we want to use it with a partial
09:52 and we want to have a different default
09:53 style name for some of our pages
09:55 we can't unpin the settings that we can
09:59 unpin the text area in HTML area so the
10:04 marker name appears here so this default
10:08 style won't be used but this one will so
10:11 when we go back we can see why we might
10:14 need to do this so on our home page
10:18 we've got a menu that starts off with a
10:24 transparent background and active items
10:28 blue and we've got an SVG logo there and
10:33 when we scroll a bit we get a thick
10:36 shadow and I've even just change the
10:39 color of the underlined in the SVG and
10:42 that's just using the custom settings in
10:45 chrome a pro that allows us to target
10:47 anything that we like so as we scroll
10:52 down the page nothing happens on this
10:54 page this page is just a very simple
10:57 effect at the top of the page if we swap
11:00 to our features page it's the same sort
11:02 of layout so we can use the same default
11:05 style
11:09 so we've got same menu layer transparent
11:15 until we scroll a bit and then we get
11:18 our gray on the bar underlined bar and
11:21 drop shadow on this page we've got some
11:24 different markers so we've got as we get
11:29 down to the red section there's a marker
11:32 that's called red menu so that turns the
11:36 SVG itself gray and the underlined red
11:38 and it turns all that highlights in the
11:40 menu to red and then we get a bit
11:43 further down to a yellow section and we
11:46 color for denied with that as well but
11:49 the actual behavior at the top of the
11:51 page our default style is the same so no
11:54 problem we could do we could do that
11:56 with the normal default style settings
11:59 the different come the difference comes
12:01 when we get to the page that describes
12:03 the chroma Pro features separately so
12:07 let's have a look at that now straight
12:12 away you'll see we've got a very
12:13 different top of the page here which was
12:16 done deliberately to demonstrate this
12:18 use case this time we've got a big blue
12:23 header and quite clearly we don't want a
12:27 thick shadow and a white menu bar to
12:29 appear straight away here we want it to
12:31 appear down here where we've got the
12:35 atlas marker so if we were to use the
12:39 default style ah default style would get
12:43 applied and we have a bar though that
12:47 look ugly whereas we want it to happen
12:50 here so if we take a look in edit mode
12:54 so at the very top of this page you can
12:56 see that we've got a marker called hide
12:58 background logo switches so we're hiding
13:01 the logo and the background and that
13:05 corresponds to our fixed style that
13:08 we've got in our partial here now
13:12 because we want this place to be
13:14 different we don't want the default
13:18 style to be used and the
13:19 all style of course is the same for
13:21 every page because that's in the past or
13:23 settings for for our chroma menu but
13:26 within on pin the marker ID setting when
13:32 we set to custom and put in a separate
13:34 one so this page is no longer going to
13:37 use the inbuilt settings that we have
13:42 down here which is the default style
13:45 that we're using on all the other pages
13:47 this page is going to use this
13:50 background logo marker hide and you can
13:56 see that we've got all the different
13:58 markers for all the different pages in
13:59 our partial so the yellow menu in the
14:02 red menu is so on the last page the gray
14:05 logo underlined style and if we look
14:08 down the page we'll see as we get to the
14:10 bottom our blue header there's the lip
14:13 line our white bar and we get to our
14:19 gray logo underline when we get to this
14:22 sort of text area that's the same marker
14:25 that we used on the on the other two
14:28 pages and we get down to the
14:31 demonstration of hiding part of the menu
14:33 over the image so we ever hide menu
14:36 before the image and that will hide the
14:39 logo and I think examples button and
14:43 then after the image we have a gray logo
14:47 under line style coming back on again
14:49 all these markers are just for the demo
14:52 project so they just show where the the
14:55 marks are all these little marker IDs so
14:58 that they're absolutely nothing to do
14:59 with chroma just for the look of the
15:02 finished demo and I hope you get an idea
15:08 of just how powerful using the unpinned
15:11 marker IDs for this being built marker
15:14 remember you still got the styles in the
15:17 stack to use they've got their own ID
15:21 all we're doing is changing the ID of
15:25 the marker that's in the stack itself so
15:29 it gets triggered when it finds
15:32 a style this term becomes active"}]