How to Combine Animations and Parallax in Divi for Unique Designs

well hey the V nation and welcome to a brand new Divi use-case livestream where each week we show you how to add new design and functionality to your Divi websites and today we have a special one for you I'm going to be showing you how to combine animation and parallax to create some unique designs in Divi for more information please check out the video description below for more on this blog post use case and there's a blink to the blog post as well so let's go ahead and jump in and get started so let's do a quick check welcome everyone if you can hear me give me a thumbs up if I'm coming in clear for you guys and I'll go ahead and tell us where you're from and hopefully we can answer any questions you guys have as we go along this is going to be a unique one so I hope we learn some things along the way and as you can see on my screen right now I have the blog post that goes along with this use case up and running for you to see it went out live on our blog elegant themes for it slash blog this morning so it'll be there for you later on and we will also have this live stream video available for you afterwards as well so if you miss out on anything we'll make it available and attach it to that blog post as well it also be available in our YouTube channel and on Facebook as well alright so here's the blog post let's do a quick looks like I'm coming in I got some thumbs up from Fred and Inder welcome thank you for that welcome Amy let's go ahead and check out on Facebook look like we have a thumbs up I think we're good to go all right so here's a little a preview of where we're gonna be going today with this use case I'm gonna reload this page and you'll see that there's going to be an animation initial animation and then there's going to be the parallax in effect as you scroll down the page so the two of them combined for a unique design let me go ahead and refresh show you what I'm talking about so as you can see the animation comes in and then as you scroll down the page you can see the parallax image this main image over here on the Left has a matching image that the same image rather as the image used in the background here so on the initial animation you'll see that it comes in like a regular image but as you scroll down the page it's going to have the parallax effect so it's kind of like a little magical thing that happens there it's pretty cool and then over here we have some text modules that we've added you know some other parallax methods to the images as well and as you scroll you can see just a very unique design looks very elegant and I'll show you how to do that there's a next design below I'm going to refresh this one this is a little different as you can see the initial animations of the content come in and then the background comes in later let me show you that one again and then as you scroll of course the parallax is in effect and the last one here is just using some blend modes they're in a unique way to give you a unique design here on the front animation you can see that images are a different color and then the background image comes in real nice effect there so I'm going to show you it's actually pretty easy to do once you have all the elements set up the content ready to go so that's where we're heading pretty cool things up ahead so stay tuned if you're just joining us I do want to welcome you to this week's divvy use case live stream and today I'm showing you how to combine animation and parallax and debbie's for some unique designs and of course check the video description for more info and let's go ahead and continue we're gonna get started here with a blank slate here building on the front end in Divi the only thing you really need for this tutorial are some images I'm actually using images from the life coach landing page and those can be accessed on our website at elegant themes com4 slash layouts to see all those layouts and they're also already built in to Divi as well so you can access any of those layouts from the Divi Builder from the library alright so let's go ahead and get started the first thing we're gonna do Oh before I forget on the blog post if you want to download these examples that we're building today for free you can get a download on that blog post as well you'll get a JSON layout that you can import and you can see how these were built without actually going through the entire process yourself alright so let's get started with a blank slate here let's go ahead and add a new row let's add a let's go ahead and add a two column row here and before I get into my modules or adding any modules I'm going to update my row in my section settings the only thing I'm gonna change for my section is I'm going to take out this custom padding here to do that I'm just gonna drag it close there take out my padding and then for my row I'm just going to also set my padding to zero in the top and bottom and let's go ahead and add our background image now this is going to be our parallax image in our background for this row so like I said before I'm gonna add the life-coach in one of the images from the life coach layout this picture here and we're gonna you know it's a good photo to use because we can kind of frame out the portrait of this lady here as a kind of a design element and then as we do the scrolling you know the parallax will come into effect quite nicely so to deploy parallax I'm just going to bring this up a little bit click use parallax yes and then I'm going to use CSS parallax now this is a must for this design to work you have to use the CSS parallax method and there's actually if you have any questions about how parallax works and what's the difference between CSS and true parallax methods there's actually a a blog post that I did quite a while ago on basically the ultimate guide on understanding parallax and just search parallax on our blog and you'll find it and that'll kind of run through the difference is the main difference though I'll just highlight it here for you is that the CSS parallax method basically gives a fixed static image in the background that will stay in place no matter the size of the element that that kind of contains it so just as an example this if we could will see this a little bit better as we go along but the parallax if I go back to our working example here as you can see the image is being filled in the entire back of the browser window so it's automatically going to just kind of go full width and behind there and so it stays static as you scroll down as you can see that background image isn't moving at all and if we add a pair of CSS parallax to this module here the background of this text module here it's actually you know gonna position the image even though it's a it's it's another version of that image it's positioning it in the exact same spot static behind the content so it looks like it's it's the same image being used but it's actually not that's why we get the effect that we have on the initial animation that it looks like a regular image when it first animates over but it's actually another version of that image using CSS parallax I hope that makes sense the true parallax wouldn't work because it's using a different method of having that image move as you scroll up and down all right continuing on let's go ahead and add our image here we do want to make it full width so I'm gonna go to my sizing and go to width and let's do 100% width and then the same for max width I'm just going to make it 100% for my padding I'm just gonna add for my row here let's do 10 PW and the same on the bottom so let's I just need some spacing there and let's do on the right and left actually I don't need it on the bottom so imma unlink it and take it out on the bottom there but I do want some spacing on the left since it is full width let's do 10 B W and V W is the viewport width so it's gonna be basically 10% of the viewport width on both sides there now I'm ready for my module so I'm going to add my text module over here on the left side or left column and let's add some content actually going to add my own content basically what I'm doing here is I'm gonna add a you know a paragraph text here body text with a break right there and then in the middle of hi and I'm Jane and so that's going to give us the break that we want here in our text and then I just want to link there at the bottom and about me link as you can see it kind of hovered has a hover effect when I hover over the text module so there's my content and I do want to add a background image so let's do that and I'm wanting to use the same background image that we used for our row background so let's get that one same exact one and as you can see the default version you can actually see it the difference there but if I turn on CSS parallax it basically looks like it disappears but it's actually being positioned the same way as the the one in the background is so it looks in the same spot which opens the door for some unique design capabilities especially with animation all right so let's scroll down here and then let's get to our text font let's go ahead and use for my text font we'll use fire sans and let's make it a lightweight font make sure it's white and let's make it 70 pixels sorry text is gonna be 70 pixels and let's adjust our line height to 1e m there you go and let's go ahead and adjust our link styles let's go to our link tab here and let's make an underline make it white oh that's my line color so let's do the white text link text color is white let's make the size 30 pixels shrink it down some and let's give it a letter spacing of 2 pixels and if you wanted to you can give your link text a:hover color let's go ahead and do that there you go it takes care of our link now let's go ahead and give it some padding here to our text module let's give it a 10% excuse me 20% top padding and a 20% bottom padding and you know 10% left and right so basically this is your opportunity to frame the area that you want to have the animation or the text module overlap the image so in this case we're trying to you know frame the the the lady's portrait area here so let's go to our border width to really get our frame where we want it so I'm gonna add a border width of 20 pixels and we're gonna make it white so there's our frame now we're ready for our animation style let's go ahead and so for this animation we're gonna use slide and we're gonna slide it to the right so animation Direction is right there you go and the duration let's increase it to 1500 milliseconds slow it down just a tad and let's do our animation intensity bring it up to 80% and our opacity let's start it out at 20% there you go looking good let's go ahead and save it out and let's check out what it looks like on the live version there you go now I can't really scroll because I don't have any other content so let's go ahead and I just going to add some section some bottom margin to my section just temporarily so that I can have some scrolling capabilities to show you alright let's refresh there's my animation and there's my parallax effect alright pretty cool so far let's go ahead and add our other text elements here let's go ahead and add another text module and for this one we're actually just going to add the text my blog it's kind of like a kind of like a navigational element or like a featured element like where they can click on and we're going to add a background image to this text module let's go ahead and add another image from the life coach there we go that portrait there and we're going to use true parallax for this one mixing it up a little bit and we're gonna need to add you know the same font styles as we did before or the same text font as before let's make it all caps and let's Center it in our text module make sure it's white and let's give it a 10 pixel excuse me a leave it the text size default but do 10 pixels of letter spacing get a lot of spacing in those letters and let's go ahead and set a max when for this one so I'm gonna set my width to 320 pixels and then I'm gonna set a max width to match it so 320 pixels max width and I'm going to Center the module and now I need to get some spacing there so let's go over to my spacing add a top margin of negative 5 V W that'll bring it up some and let's get some bottom margin to create some space for the next text module we're but adding bright below it and then for our mobile let's go ahead and change our top margin to 3 V W all right let's go to our desktop padding and change it to 70 pixels on the top since we're using using excuse me a fixed width that means it's our a pixel width it's going to be fixed so it's not going to be adjusting you know with the browser the container with as you you know shrink your browser or whatever but it's small enough that it'll still look the same on mobile as well so no worries there allows me to get the exact placement of the image that I want so that looks good let's go ahead and give that same border as we did for our first text module 20 pixels and then white all right so as you can see as I scroll up and down you can see that true parallax in effect there as a more gradual movement and then let's go ahead and add our animation we're going to do another slide animation set I'm gonna go down and we're gonna delay it by 200 milliseconds all right let's go ahead and save that out jump over to my questions here all right very good looking like there's not really any questions here we have something from Amman or MN please inform us at least half hour before next live before live next time okay so yeah these live streams good question will come normally every Tuesday at 3 p.m. Eastern Time and also you it's always good to subscribe to our YouTube channel and Facebook so that you can get notifications whenever we have a live stream that's going to help you out there just in case so you don't miss out on the live stream but good question or comment ok let's continue on let's we're gonna add another text module under here with a parallax background it's the last one as far as our content goes and let's go ahead and jump start the design by duplicating this one opening up the text module settings and let's go ahead and change the background actually now we're going to keep the same background we're just going to change background image we're just going to change the parallax method to CSS and as you can see it's going to look quite differently and let's go ahead and go over here to our width and let's change the width from 320 to 240 make it a little narrow and then 240 max width as well change our alignment to left alignment and then let's go to our margin and let's update the mark the bottom margin to zero and let's get some padding here we're gonna actually add more padding so I'm gonna add create 170 padding and the top and the bottom and the left padding this is a unique way to you know get these the the text here to show up vertically is to go ahead and you know add padding so that it runs out of room and then they start to stack vertically I'll show you what that looks like here so when I add 95 pixels of left and right padding you'll see that my text now displays vertically in my text module there and because I have a fixed width and height that will stay in place all right looking good so far let's do an animation for this text module we already have the slider animation that we inherited from our previous text module all we need to do is change the direction from down to up there you go let's save that and that'll take care of our Oh looks like we are still in need of some spacing here good let's change our margin that's what we're doing wrong here let's take out our negative 5vw there we go yep that looks right let's go ahead and check out what it looks like on the live version there's my animation and there's my parallax effect all right so that takes care of our first one before I make a few tweaks to it to show you how to do the next one let me welcome all of you who are joining us today thanks for tuning in today we're actually showing you how to combine animation and parallax and Divi for some unique designs and so please be sure to check the video description for more info on this use case livestream today and check out the blog post that goes along with it as well and if you don't have Divi yet I've included a link to our Divi product page so you can find more information on the Divi theme let's get back to it this next one is going to involve you know adding a a background excuse me a separate row to serve as our main background so that we can bring it in after the the content loads and I'll just show you what I mean by that on this one here so if i refresh you'll see that initially the content comes in and then the background so that that second wave of animation is that row being pulled in and so in order to do this I'm going to need to create a separate row and dedicate that one just for my Barrett but my background alright so to do that I'm gonna go to my wireframe view mode here as you can see this is my section my row and my modules here let's go ahead and create a let's duplicate the row but I'm not going to need these modules so I'm gonna delete the modules here so I all I really want is that row with my background image in there and then I'm going to update my row my top row settings to have a fixed height because by default it's not gonna have any height because I have no content so I'm gonna give it a fixed height let's make it 900 pixels and on let's do on tablet it's gonna need to be longer because it's gonna the contents gonna stack on top of one another so I want to make sure it has enough room give it a mm height on tablet then I'm going to get some spacing here I don't want any padding on this one so I'm going to take out my top and bottom padding and I don't need any padding for my right and left so we're good there but I do want to add an animation for my my row background so I'm gonna add a slide animation that goes to the right and I want to have a delay because it's gonna happen right after my my modules animate so I'm gonna add a delay of about 18 or excuse me this is my duration let's let's make our duration to 1250 milliseconds and our delay is going to be 18 hundred milliseconds of course you can play around it with with the settings as you like for your own needs and let's go ahead and give it I think that's it for the top row let's go ahead and save it out and let's deploy the desktop view mode you can see there's my my row with just my background image that has a fixed height of 900 pixels as I scroll down you see my second row with all my content in it so now all I need to do is get rid of my background image for this row and then bring it up to overlap this row up here so this is how I'll do that let's go down to this sorry let's go down to my second row below here and update my row settings and I'm gonna give it a margin it's gonna my spacing and you remember the height was 900 pixels so I'm gonna use negative margin to bring it up 900 pixels and so now it's going to perfectly overlap my row above it you know make sure on tablet I give it an overlapping of mm to match there we go now we want to take out the background image for this row because we already have one take that out okay let's go ahead and save it out show you what that looks like so far all right well refresh the page you see our content comes in and then our row comes in afterward and we still have that parallax effect but what you could do now since we have you know basically a white background that's actually the section background so we can change that if we want it to to add another color element on the initial animation so let's open up our second row with all of our content here and let's add a background color just to show you what I mean there you go oh that's my fault I'm adding it to the wrong spot sorry I'm still in the row setting so I need to get out of there and then you go to my section settings so I'm gonna go to my wireframe view mode open up section settings and then add my background color there all right so now save it out and let's refresh there you go so you see my section background colors shows up right before my content or my background animation and then one last thing I want to show you that looks really cool is to just add a blend mode and an additional animation element to our row so right now let's go to our the second row here I'm going to open up the settings for my second row with all my content here and I'm gonna add another animation to the row as a whole as you know we've added them to each of the text modules individually now I'm going to add an additional animation style to the that contains all of them and by combining those two animations you can kind of get a unique animation effect when those text modules come flying in so to do that I'm going to add a slide actually let's just do zoom zoom and it's and then for my blend mode let's just go to my filters here let's go to the blend mode and I'm going to add the blend mode luminosity and you can see that my image is over here are basically being blended with the background image that is behind it that's why it shows up gray like that so it's basically preserving the luminosity of the image that sits behind it so the two images are being blended together for a unique effect so let's see how those two look you'll you'll see that that luminosity really well on the initial animation you see how it blends with the background image a color rather and then it blends with the background image as it comes in and if you want to let's go ahead and check out what that looks like on an mobile here it's going to shrink it down all right there we go so let's go ahead and refresh see what that looks like all right looking good and that's pretty much it guys let me go ahead and refresh again show you the animation and then scroll it's going to check to see if we have any questions alright so looks good um Amy says that she is new to Divi and learning so much thank you for the comment glad I could be of help today and please make cloths closer please make more videos like this one with real examples of how to apply Divis powerful features in real life examples that's what we're doing for these live streams so I hope that this that you come back next Tuesday and continue to view these live streams with us hopefully you'll continue to learn some cool stuff alright so I think we're good to go alright that's it for this tutorial this week please be sure to subscribe to our blog newsletter and subscribe to our YouTube channel and like us on Facebook that way you don't miss out on any future live streams or freebies that we give away on a weekly basis and our next live stream is actually on Friday at 3 p.m. Eastern Time it's the weekly WP roundup so you'll want to check that out and we will be back here next Tuesday with another Divi use-case live stream at 3:00 p.m. Eastern thanks again for watching and we look forward to seeing you in our next video you

Channel: Elegant Themes

Views: 4,885

Keywords:

Id: nTmRNKjtEUg

Length: 39min 13sec (2353 seconds)

Published: Tue Aug 06 2019