0:06 hey everybody this is joe workman and
0:08 today i am excited to show you the new
0:09 parallax stack
0:11 now we've been working on this stack for
0:12 a while and
0:14 we've wanted to ship it for even longer
0:16 because it's something that users
0:17 really really want they want that
0:19 parallax effect where the background is
0:22 moving slower than the content right
0:25 just a really slick animation that
0:27 really when do when done right um
0:31 it can really make your website pop
0:32 right
0:34 so without further ado let's jump in and
0:36 see exactly how easy it is to implement
0:40 now before we jump in and show you how
0:42 to use the stack i just want to review
0:44 some of the features of this stack
0:46 so if we look at the demo site we'll
0:49 notice that as i scroll down this page
0:52 first let's concentrate on this banner
0:54 image here notice that the background is
0:56 actually going to be
0:57 moving slower at a slower rate than the
1:00 content scrolls
1:01 so as i scroll down the page you'll see
1:03 that the
1:04 background image is actually scrolling
1:06 slower than the content
1:08 it gives it kind of a layered moving
1:10 effect
1:11 the next effect here we have is the
1:13 apple
1:15 now in this apple uh we'll notice that
1:18 it's actually moving
1:19 up and down right it's not fixed it is
1:22 scrolling but it is scrolling at a
1:25 different rate than the content
1:26 and finally at the bottom we have a
1:28 similar to the banner where we have
1:30 it's just an image right there's no
1:32 content within it
1:33 and that's another thing that you can
1:35 notice is you can have content inside
1:37 parallax
1:38 or you can have just the image it's up
1:40 to you
1:42 now if we look at the cover demo we'll
1:44 notice here that
1:45 in this demo parallax is actually a
1:47 cover image that covers the entire web
1:49 page
1:50 and as i scroll down this page we'll see
1:53 that the actual
1:54 background does scroll with the content
1:57 but just at a much slower rate
1:59 so we do get some movement in the
2:01 background
2:02 now in this final demo we have a layered
2:05 parallax
2:06 and this is kind of the holy grail of
2:08 parallax's because on this page i have
2:10 three different parallax stacks in the
2:11 background
2:13 and you'll notice as i scroll down the
2:14 page we have the brown background
2:18 the dark green leaves and these light
2:20 green leaves
2:21 and all of them are animating at
2:23 different rates
2:25 so we really get a layered animation
2:28 effect here
2:29 now in this example i just have a target
2:32 stack with
2:33 some content that's fixed to the center
2:35 of the page
2:36 however you can have content scrolling i
2:39 really wanted to showcase
2:41 the layered parallax effect so i didn't
2:43 want to add too much content to this
2:45 page
2:46 to kind of you know give you a full
2:48 effect of what the animation is doing
2:51 now before we move on i want to make a
2:53 note about how parallax works on mobile
2:55 and touch devices for performance
2:59 reasons
2:59 the parallax effect is disabled on
3:02 mobile devices
3:03 and what we'll get is the parallax
3:06 images that we define
3:07 are then used as static background
3:09 images
3:10 instead so we still have a nice
3:13 beautiful website on mobile
3:14 but we don't get that full parallax
3:16 effect and the reason is
3:18 it uses a lot of computational power to
3:21 get that effect
3:22 so if we were to enable that on devices
3:24 such as mobile like an iphone
3:27 you'd really get a lot of jittering and
3:28 stuttering in the scroll
3:30 and your website wouldn't really be
3:32 smooth and we don't want that so
3:34 instead we fall back to static
3:37 background images
3:38 for mobile devices so here we are in the
3:41 parallax demo file that ships with the
3:43 parallax stack
3:44 and you can download it anytime from our
3:46 documentation portal as well
3:48 and this project file was is the exact
3:51 project file used to build that demo
3:53 website that we just looked at
3:55 so if we look at this first parallax
3:56 stack on the page
3:58 you'll notice that their settings are
4:00 set up into three distinct groups
4:02 first we have some setup we have the
4:04 setup for the desktop image and another
4:06 one for the mobile image
4:08 now there are three different types of
4:10 parallax effects that you can use
4:13 the first is cover body okay and this
4:16 allows you to
4:17 as we saw in the demo to have the
4:19 parallax effect
4:20 over the entire web page okay
4:24 the next is image only now this is the
4:26 default where you have
4:27 purely an image that will then do the
4:30 parallax effect
4:33 next is image plus content and that's
4:35 basically the image
4:36 and then you can overlay content on top
4:39 of that
4:40 now when you use image only or image
4:42 plus content you'll notice that there is
4:44 a minimum height
4:46 setting available and that defines the
4:48 actual minimum height
4:49 of the parallax area
4:52 now the bleed is a setting that
4:56 is useful for as you're scrolling
4:58 sometimes
4:59 the content can separate depending on
5:02 how fast you're scrolling the site
5:04 so basically the bleed will allow some
5:07 of the content to bleed
5:09 underneath the stacks below it and
5:11 finally z-index we'll be going over this
5:13 um a little bit later but this is
5:15 important when you're especially when
5:17 you're doing the
5:18 layered parallax effects next we can
5:20 warehouse our images
5:22 so you can either if you uncheck
5:23 warehouse images you can drag and drop
5:25 your images into the settings
5:27 or you know if you check it you can
5:28 define urls to warehoused images
5:30 and finally is the parallax speed
5:33 basically the higher this number the
5:34 faster the
5:35 things are going to animate okay the
5:37 slower the speed
5:39 the closer it is going to be to the
5:41 scrolling speed
5:42 so if you want more elaborate kind of in
5:44 your face animations
5:45 you're going to want to make this value
5:46 a lot higher okay or if you want more
5:49 subtle animations
5:50 you're going to make this parallax speed
5:52 lower next
5:54 the image settings are very obvious
5:56 right
5:57 you set your image um you define the url
5:59 if it is a
6:00 um a warehoused image or you can drag
6:02 and drop if you're not using warehouse
6:05 then we have alignment so we have
6:06 horizontal and vertical alignment
6:08 most of the time you're going to want to
6:09 use center center but depending on your
6:12 image and how your image is laid out
6:14 you may want to have left center or
6:16 right center or
6:18 right top or center top and so play
6:20 around with those settings to get the
6:22 alignment that you'd like
6:24 next is the opacity and that's the
6:26 opacity of the parallax image
6:28 so if you want maybe the background of
6:30 the site to bleed through the image or
6:31 something of that nature
6:33 you can definitely set this opacity
6:35 level to
6:36 something lower than 100 okay
6:40 and then we have the same exact options
6:42 for mobile now if you don't define
6:44 mobile images it is actually going to
6:47 use the desktop image
6:49 now however uh it will still use the
6:52 centering and alignment and opacities
6:55 for mobile
6:56 okay so now let's look at this layered
6:58 demo right i call this the holy grail of
7:00 parallax effects because it really
7:02 gets some really great animations going
7:04 very interesting
7:06 so you'll notice here
7:10 is that i have three parallax stacks on
7:13 the page
7:14 now when you set the parallax stack to
7:16 be cover body
7:17 there it doesn't show anything right but
7:19 what it does is it shows that particular
7:21 image
7:22 um inside the as the background if you
7:25 have preview background turned on
7:28 now because we have three you're not
7:30 going to see all three images
7:32 in uh edit mode because basically the
7:35 third one will overwrite and show the
7:37 background but we'll see them once we
7:39 are
7:39 inside preview if we look at the first
7:42 instance of the parallax
7:44 stack here on the page we'll notice that
7:46 i've added that brown
7:47 background image and then i set the
7:50 parallax speed to be 10
7:52 because i want the background to
7:53 actually be a lot slower than the
7:55 foreground
7:56 elements the next instance we have here
7:59 is i've added those dark green leaves
8:02 okay and then i set the parallax speed
8:05 to be 37
8:06 so it's a lot faster than that
8:08 background that brown background
8:11 and finally for the large green leaves
8:14 i've added my background image here and
8:16 i set the parallax speed to be 69
8:21 now another thing you're going to want
8:22 to make sure is that we properly set our
8:24 z
8:24 indexes if we notice on the
8:28 very first one i have my z index set to
8:31 zero
8:32 and that's for that brown background
8:35 then the
8:35 second layer i have it set that to z
8:37 index of one
8:39 and then the third background the one
8:42 that goes on the very top has a z index
8:43 of
8:44 two so the higher the z index
8:48 the higher up the stack that image will
8:51 be
8:52 so you can define the actual layers and
8:55 their order
8:55 by using the z index property
8:58 and as you see this provides a
9:00 beautifully layered parallax effect
9:03 now this effect really requires that you
9:05 do a lot of
9:06 planning and work with your images as
9:08 you notice here we have a simple brown
9:10 background that is solid
9:12 okay then we have these dark green
9:15 leaves which is a basically a png where
9:18 the rest of the image is transparent
9:20 except for the leaves
9:22 right and the same thing for these
9:24 larger green leaves
9:25 it is a png it is transparent except for
9:28 where the green
9:29 leaves are right so if you want to do
9:33 this
9:34 layered parallax effect you're really
9:36 gonna have to
9:37 um you know imagine what you want and
9:40 you're gonna have to do some graphics
9:41 work on your own
9:42 right um the stack isn't gonna create
9:44 these graphics for you you're gonna have
9:46 to do proper planning
9:47 and you're gonna have to create these
9:49 graphics to get the effect that you want
9:52 so there you have it you can see how
9:54 easy it is to implement this parallax
9:56 stack
9:56 i think that we really nailed the
9:58 simplicity of implementing such a
10:00 complex
10:01 animation now there are some caveats
10:04 right
10:04 and i talked about a few of them already
10:07 number one i'm not sure i mentioned
10:09 is that inside preview of rapidweaver
10:12 you might notice that the animations are
10:14 a little
10:15 jittery okay if you were to preview
10:18 inside a browser like chrome or safari
10:20 or firefox
10:21 you'll notice that those animations are
10:22 a lot smoother right
10:24 um not quite sure why rapidweaver the
10:27 animations aren't really right
10:29 but it's a lot smoother when you publish
10:30 your site and when you preview even
10:32 locally inside a browser
10:33 so uh that's one thing the second thing
10:36 is
10:39 i want to make sure that you don't
10:41 really overdo this animation in your
10:43 websites right i mean this is a really
10:45 great thing
10:46 um and the animation is is powerful and
10:49 i've seen
10:50 parallax effects just gone crazy right
10:53 so i think sometimes especially with
10:55 stuff like this
10:56 is that less can a lot a lot of times be
10:59 a lot
11:00 more right so the maybe the less or the
11:04 more subtle animations
11:05 were really adds the small details to
11:08 your site that
11:09 make the user go oh wow that's really
11:11 great did you see that background move
11:13 right but if you have a site that's like
11:15 moving all over the place
11:17 and kind of gives a person a headache
11:19 whenever they're they're trying to you
11:20 know
11:20 read something right it might be a
11:23 little much
11:24 so pr just have a precaution and while
11:27 the stack is great
11:28 um try not to use it too terribly much
11:32 in terms of you know stacking them too
11:34 much and making things
11:36 too crazy okay and lastly
11:40 um while the stack provides some great
11:43 animations for your images
11:45 it doesn't do the image work for you
11:47 right
11:48 we saw in that layered animation now you
11:50 can see the images they're they're
11:52 actually
11:52 baked in the demo project so you can you
11:54 know copy them out and see how they're
11:56 done
11:57 right um you're gonna have to plan right
12:00 you're gonna have to plan what images
12:01 are gonna work
12:02 properly especially if you want that
12:04 layered effect right
12:05 because you're gonna want to have some
12:07 things transparent on top of other
12:09 things you have to plan the z
12:10 index and how they kind of you know go
12:13 on top of each other
12:14 so there is some planning that you're
12:18 going to have to do
12:18 if you want to use some more some more
12:20 of the advanced features of the stack
12:23 now if you just want you know a simple
12:25 you know maybe a sunset image or
12:28 you know a picture of a picture of your
12:29 office or something like that throw it
12:31 in there in image only mode
12:32 you know that's pretty much drag and
12:34 drop um not too much planning going on
12:38 but for some of the more advanced
12:39 layouts you're definitely going to have
12:41 to plan
12:42 so just a precaution something to think
12:44 about
12:45 i hope you enjoy this stack i hope that
12:48 you use it
12:49 uh to your best abilities to make
12:51 fabulous websites i know you can and i
12:53 can't wait to see what you build with it
12:55 so thank you very much everybody have a
12:57 great day enjoy parallax
12:59 and bye oh wait okay
13:02 before i say goodbye i made a promise to
13:04 somebody i promised there'd be a hat in
13:06 this video
13:07 i promised the next video i did i'd wear
13:09 a hat so before i go everybody
13:12 here's a cool hat have a great day happy
13:16 weaving go forth and make your websites
13:18 great"}]