0:00 don't know
0:06 [Music]
0:10 hey everybody so in this video we're
0:11 going to be looking at The Parallax
0:13 image stack when you purchase Parallax 2
0:15 you will get a parallax image and
0:17 Parallax back in this particular video
0:20 we're going to be looking at The
0:21 Parallax image stack so when you add The
0:24 Parallax image stack to the page you
0:26 will notice that there is a Stacks Drop
0:28 Zone this allows you to add easily add
0:31 content whatever content you want and
0:33 that content will be automatically
0:35 centered on top of the background images
0:37 that you provide now the content is not
0:40 required you can actually have just The
0:42 Parallax image if you just want it there
0:43 for an accent you don't have to have
0:45 content within it
0:47 but now that that's explained let's jump
0:49 in to look at some of the settings
0:50 so let's look at at this demo file uh
0:53 this is the demo file that ships with
0:54 Parallax 2 and you'll notice that inside
0:57 the settings we have the ability to to
0:59 Define three separate images we can
1:01 Define images for small medium and large
1:04 now if you don't provide large or medium
1:07 it will actually use the small as the
1:09 default so if you just want to use one
1:10 images for all devices you can do that
1:14 so if you provide a medium it'll use
1:16 that for medium and large devices and
1:19 then if you provide all three it'll
1:21 basically do a unique image for all
1:23 three devices so they will inherit the
1:26 medium and large are optional okay
1:31 now you can also provide warehoused
1:32 images so you can provide an URL to an
1:35 image if you want to do that or if
1:37 you're using something like total CMS
1:38 you can use your total CMS macros in
1:40 there as well so super powerful and
1:42 useful there
1:44 now below our image is we can actually
1:46 Define an ALT tag for SEO so this does
1:49 use an actual image on the page so that
1:52 we can actually you know add an ALT tag
1:54 for SEO purposes
1:56 now the next setting here is auto scale
1:58 and we'll look at that in a little bit
2:00 I'm going to skip that we'll show you
2:01 actually live kind of what this does for
2:03 us
2:05 the vertical and horizontal these are
2:07 our
2:08 uh settings to control the direction of
2:11 our animation so vertical is you know
2:13 negative or positive values either
2:16 animated up or animate it down and then
2:18 horizontal animates it right or left
2:20 depending on if it's positive or
2:22 negative now if you set either of these
2:24 to zero okay it'll actually
2:27 um disable that direction and then it
2:30 actually unveils a couple little options
2:33 for alignment now normally you're never
2:35 going to set both of these to zeros
2:36 probably one or the other so like if I
2:38 only wanted vertical animation I would
2:40 set horizontal to zero and then we can
2:42 actually set some alignment options
2:44 similarly if I wanted left to right or
2:46 horizontal animation I could disable
2:48 vertical by setting it to zero and then
2:50 I have additional alignment options
2:52 we'll look at that in a little bit
2:54 now next up is we have an overlay option
2:56 and that allows us to add a little bit
2:59 of contrast between our image and our
3:01 text depending on the image that you add
3:03 inside of Parallax image this overlay
3:06 can really make your content pop
3:08 especially text
3:11 and then last we have the ability to
3:13 customize the height of The Parallax
3:15 container and these height settings are
3:17 based on the height of the browser
3:19 window and you can set different sizes
3:22 for small medium and large now what's
3:25 important to note here is this is a
3:26 minimum height so if your content let's
3:30 say breaks down and it actually ends up
3:32 causing the container to be big it'll
3:34 actually it will allow the container to
3:36 grow these are just the minimum height
3:39 okay and again A lot of times this is
3:42 perfect but it is great that it's a
3:44 minimum height so if maybe on small
3:46 devices if you have a lot of content it
3:48 will allow that container to grow and it
3:50 won't chop off your content
3:53 and last but not least for all
3:54 Foundation six lovers and CSS lovers out
3:57 there we have custom classes that you
3:59 can add to The Parallax container to do
4:01 all kinds of maybe other things like
4:02 maybe add a drop shadow or do some other
4:04 Advanced things that aren't available
4:07 out of the box inside parallax
4:10 okay so let's go ahead and play around
4:11 with um some of these animation options
4:13 here and we're going to play around with
4:15 this container and just for fun we're
4:17 going to go ahead and increase the
4:18 height of this
4:19 um so I'm going to go ahead and set this
4:20 to like
4:21 um 80 percent
4:22 okay so now I made that to be 80 percent
4:26 and oh I if you notice I disabled
4:29 vertical and horizontal they're both set
4:31 to zero so that is now not animating
4:33 anything so not too exciting there let's
4:35 go ahead and change that let's go ahead
4:37 and set uh vertical okay so now I'm just
4:40 going to animate vertically
4:42 so if you notice that now the larger the
4:45 number or the farther away from zero the
4:48 more movement you are going to get so if
4:50 I set this all the way to 50 we're going
4:52 to get a lot more movement than if we
4:55 set it closer to like nine or ten
4:57 percent right so very if you want a
5:00 subtle animation or do you want like a
5:01 lot right
5:05 now let's have a look at these
5:07 horizontal alignment options here so
5:10 right now I'm only uh animating
5:12 vertically so I can go ahead and right
5:13 now it's set to be left aligned which
5:15 means over here on the side that's the
5:17 very left part of my image
5:19 and if I go ahead and do Center
5:21 alignment and it's now centering
5:23 aligning the image and if we go left
5:26 actually you know I just realized
5:28 something I have Auto scale turned on
5:31 which Auto scale when you have only
5:33 vertical alignment it's going to fit
5:35 that image to always fit if I had to go
5:37 ahead and turn this off okay we'll see
5:39 that a it's zoomed in on the image and
5:42 that's because what it's doing is it's
5:44 actually displaying the native
5:46 resolution of that image this particular
5:48 image is about 2 000 pixels wide
5:51 so um it's going to zoom in it's going
5:53 to show the actual native resolution of
5:55 the image and if you notice here it's
5:57 left or right aligned so this is the
6:00 right side of the image if I go ahead
6:01 and Center align that we'll see it's
6:03 centered aligned if I left align it then
6:05 that image is going to be left okay and
6:08 that brings us back to this Auto scale
6:09 image what does that do so Auto scaling
6:12 will make sure that the image fits
6:15 widthwise into the container okay now
6:19 now if we have horizontal and vertical
6:21 uh animation going on so let's turn this
6:23 on
6:24 depending on your Image Auto scale could
6:27 work great so in this case I have a
6:29 square image actually it's actually a
6:31 really large 2000 by 2000 pixel image
6:34 um and so Auto scale works okay I don't
6:37 get the image up if we notice just
6:39 around there it gets cut off a little
6:41 bit right so in this particular case
6:43 Auto scale either I have to provide a
6:46 larger image or Auto scaling needs to be
6:48 adjusted okay so um also I can maybe
6:52 turn off or turn down that horizontal
6:55 animation so as you see up it's almost
6:58 there right so depending on on your your
7:02 image that you're using Auto scaling may
7:05 or may not work depending on the image
7:07 that you have okay
7:11 um so let's have a look at if I turn off
7:14 vertical
7:16 and then I turn on horizontal scrolling
7:20 so here we'll notice that when I set
7:23 vertical uh to zero it gives us some
7:26 vertical alignment options and I can set
7:28 that to either align to the top of the
7:29 image the middle or the bottom just like
7:31 we saw with the horizontal
7:33 and then I can set my horizontal
7:35 animation here so it's going to animate
7:38 uh you know it's going to animate
7:39 horizontally
7:41 um based on that
7:49 [Music]"}]