Transcript

00:06 [music]
00:09 So, let's introduce you to Samurai 3.
00:11 Samurai isn't your typical slider that
00:14 just does some simple fades and slides.
00:18 No, Samurai gives you some amazing 3D
00:21 animations that can really make your
00:24 designs and your web pages pop. So, as
00:27 you can see in this demo, we've enabled
00:29 all the things, okay, all the settings
00:31 here. So, you can kind of get a glimpse
00:33 of what Samurai can do for you. We have
00:36 random animations that is slicing up the
00:40 Samurai images in different amounts of
00:42 slices. Things are going in different
00:44 directions, so you can kind of randomize
00:46 things. Um, as you see, we have
00:48 captions. If you hover over, we have
00:51 animations. Uh so you can actually
00:53 manually uh go ahead and navigate
00:56 through. You see that we have arrows to
00:58 go previous and next. We have uh bullets
01:01 down on the bottom that nicely hide away
01:05 when you unhover.
01:07 Now we have to check out the interactive
01:09 demo because there's so many amazing
01:11 animations going on inside Samurai. I
01:14 really wanted to give you the
01:15 interactive ability to see what it can
01:17 do for you. So here we'll notice just by
01:20 default I can go ahead and a there's
01:22 external controls. So um you have the
01:25 ability to actually have controls
01:27 outside of the slider just as we do
01:29 right here in this interactive demo.
01:33 Now as you see I kind of like this one
01:35 slice ability where it gives you uh a
01:38 very just simple 3D rotation animation.
01:42 We can dynamically adjust the number of
01:44 uh slices in our animation.
01:50 You notice that we can also go all the
01:52 way up to uh let's go to 10, right? And
01:56 uh let's see some interesting
01:57 animations. So let's go ahead and let's
01:58 see what gap does. Let's take gap down
02:00 to zero, right? And that gives us a very
02:04 interesting where there's absolutely no
02:06 gap in between, right? And we can go all
02:08 the way up to something big and maybe
02:11 we'll reduce the number of slices on
02:12 that. Right? And so you see it. We have
02:16 a lot of different varied animations.
02:19 Going from one to the next are very
02:21 different looks and feels, but this
02:23 interactive demo gives you an example of
02:25 what we can do. Now, in terms of speed,
02:28 there's different animations will
02:29 actually look better depending on the
02:31 animation that you have. Right. So,
02:33 let's go ahead and up this to um let's
02:35 go to 10 and let's go ahead and look at
02:38 uh overshoot and settle. If we animate
02:40 this,
02:42 that's pretty nice. Right now, we can
02:46 slow this down a little bit.
02:49 Right, to kind of give us a more flowy
02:52 effect, right? Um, if we go to, let's
02:54 say, bouncy ball, um, right, kind of
02:58 gives us something a slightly different
03:00 effect. So, there are some animations
03:02 that will look better or different based
03:04 on the animation.
03:09 Now, implementing Samurai is super easy.
03:12 Uh, when you add Samurai to the page,
03:14 you can get one Samurai slide. And
03:16 there's a blue button that has a child
03:18 stack that allows us to add slides in
03:21 different ways. We either have a drag
03:23 and drop images. Uh, we can support
03:25 warehouse or a CMS slide that allows you
03:28 to integrate things like total CMS and
03:30 feeds.
03:31 Now, let's dive into some of the Samurai
03:33 settings. Uh, here we have the ability
03:35 to configure the slices. So, how many
03:37 slices do you want? Do you want a random
03:39 number of slices or do you want a static
03:41 number of slices? What sort of gap do
03:44 you want on the slice? What are the
03:45 colors that you want in between the
03:47 slices? Right? So, we have a lot of
03:49 customizability there. Um, next up is
03:52 our animation options. And a lot of
03:54 these options are going to be what we
03:55 saw on uh the interactive demo with a
03:58 couple other things such as perspective
04:00 um and slice delay, which is the the
04:02 amount of delay that you get per slice.
04:04 And obviously, we can have auto play as
04:06 well. Um we can add round corners uh to
04:09 our images uh which is really cool
04:12 especially those round corners are
04:14 maintained as the animation's going
04:16 which was not simple actually.
04:19 Next is our captions uh and how do we
04:22 want to animate those? There's two
04:23 currently two options for animation of
04:25 captions as well as size and colors. Um
04:28 you can have nav arrows. You can turn
04:30 those on or off. And the same thing with
04:32 the navigation bullets and all the style
04:35 ability there. For the navigation, you
04:38 have to define just a single SVG. Um you
04:41 can customize that with your own SVG and
04:43 the SVG will be flipped for the previous
04:46 navigation, right? So that way we just
04:49 supply one and um it'll just use that
04:51 same exact SVG for previous and next.
04:56 And at the bottom here, we have the
04:57 ability to have external controls. And
05:00 that's so a class that we can add to
05:02 whatever buttons you want. And those uh
05:04 classes will control whether or not you
05:06 want to navigate to the next or previous
05:08 slides within Samurai within the Samurai
05:11 slide stacks. Um, and this is the drag
05:14 and drop example, but all the options
05:16 are going to be the same. Uh, we have
05:18 the ability to have the alt text for SEO
05:20 purposes, as well as the caption. If you
05:23 don't want a caption, just simply leave
05:24 the caption blank. and no caption will
05:26 be added to that slide. And of course,
05:30 we can add our favorite HTML classes to
05:32 customize each individual slide to our
05:35 liking.
05:37 So, I hope you can see how powerful
05:39 Samurai is and how it can really be used
05:41 to make your web designs pop. I hope you
05:44 enjoy it and go forth and make your
05:46 websites great.
05:53 [music]