How to Create a Dynamic 3D Mousemove Animation Effect in Divi

so so [Music] [Music] well hello divi nation and welcome to a brand new divi use case live stream where each week we show you how to add new design and functionality to your divi websites and in this live stream tutorial we're going to be showing you how you can create a dynamic 3d mouse move animation effect in divi and don't forget to check the video description for more info on this use case including a link to the blog post that goes along with it also if you don't have david yet i'm going to include a link to our divi product page so you can check it out for yourself so without wasting any time let's go ahead and jump in and get started all right so welcome everyone glad that you are joining us for this live stream and uh just to give you a little well actually before i give you a heads up on what we're going to be doing welcome everyone i want you to make sure and let you know that you can let us know if you can hear me number one in the comments if my stream's coming in loud and clear give me a thumbs up if you can also let us know where you're from uh that's always good to know and ask any questions that you want to ask along or as we go along so that we can get those answered for you if i can't hopefully someone else can on the channel and excited to get started here let's see who we got joining us um uh thames hello hi good morning it's morning over there wherever you are um nice to have you uh fax corporation hello hello and uh uh fast corporations off the ivory coast very good west africa wow glad for you to be here divvy bringing us all together like this always fun i am over here in houston texas area i don't have a houston texan accent at least i don't think i do jay welcome from florida and israel welcome gave me my first thumbs up that means you can hear me hopefully and uh steven from new york and joshua from buenos aires oh i could use a good steak from there right about now uh bertrand from south france welcome looks like we are slowly but surely gaining some more visitors here so let's jump in and give you a little sneak peek if you're just joining us i do want to welcome you to this week's divi use case live stream and today we're showing you how you can create a nice dynamic 3d mouse move animation effect in dibi that may sound like i'm a mouthful but a lot of cool features um this is a really cool animation effect let me give you the little preview here so here's the final product um this um you can see my mouse is outside of the little hover container here so when i move it into my space where i'm going to activate my animation you can see now as i move my mouse cursor around the page or over the element you can see that it's moving and has a nice little pop-out 3d effect on those elements inside that card there so a few things happening there pretty cool right and when i exit of course it'll snap back into place and so this is a cool way to you know feature some products uh this little divi bike example does not exist although it would be a cool product to have i guess um but this is the final product we're aiming to achieve here uh there's a button down here you know this is all you know still clickable and everything if we want to click it uh so that's where we're going that's what we're building uh we'll uh the design in and of itself if you're new to divi uh will be cool for you to learn this is some just some great you know responsible design practices to build something like this even if you don't want all the bells and whistles and hover effects that we'll be doing uh using some uh jquery but uh so excited to teach y'all some stuff maybe learn from you guys as well and let's get in let's get cracking all right so i'm gonna get started with a new page here using the divi builder on the front end with a regular section i'm going to add a single column row to get started so and let's see i don't i don't think let me check here all right uh yeah i'm not gonna uh add any modules just yet we will add those modules but i just kind of want to set up this the section the row and the column first before we actually start building our elements within the column so the section i'm just going to give open up my section settings here and all i want to do there is give it a background so that settings modal is a bit large let me go ahead and shrink that up bring it to the right side and let's give it a background color just because white is sometimes boring okay there's my section background color and do i want to do anything else to the section yeah let's add some spacing so i'm going to be using uh the vh length unit for my padding here the vh is relative to the viewport height so that means if i like shrink my page or my browser vertically it'll kind of adjust vertically that kind of keeps everything nice and responsive vertically and that's good to use whenever you're adding top and bottom either margin or padding stuff like that keeps everything in view as long as it's as long as it can um vertically so there you go so top and bottom padding a 7 vh for the top and bottom padding on the section save my section settings that's it for that let's go ahead and do the row settings so this my row settings or my row rather is going to serve as my hover container uh what is a hover container well that is this area going back to my finished product here you can't really see it but when i get to this point where the animation is engaged or activated um that little section around this uh the the actual white card is actually the column but that area around it is the the row so i'm basically going to create that hover container which is basically going to serve as the place where i hover when i hover over my row or anywhere within my row is going to activate our animation effect so that's why i'm calling my row the hover container so i'm opening up my rows settings and let's go ahead and go to design and give our row a custom gutter width of one that's just going to take out any margins between columns we're only going to have one column but also it's going to take out any bottom margin between modules as well um also let's do a width of 100 percent and so but i do want to set some max width and i'm going to do responsive um settings here because i want to set my max width on desktop to be 70 and let's do on tablet i want my row to be 60 percent and then on phone let's just do 50 something like that all right that's good and let's go and go back to my desktop view uh down to my spacing let's do a padding of 7vh in the top and bottom as well for my row and so basically uh i want to make sure just to give you an idea i'm not going to keep it but just temporarily i'm just going to add a black background so you can see that's the row area so any i want to leave some space outside of my roads so that i can have some you know space for my cursor to move that won't engage the hover effect so just keep that in mind whenever you're sizing your row or hover container take that out all right so let's go to my design tab and i think i got everything i want oh let's go to advanced tab now for my row settings i do want to give my row a custom class and we'll call it e t e t dash hover dash container and under my custom css um i guess this is help this is going to be helpful for um kind of keeping my column aligned both vertically and horizontally kind of keeping it centered um using display flex so i'm just going to paste this code in here let me just show you what that's all about so there it's just a display flex the line item center and justify content center so that's just going to make sure my column stays vertically and horizontally centered within my row why am i doing this because i'm going to actually give a max width to my column which is kind of like not the norm so i want to make sure since i am going to shrink down my column to a set width or a set max width i want to make sure that it stays centered so i'm just kind of thinking ahead there and i'm going to save it out so that's my row settings now i am ready for my column settings now before i do that i'm going to open up my settings and you can't see it because of my face down there in the right bottom right but i'm going to pull my settings menu over here and then i'm going to open up my layers view right there and i'm just going to keep that open because i like it open allows me to select stuff a lot easier okay and let's open up everything so right now we have a section a row and a column so i want to uh open up my column settings for my one column i have and let's go ahead and add a background color and we're going to use white and we're not seeing anything because i have no content within my column so the white will show up it will eventually especially when i add some padding which is what i'm going to do next under the design tab let's go ahead and add some column padding i'm going to do the same 7vh on the top and bottom now you can see my white column show up there and on the left again we're going to be adding some content to this column so i'm just going to make sure and have some proper spacing around it let's do five percent on the left and right of my column and scroll down to my border options and i'm going to give it some rounded corners i'm going to do 30 pixels and there you go you can see how it's rounded there uh just a little uh s tip for you uh when you add rounded corners uh in css it's you know uh i think it's what is it border radius you in divi it's going to automatically kind of hide the visibility of the elements outside of the box so keep that in mind because we're gonna have to make sure that the overflow is set to visible uh for this effect to work if you're confused you won't be later on hopefully so just bear with me uh so rounded corners are going to be 30 pixels uh and let's just add a box shadow to add some depth there because we're gonna make a 3d effect it's always good to have a box shadow let's select that one and let's go ahead and do zero pixel vertical uh box shadow vertical position zero pixels as well uh the blur strength let's kick it up to 80. get a lot of blur strength there and i'm gonna tone down that shadow color let's do a tone down version um give some opacity to the black color there like two percent something like that there you go all right in the advanced tab i didn't need to add a custom class to my row and we're going to call this the mouse move card so class is going to be et mouse move dash card and so there we go and lastly or not lastly second to lastly i'm going to add some custom css to my row of my excuse me to my column in the main element and all i'm doing there is setting a max width so here's where i'm going to set my max with and this is whatever um you know you want your card max width to be i'm just going to keep it fairly small i'm just going to do 600 pixels and like i said before so the visibility set settings i do want to make sure it and not leave it as the default i just want to make sure and set it to visible because when those hover effect elements i'm just going to pause there go back to our finished product as you can see the those elements within they're going to be popping out or popping i don't know up or toward you toward the user um in z space so uh when i but when i rotate it you can see like as i get really to the edge you can see it's kind of overflowing my my column there or my card and we don't want anything hidden it won't work if you have the visibility hidden on the column so make sure set that to visible for both horizontal and vertical and that about does it for our column so now we're ready to create those card elements and before we do that i'm going to check over in the comments here say hello to all of my newcomers peter hello from south africa um oppress uh prasita prasita um hello uh you gave me a wow i'm assuming that's a good thing thank you for that uh stephanie from uh ghana welcome looks like i don't have any questions just yet all right all right looking good so let's continue uh right now if you're just joining us we're creating a dynamic 3d mouse move animation effect in divi and this is the final product we're looking to achieve here and as you can see it moves around nicely and don't forget to check the video description for a link to the blog post that goes along with this video and also the blog post does come with a download json download where you can import this design and check it out for yourself on your own website also if you're new to divi i've included a link included a link to our divi product page you can check that out as well but let's continue our next step is we're creating our card elements within our column all right so here we go first one it's going to be this what i'm calling the circle background with logo that's this element here that that circle in the background there with the logo i'm gonna use uh you can see that's the basically the only thing that's not popping out on the page um when you hover over it but to create that i'm going to use a text module so create a new text module i don't need any content in it because i'm only going to use it for its background so let's go ahead and do that we're going to add a gradient background so i'm going to scroll down here to my background background gradient let's go ahead and add that my left color i'm going to make and paste it in here it's got like a navy blueish color and also i'm going to use on the right color here a reddish red color and then i'm going to add a background image and that is actually going to be a logo a divi logo so let me search for that maybe it'll pop up where's my white logo i want that white logo that's it but that's not it it's not the one i want um let's see it's around here somewhere and it's close i know it is there it is all right let's paste or upload that image and i don't want to i want to make sure the background image is the actual size it's actually only a i think it's a 60 by 60 pixel logo there so i'm just going to use the actual size and doesn't look great yet but we're gonna add some sizing to that to make it circular to do that i'm gonna go to my design go to sizing and for my width i'm going to uh you know open up the responsive tabs there for desktop i want to make it 150 pixels and i actually want to do the same for the wait not max width take that out for the height as well so for height i want to make sure they are the same so i'm going to add 150 to my um height on desktop on desktop and for let's see give me some more room and so oops so for tablet though i'm going to shrink it up a bit i'm going to do oh wait let's go back i'm i jumped ahead let's do 160 sorry 160 for desktop 160 pixels for height and width but for tablet i'm going to do 150 which is slightly smaller for my height and width and then for phone i'm going to bring it down to 80 pixels height and width as you can see that does make it a perfect square which is what i want because i need it to be a perfect square to make it a circle because the next step is to add the rounded corners and to make it a circle simply set it to 50 percent all the way around there's your circle easy circle design there for this particular element here i do want to give it an absolute position so under my advanced tab go to position i'm going to set it to absolute and go ahead and give the location top center the reason why i'm doing that is because i want it to sit behind here's my final design you see how i wanted to sit behind my other elements just kind of stay in place there easy way to kind of overlap other elements on top of it if i give it an absolute position and i'm going to give it a vertical offset here of 15 that's just gonna bring it down a notch from the very top all right that takes care of my background circle logo next we're going to create our image our bike image so i'm going to add a new image module underneath that text module there you can see it's already overlapping it which is what we want i'm going to grab that bike image and you know whatever image you do add doesn't have to be a bike but i would suggest that you use a png image with the transparent background so that you can see it it makes the 3d effect a whole lot better let's go ahead and jump over to the design tab change my alignment to center and let's do the sizing let's make the width 90 percent not 90 pixels 90 okay and for the spacing we're going to give it a bottom margin again using the vh length unit let's do v 4vh bottom margin that's going to create the space i need for my next element that i'm going to add right underneath it and then lastly let's add that css class that we need i'm just going to call it et dash card dash image that's our css class and save it out and let's add another text module because we're going to our next thing we're going to be adding is our card heading all right that's this one over here that's this text the divi bike text so to do that let's go ahead and add another text module and let's go ahead and paste in this html here this is actually the um an h2 basically with a span inside of it let me make sure you can see that it's not allowing me to zoom okay no worries it's in it's in the blog post there we go there's my zoom so there's my span um that's uh adding the excuse me span tag that's surrounding the divi text there that adds that color that's how you add that you know secondary color inside of that h2 there for that red divi and let's go ahead and go to the to the design tab and update since it is an h2 heading let's go to my heading text hit my h2 tab let's do the uh bay bus new font and let's go ahead and change my alignment to center and let's go ahead and use let's see my let's see if i have my recent yeah let's do that same blue uh purplish blueish whatever you call it color that we used for our gradient background and let's do our text size so for our text size on desktop let's do 75 pixels on tablet we'll bring it down to 60 and for mobile we'll bring it down to 45. all right let's do uh from bottom margin oh uh i do we can we can add some letter spacing um if you want um i just added 0.5 m to that just give it a little spacing between the letters um but for my spacing i do want to add that same bottom margin of 4vh underneath it all right and i think that's good for our heading except our last step we want to go to advanced tab at our class so we're going to call it et dash card dash heading these classes are important because we're going to use them in our java java query javascript or jquery uh later on all right next we're going to add another text module and this is going to be our info text underneath it you know you could add you know the text in this same text module as well like body text but keeping the elements separate like if i go back to my original design as you can see if you keep them separate you can add you know different hover effects they pop out diff you can make them pop out separately in other words by making them separate elements so that's why we did it that way all right so let's just add in some mock text here all right um [Music] paragraph text there and let's go to my design tab and go to my text settings or text styles and let's do a semi sorry keep the default font that's fine we're gonna make it semi-bold though and text size let's just quickly do let's do 18 pixels on desktop and on tablet let's bring it down to 16. bring up the line height to 1.8 ms and then do our text alignment to center and for spacing let's add that same bottom margin of 4vh and for our custom class let's add et card info et card info for our class save it out um and our final element we're going to add is our button so let's do that let's go ahead and add a button module all right and we're going to change the button text to something like make an offer jump over to my design tab and let's do some custom styles for the button use custom styles for button yes and let's do for my button text size for desktop let's do 25 pixels for tablet let's do 20. for 16 let's do for six for phone let's do 16. okay all right for my button text color let's just do white and for my background color i'm going to do that same bluish gray bluish purple color there and for my button border width i'm going to take it out let's do zero for my button border width and let's do some letter spacing we're going to do 0.1 m for my letter spacing there let's use the button font let's do babist new same font we used as for our main heading there and let's add some padding to our button so we're gonna do a different one for desktop and tablet so for our padding on desktop let's do uh let's do 0.5 m on the top and bottom we'll link those together and then 3m on the left and right on tablet let's go ahead and shrink the left down left and right down the 2m all right looks like my button's not aligned so i need to go back to my alignment and make sure my button is centered forgot that step and then under our advanced tab let's give it a custom class let's go back to desktop view here under my advanced tab let's give it a custom class of well actually you know and i originally did give in the in the actual blog post tutorial i did give it a a custom class and i used it to target in jquery but actually since the actual button uh design is attributed or added to the a tag or the a or the link element that makes the button not the button wrapper we're going to target it a different way so i'm not going to add the button class here we're going to actually target the button another way so i'm going to skip that step so if you're looking at the blog post post tutorial and you're saying well why didn't we add the button class i just told you okay all right so save it out and here's our results so far looking good again you know you can just leave it like that let's check it out on a live page here so there's my design i do uh let's just go ahead and inspect it to see what it looks like on different browsers so there's my um ipad view there what does it look like on a phone there you go so maybe maybe i need to add more width to my column make it a little bit wider on phone but that's what it looks like on foam all right and you can see it gets how it responds nicely and let's see how it responds when you shrink you can see how it kind of shrinks the the margins in between kind of gets smaller as you you know adjust the browser height that's that vh length unit at work that we used all right let's go back to our build here and uh this final step um if you're just joining us and you're lost today we are creating a dynamic 3d mouse move animation effect in divi and don't forget to check out the video description for a link to the blog post that goes along with this tutorial and this is our weekly divi use case live stream we do these every week tuesday 3 p.m eastern we are on our final step which is to add the code necessary to make the magic happen and create this 3d mouse over effect animation effect i should say all right to do that we are going to use a code module so i can just add it underneath my button here add my code module and make it quite large so we can see our code and of course this code uh can be copied and paste and or used um by referencing i mean all of this code is in the blog post tutorial i should say it that way so i'm just going to copy in the uh css but first i'm going to add a style tag because we're adding the style or the css in an html document so we're going to use that style tag make sure our css is wrapped inside of it and then paste it there so there's our css um and we'll circle back if we have time and kind of go over what that is doing and why that's important to have in there but after the css we're going to add the jquery so i'm going to add a script tag and then inside that script tag we're gonna paste in our jquery code there you go all right so uh just so i can make sure this works before we go back over it i'm going to save it out click save and let's go ahead and open it up in a new tab or check it out on the live page once it loads and i hover over it there's my effect so you can see that it is working nicely all right so let's uh let's um go back it is kind of jittery for some reason it's not usually like that that that's better um let's go back and look at that code so we can see what's going on there so i'm gonna go back and open up my code module this and let me zoom in for you guys so we can see the code together close out my menu here i don't need that and let's see can i zoom are you wanting me to zoom no you're not okay i don't like that do nope i'll get it right here we go right in the center okay that works enough maybe not right i'm having some zoom issues here get out escape escape me i i've never had this problem before i'm like stuck in zoom i need some tips all right here here's what i'll do i'm stuck in zoom i'm just gonna refresh the page but it's still zoomed in for some reason let's go out okay wow um okay uh let's see duplicate tab still in zoom i would like to not be homeless all right let's see help me out guys um cycle tabs yes i don't know what that means okay um am i in zoom okay i'm i'm gonna i'm just gonna brief pause while i figure this out i'm never doing i'm never zooming like this again okay i'm just i just need i'm gonna pull it back up okay all right guys we're back sorry about that forget the zoom we'll we'll do the zoom later but um the let's see i can zoom it this way might help so the first thing we have is the css so this basically this is important so the the et hover container um right here is actually the column we needed to add perspective to that so the perspective css property basically that controls the perspective of any 3d elements that you're adding uh 3d child elements which we will have um the card being one of them the that will move around and also all of the uh the the stuff inside all the elements inside the column so the actual next one the um mouse move card that's actually our column the class we added to our column well we needed to add a transform style preserve 3d that makes sure that those 3d elements are preserved in a 3d space and look 3d whenever you add those animation effects all right so that's important uh this is just setting the transition duration and uh style uh for those elements so if you want to speed it up or slow it down you can change this value here um but this is where the the key to creating the pop out 3d effect and that is the transform styles that we have for the card elements so um you can see that each of these uh classes like the for the image the heading the info and the actual button which we're targeting differently this is our button wrapper here they all have this extra class called transform 3d and this is the class that we're going to toggle on and off whenever we hover over the row so whenever we hover over the row we're going to transform each of those elements with this translate z function here and this controls how much you want that element to pop out in 3d um in z space or on the z axis or whatever so the the image is going to translate out 150 pixels the the heading is going to translate out the same 150 pixels the card info is going to translate or pop out about 50 pixels and then the button is going to pop out 150 pixels um there's also a rotation i've added to the image and also the button and so just to show you what that looks like go back to my original um so you can see like as i hover over the row uh the bike image is popping out but it's also rotating right you see the rotation and also the button actually pops out and has a rotation as well which makes it more visible kind of when you're down here which i like so when i hover over the row those those uh transform translate z um styles are added to each one of those elements making them pop out and because we have the perspective and the you know the 3d preserve enabled will show all those in 3d not very nicely okay hope that makes sense thanks zen says it's okay we can still read the text zoomed out good because i'm not going to zoom out in anymore um let's go ahead and go back to our build here uh for the the jquery code uh the first part of it basically are basically the setting the variables for all the elements so i'm targeting all the classes and assigning them a jquery object here variable and i'm going to use that throughout the code so uh one from my container one for my card one for my image um the card being the column there one for my uh image one for my heading one for my info and then one for the button wrapper so once those variables are declared i'm going to use them throughout the these next few snippets here this next block here is how you create the moving animation event and that would be the the way the column moves around right when you the mouse move animation and to do that you need to uh set or you're going to use some you know basically you're going to use the mouse move event um and you're going and you're going to win hovering over the row um when whenever the mouse is moving over the row this function is going to execute and it's going to basically dynamically determine the placement of your cursor on the x and y axis axis and um and that is what this is doing so you're going to let the x-axis i can't say that word x-axis axis equal this calculation which is um basically uh you know determining the value of um the client x which is the uh what you use to determine where the uh the cursor is on the x-axis um but you're you're kind of using some calculation here and i'm not going to go into the details there but you're going to um you know make it to where it's not um it's more smooth and it kind of does that cool effect here so as you can see when i go to the right it actually turns to the left and when i go to the left it actually turns to the right and that's because for each of these variables for the x and y axis that that value is actually being used because we're adding that value here dynamically in the transform rotate css property on the column so the column's going to be rotating dynamically because that value that rotation value is going to change dynamically as we move it around i really butchered that explanation i'm sorry hopefully the the the um blog post will help explain that a bit better but the um essentially that's what that's doing the what's next um oh the hover or so the hover effect so this next block is going to add the css class called transform 3d whenever you hover over the row so that again corresponds to my css up here right here which has that css class added to each one and that you know initiates the translate z pop outs that we want on hover and then lastly we want to pop back that card that column and everything pop it all back into place um by whenever by using this mouse leave event here so whenever my mouse leaves the row it's going to add the css to the to the column a transl the rotation y and z and x is back to zero degrees so when it was changing dynamically once it's outside of the row here's my final see it's changing that that rotation is changing dynamically but once we get outside the row it's going to set back to zero and pop back into place so that's what that does okay all right so that about does it um let's see if we have any questions everybody's been pretty quiet no questions uh just people laughing at me because i don't know how to zoom thanks a monkey z78 but all in all it's a really cool effect i know i'm you know getting close on ending our or running out of time here so i want to wrap it up but uh saving it out here let's go ahead and make sure it works final design here we go so um let's sorry refresh the page uh here's our final design it looks like my um hover effects are working and you have a nice 3d mouse move animation effect in divi all right guys that's all i have for you this week thanks for tuning in everyone uh please be sure to give us um a thumbs up if you liked the video of course and don't forget to subscribe to our blog newsletter our youtube channel and like us on facebook and don't forget to click to get those notifications so that we can let you know every single time we have something new for you and we'll be we will be back here next tuesday with another divi use case live stream at 3 p.m eastern so check that out and thanks again you guys i'll see you in our next video you

Channel: Elegant Themes

Views: 4,567

Keywords: divi tutorial, divi builder, divi 4.0, divi 4.0 tutorial, divi builder tutorial, divi theme tutorial, elegant themes

Id: S4lzIzqYFqk

Length: 57min 36sec (3456 seconds)

Published: Tue Apr 20 2021