0:00 don't know
0:06 [Music]
0:09 hey everybody Joe Workman here so in
0:11 this video we're going to be looking at
0:12 The Parallax back stack that is a part
0:15 of The Parallax 2 stack suite and this
0:17 is The Parallax 2 demo file and this is
0:20 The Parallax back page inside that
0:22 project essentially both pages are the
0:24 same I just implemented the basically
0:27 the stacks twice so you can kind of see
0:29 different implementations now you might
0:31 ask why are there two well essentially I
0:35 think most of the time Parallax image is
0:37 probably going to be better
0:38 um it is a little bit more performant uh
0:41 Parallax back it's animating the
0:43 background image and that causes a
0:45 little bit more potential staggering
0:48 um but I left both Stacks in there
0:50 because I thought that there were some
0:52 layouts that just work better with
0:54 Parallax back
0:55 um there's just more options in terms of
0:57 how scaling the background image works
0:59 and uh yeah it could work better in some
1:02 situations even though the the animation
1:05 performance could be better using
1:07 Parallax image okay so with that covered
1:11 let's go ahead and dive into the stack
1:13 just like Parallax image hope you watch
1:15 that video when you add Parallax back
1:17 you can add in your content to the stack
1:19 it is completely optional you don't have
1:21 to have content but that content will be
1:23 centered on top of the image
1:26 okay now let's go dive into the settings
1:28 here
1:30 um just as Parallax image we can go
1:31 ahead and supply three different images
1:33 uh drag and drop either their first
1:35 small medium and large devices now these
1:37 do inherit so if I don't Supply a large
1:40 or medium basically the default will
1:42 always be small so if you only want to
1:44 use one image for everything go ahead
1:46 and use just the small image but
1:48 depending on your layouts you might need
1:51 to have different sizes or maybe even
1:54 different aspect ratios because your
1:57 content on large might be you know
1:59 landscape whereas on portrait it could
2:02 be or on small devices it could be
2:03 either square or maybe even portrait
2:06 right so you might need to supply
2:07 different aspect ratio background images
2:09 in order to properly get a great
2:12 Parallax effect on all devices
2:15 now next we also support Warehouse
2:17 images so you can actually put in URLs
2:20 to your uh images or if you're using
2:22 total CMS you can use total CMS macros
2:25 in here as well so that allows us to
2:27 easily integrate into total CMS
2:31 now next up is scales so depending on
2:34 what your image is you might need to
2:36 scale the image up if you are not seeing
2:39 animations so here we'll look at the
2:41 animations if you're if you set your
2:43 animation settings and you're not seeing
2:44 the image move the way you would expect
2:46 you might need to scale the image up
2:48 okay so this basically zooms the image
2:51 in so there's space to actually animate
2:53 it
2:55 so let's go ahead and if we look at
2:57 animation we can we have some simple
2:58 stuff we could do top bottom let's go
3:00 ahead and actually preview this page
3:03 um so bottom to top we'll see that that
3:04 is pretty much probably what most people
3:06 are going to use you can also do top
3:08 bottom which gives us a much more subtle
3:11 kind of almost a fixed position
3:14 um animation effect
3:16 uh then we can do left to right
3:19 and then right to left and then this one
3:22 is left to right okay so we can do
3:25 different directions then we also
3:26 provide custom which allows you to
3:29 basically Supply different percentages
3:31 and this is where you can actually get
3:33 some diagonal
3:35 um so if you mix and match sort of I'm
3:37 going here from fifty percent to zero
3:38 and then zero to one hundred percent
3:40 basically that's X and Y coordinates
3:43 okay so we are animating the background
3:46 position for those that are aware of
3:47 background position so
3:49 um we are going from fifty percent zero
3:52 percent all the way to zero percent
3:53 fifty percent so that's kind of how uh
3:56 that worked um but to keep it simple you
3:58 can just do these animation these
4:00 pre-built animation steps um in here to
4:02 get perfectly top down so on and so
4:04 forth
4:05 next an example is providing an overlay
4:08 so in this example here I turned on the
4:10 overlay and added a background color
4:12 which gives us some separation between
4:15 The Parallax image as well as the
4:17 content in this case it's really great
4:19 because without this overlay the text
4:21 will be drowned inside the image it
4:23 would be hard to read so that adding an
4:25 overlay really makes this content pop
4:28 and last but not least we have minimum
4:29 height so that's basically the height of
4:31 The Parallax container itself and we
4:33 provide minimum height options for small
4:36 medium and large devices
4:38 and then last but not least for all
4:40 those Foundation 6 and CSS users we can
4:43 actually provide a custom class to do
4:45 special things inside Parallax such as
4:47 maybe an inset Shadow or other amazing
4:49 things that we can do with CSS and
4:51 swatches
4:59 [Music]"}]