Rotational parallax in layered images – Webflow interactions & animation tutorial

when we're thinking about designing in 3d especially when we're approaching rotational parallax it's sometimes best when it's simple here it's three images a background with grass a dog he even has a little shadow and a tennis ball check it out the tennis ball is super blurry why is that important because we're getting a shallow depth of field effect which is quite a treat so we're going to lay down how we did this in the web flow designer and we're going to do it in just three steps one will set a children perspective on the section essentially making the section a camera two will position our images and three will add a rotation interaction so everything rotates on mouse-over by the end of this the ease and practicality of building a rotational parallax animation won't seem as far-fetched let's start with the section we just dragged in a section and he can give this a fixed height but we're going to set it to 100 VH 100% of the viewport height and we can affect elements inside a 3d space so we can establish depth let's set a children perspective we'll keep it simple and do 1000 pixels but we can always change this later and let's set a background color we don't need to but we will and we've done what we came here to do which is set our children perspective next is positioning the images for the main one for the background we're actually going to use a div block so we'll throw in a did block this will be the background we'll create a class and call it grass now you can size your div however you want let's set a fixed dimension 1000 pixel width and a 650 pixel height and we'll add a background image which we can do under background of course once we've chosen our image from the assets panel we'll want to set this to Center and we'll want to set the mode to cover this gives us a clean cropped image if we grab our section we can use it we can use our section to position that div block to position the grass background we just created flexbox here lets us justify and align to center now let's drag in our dog friend she'll drop right into the background as an image now this positioning is a little rough we can start by applying the same flex styling we applied to the section this will mean the background which hole to the image of our dog the background we'll send her its children let's also size the dog down maybe a width of 400 400 pixels and so we can keep track of what's going on let's name our class we'll double click to rename our class dog let's set the dog to absolute positioning this way we can stack different elements on top of or behind the dog if we scroll down we can add a transform then this is where we can go crazy let's bring dog closer to us 100 pixels or so and we can eyeball what looks right with the other dimensions move left and right and adjust up and down until we get the positioning how we want it then all we have to do is position one more image we're getting fairly good at this so let's drag in the tennis ball we can put this inside the background div block after the dog and we'll set its position to absolute let's organize and name the class what are we going to name this class ball and we'll set a size value we can do this in pixels too if we want and after that we're going to do the same exact thing here with its position as we did before we're going to transform its position this time let's move it really close even closer off the scale we can just type in a number here and we can adjust its positioning along the x and y axis until it's just how we want it we can always come back and tweak this later when we're done with this we can move on to the rotational parallax interaction itself we can head on over to interactions we want to of course create an interaction based on mouse movement in the viewport and we can call this whatever we want we want to affect our background image so while our mouse is moving around inside the viewport what we build in the animation will apply so we have our x position and we have our Y position our x position while we're all the way at 0% is when the mouse is on the left most point of the viewport so we'll rotate our background div at 0% to the left let's create another action or keyframe at 100% as we know our x position that 100% is all the way to the right on the viewport that means for this point we want to rotate it we want to rotate our background div to the right once we wrap up with the exposition we'll do the same thing now with the Y position so your a person is when the mouse is at the top 100 percent is when the mouse is at the bottom so at 0 percent will rotate upwards so it's facing the top of the viewport and at 100 percent will create one more which we can rotate downwards so it's facing the bottom of the viewport so what does this mean for the dog if we preview we can see this behaves exactly how we want it to as we move our mouse the background div rotates and it's children rotate as well the varying depths because we moved everything along the z-axis give it the appearance that the tennis ball is much closer and out of focus and the dog is in between the background and the tennis ball now is this the only thing we can do with rotational parallax of course not we've created another video which involves simple headings and of course we've created more content on the final part of the how to build a business website course in which we're creating a 3d galaxy in the web flow designer but that's how to do it we have a section to which we can set a children perspective we use a div block to serve as our background then position our images inside then of course we add our rotation interaction to the background div block giving everything we just positioned a feeling of depth and that's rotational parallax with grass a dog and a tennis ball

Channel: Webflow

Views: 52,322

Keywords: web design, webflow, responsive web design, graphic design, web development, cms, content management system

Id: YxTQtovxc-0

Length: 5min 46sec (346 seconds)

Published: Fri Jun 01 2018