Transcript

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