Transcript

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