Transcript

00:06 [Music]
00:10 Eclipse is a stack that allows you to
00:11 add slideshows and video for backgrounds
00:14 of any content that you want. As we see
00:17 here in this first demo, it could be
00:19 really amazing for banners and things
00:22 like that on your website, a hero
00:24 header, things like that. Really, really
00:26 awesome.
00:28 Eclipse works great with both videos and
00:30 images and allows you to add any type of
00:32 content that you want and it will fill
00:34 the entire background of that area. As
00:37 you see, it also allows you to add blurs
00:40 so you can actually kind of abstract the
00:43 background from your actual content, but
00:45 it really adds a lot of spark and
00:47 pizzazz to your websites. Here down at
00:49 the bottom, we have a timer bar to give
00:52 you an idea of the timing and when the
00:55 actual next slide will be coming.
00:58 Eclipse ships with over 30 different
01:01 overlays. And if you want, we have an
01:03 overlay gallery that you can click and
01:05 actually allows you to see all of the
01:06 various overlays that we have that you
01:08 can put on top of your images and
01:11 videos. I thought it'd be interesting to
01:13 also give you the ability to add just a
01:15 simple color slide. This allows us to
01:17 give you a nice way of fading in and out
01:20 between different colors to really
01:22 accent your website content very nicely.
01:26 Now, we've shown you that Eclipse can be
01:27 used for any sort of content within your
01:30 page, but it can also be used as a
01:33 actual full site
01:40 background. And in this example here,
01:42 we'll see that the site background is
01:44 there, but the content overlays and
01:46 scrolls over it. So, we have a fixed
01:49 background that, you know, it is your
01:51 slideshow. You can mix images and video,
01:54 but the content of the web page scrolls
01:57 over
01:58 it. For all the things that Eclipse does
02:00 for us, it's really easy to implement.
02:03 Here we are in the demo project that
02:04 ships with the stack. And let's go ahead
02:07 and implement a new instance. So when
02:10 you add this to the page, you'll notice
02:12 that we have an image slide. Now you can
02:14 add multiple different types of slides.
02:16 We can do image warehouse, which allows
02:18 you to warehouse your images. You can do
02:20 a video which requires that you put in
02:23 the URL to your poster image and videos.
02:26 And now notice you can do videos for
02:28 different screen sizes. So mobile,
02:30 medium, and large. And then lastly, we
02:33 have the Eclipse color stack, which
02:35 allows us to just have a kind of a
02:37 static color slide. So I've gone ahead
02:39 and added just a few images uh and
02:42 created slides out of those. And let's
02:44 go ahead and dive into some settings.
02:45 Add a little bit of content here. Let's
02:47 just preview so we can see. And as we
02:50 see, uh, we have our Eclipse with our
02:53 text content. Now, there isn't much.
02:55 It's not very large. So, what we can do
02:57 here is we could then add in, um, either
02:59 some utility classes or you can use like
03:01 a padding swatch to actually add a
03:02 little bit of padding. For time, I'm
03:04 just going to go ahead and add in um a
03:06 utility uh class from Foundation 6. Uh,
03:10 that will add in a little bit of padding
03:12 for us. Uh but again, if you don't have
03:14 foundation, you can use a swatch from
03:15 our starter pack as well to add padding
03:18 um to
03:19 Eclipse. Uh now we can go ahead and
03:22 adjust the delay and the fade effect,
03:24 which is basically the animation timing.
03:26 Uh how long do you want to fade? Uh how
03:28 long do you want to delay on each slide?
03:30 So on and so forth. Uh now, if we wanted
03:33 this to be a site background, so
03:34 basically not be a a static container
03:37 like this. Okay, just go ahead and check
03:39 this box. And what that will do is now
03:41 it will remove all your content from
03:43 Eclipse uh but it will add it to the
03:46 background and at that point you will
03:48 just add in your page content as you
03:50 normally would um in the stacks page.
03:53 Okay. And Eclipse will just go ahead and
03:55 float uh behind everything. We're going
03:58 to go and turn that off so we can get
03:59 our nice content back. Uh you can easily
04:02 go ahead and shuffle and loop slides. Um
04:04 do you want to fade in first? which
04:06 basically means do we want the uh
04:08 eclipse to fade in when it scrolls into
04:10 view, right? Uh which is nice. We can
04:13 show the timer and then we can add an
04:15 overlay. So if we look at the overlay,
04:18 you'll notice that we can u make it any
04:19 color that we want. By default, it's a
04:21 50% black so that the background kind of
04:24 bleeds through. Okay, you can change
04:26 this to be whatever color and opacity
04:28 that you want. And that overlay uh will
04:32 overlay the entire background of your
04:35 slide. Now, you can have overlay tiles
04:38 as you see here. And this overlay tile
04:41 uh 30 of them ship inside with the
04:43 stack. If you search through the image
04:45 group in your stacks library for
04:47 Eclipse, you'll find all 30 of the
04:50 background overlays that come with the
04:52 stack. Now, depending on your overlay
04:54 tile, you might want to add an opacity
04:56 to that to kind of tone that tile down.
04:58 Um, so this opacity setting is really
05:00 powerful for that. Next is the timer. We
05:03 have the ability to adjust the size and
05:05 the colors for that timer as well. Now,
05:08 one more thing I want to point out is
05:10 inside the actual slides themselves, you
05:13 can actually override the overlay that
05:16 is in the Eclipse stack. So, if you want
05:19 a special overlay for a particular
05:21 slide, you can actually set different
05:22 overlays on a per slide basis. Now there
05:26 is one extra feature when we do it on a
05:28 per slide basis and that is the blur
05:30 setting. Because of how overlays are
05:32 implemented um these blur settings can
05:35 only be applied to the individual slides
05:37 themselves and not an overlay that
05:40 applies across all slides. So it is a
05:43 really nice lovely effect but it would
05:45 be have to apply be applied on each and
05:47 every slide. Now, if you want to be make
05:50 sure that all your overlays are the
05:51 same, just go ahead and commandclick
05:53 every slide and then change your overlay
05:55 settings. And at that point, all the
05:57 slides will have the same overlay
06:00 settings. So, I hope you enjoy the
06:02 Eclipse stack. It's super powerful and I
06:04 can't wait to see what you build with
06:05 it.
06:13 [Music]