Building a parallax header in Webflow - Live Stream 9/13/2021

all right hey everyone we're going to be starting shortly and uh today is going to be a fun one i've got a few things i want to showcase today and we're going to build this website here it's a free figma landing page and we're going to do some parallax animation and just have some fun with some of these different elements on this figma file in this figma file so again yeah i'll go ahead and get started welcome everyone this is john from web dev for you here to help you build awesome websites without code in webflow yeah these live streams happen every monday through thursday from 12pm to 1pm central time we cover everything from how to build in web flow how to build interactions and animations in webflow and i also uh provide support if you need help with your website you can ask me a question if it's about your personal project you can drop a super chat and i can look into your personal project and help you with a specific issue you might be having with webflow hello bill fazal i hope you had a great weekend excited for the stream to learn something new yes this is going to be a great stream i hope you had a great weekend as well so yeah i'll go ahead and get started so [Music] in last week's uh live stream i think it was thursday or friday i went over creating this animation here and let me go ahead and change the color of these buttons because they're a little kind of obnoxious this red here i'll just make them kind of gray um but yeah we'll cover we'll cover this animation in today's video and it's basically this this animation was a lot of fun to to build and it's much simpler than you might think so it goes like this actually it's not that simple because we're going to use custom code but basically we're using css clip paths so last week i created this animation in after effects using masks in after effects but the thing with that is that uh safari doesn't handle masks very well so it looked really bad on uh in safari so i looked more into you know this this animation was was inspired by this cold drops uh animation which is right here and basically i was trying to recreate uh this okay so i'm pretty close i i'm pretty much there uh we can see this is the the site that i've built and basically what we're doing is we're using clip paths and if i look if i look at the site in safari it looks really good in safari as well where i'm not going to showcase what the previous svg looked like in safari but let's just say it was very choppy in safari using uh using a lottie animation or json animation uh so yeah this is uh the the animation here and i'm gonna create uh an entire video tutorial once i've refined the design of this and made it look a little bit cleaner and selected some more um interesting images i would say are not interesting but images that go go together pretty well um you know this is going to be interaction 154 so i'll create a single video on how to do this but while we're here in the live stream and while everyone's trickling in i'll go ahead and just showcase how i did this and basically so i'm using the swiper.js slider because i had a you know swiper.js is a custom code slider and it goes over how to use it um here let me let me find it get started if we click on get started it shows us the uh the structure of the slider so basically you need a div a div block with a class name swiper then a another div inside of this div called swiper wrapper and then you add the slides inside the swiper wrapper so you know swipers and they have the class name swiper slide so in webflow you know for if you've built with webflow you know that same structure can be created using div blocks and using the navigator here so here i added swiper the swiper wrapper and then in the swiper wrapper i added these three slides and i set the position to absolute and full just because we're working with the full viewport um slider so i just decided to to fill the entire viewport and i made um i made the swiper the parent swiper element 100 vh so it's the entire viewport yeah added the swiper wrapper made it position absolute in full and all the slides are positioned absolute and full so they cover the entire uh browser okay so that's the structure of swiper and then it goes on so if we look at the documentation we can import swiper using a cdn so right here use wiper from cdn and this is how we want to use any scripts in webflow we want to grab it from the cdn so that um you know so we don't add the full script in web flow because webflow only handles uh 10 000 characters in the custom code in each section so right here we have the the cdn we have the css sheet style sheet which we can just grab and place this in the head section and then we have the script that goes right before the body tag in webflow so we just grabbed these two links so if i go into the page settings in here you can see i've added the style sheet and actually the style sheet should be the first thing right up here so we just placed this style sheet up here and then we grabbed the swiper bundle min.js and we placed it before the body tag okay so now we have access to swiper and we can create a slideshow using swiper and then we have to add the specific code and let's see if it shows here um yeah so we added here's the the code you want to add within a script tag in webflow so it's constant swiper new swiper this can be any name here this constant can be any name but you know i just left it swiper and then you select the the class first wiper which is swiper here and then you set the direction if you want it to loop if you want pagination and the previous and next buttons uh for this specific case i only needed vertical and loop to be true so if we go back in here oh and the speed um i set the speed to 700 so we see i initiated the swiper slider so all the code is right here so i said the direction vertical uh i wanted it to loop and the speed uh 700 milliseconds all right so then i added this piece of code and i'll get to this in a sec um so again i'm not going to go too in-depth in this live stream as far as like how i built it because it's going to be a separate uh video but basically i needed i needed to add a click delay to the previous and next arials because the way the animation works is once you click the animation plays and then the slide moves up so i needed to add a click delay of 700 milliseconds so once you click then the click registers and moves the slide up so 700 milliseconds and then the slide moves all right so that's this code here this timeout code and yeah once the uh the project is cloneable you can just clone the project and follow along the tutorial i'll be creating and you can just use the uh the custom code that i've placed in here all right so that's adding the slider the next thing is working with clip paths uh hello better late than never uh yeah welcome joseph uh welcome welcome so we're just going over this animation that i've created here um you know similar to this code drops animation and i'll be creating a specific video on how to do this but right now i'm just going over a quick overview of how i did it but i'll create a i'll be creating an entire video from beginning to end you know with exactly everything i did to create an effect like this so this type of slider and i'll be using different images because what i like about the code drops uh slider there's uh the focus of the uh was of the subject is on the right so you see all the people are on the right which makes the effect even better because you see the face in the circle so i'll be finding images where the focus is more on the right rather than these abstract images where when the circle goes in you don't really see anything in the circle um so so yeah this is yeah so i'm just going over how i built this i went over the slider part the next part is the actual clip path um so to get this animation and i'm gonna i'm gonna be having so much fun with clip path because it's such an amazing technology or such an amazing feature in css that um i want to showcase more on how to use it because it's actually not that hard this css path is this line of code right here so we have swiper slide clip path and it's a it's in it's css so to each individual slide i applied this clip path and if we go to clippy and this is where you can create your clip path so i want to create a circle and so initially i want the circle uh to be small let me see here so i'll just put the uh the outside circle here or the the radius i believe so oh wait let me center that all right let me try let me select the circle again there we go all right so initially i want the circle to be smaller so i can do something like this and then i can move it to the right and then we notice right here these are the properties of the clip path so right now the circle is i'm going to say 20 in is it diameter or yeah 20 in size we'll say like that and then the position is at 73.50 so what i did is i just took these measurements and i said okay when the circle is 15 i want this to animate to 15 and then and then at 75.50 so it's 75 or 80 percent to the right and fifty percent within within the middle of the canvas and then i wanted to animate to i think i set it to like 80 or something like that so it goes from 15 to 80. it was something like that but if we look at here yeah so i started the circle at 80 percent so it initially starts at 80 percent so picture this space here is is the circle like the the space where we can see the image that's where the clip path is uh cropping the image basically um and you can just picture this circle right here right and then i animate it in so go the circle gets smaller um so so the way we animate that is well the way i animated this hey john i'm out for dinner tonight so i cannot join but we'll tune in tomorrow again for sermon all enjoy enjoy your dinner no worries it's very cool that you come to to to uh my sessions and uh my live chats so yeah just enjoy enjoy the dinner and yeah um yeah we'll catch up for sure um so so yeah the way i animated that clip path is with gsap which is green sock and it's a custom code animation script and it's super powerful and it has some of the cleanest smoothest animations i've ever seen out of any scripts the only two scripts that are the two scripts that i find the best for animations and i really really like are anime.js so i'll quickly showcase that anime.js i've done some really interesting stuff with this and i'll showcase some of that stuff that i've done with anime.js and it's just super smooth anime.js is just super smooth the script is easy to use and there's just so much you can do with it so i'm super excited there's actually a project i'm going to be creating with anime.js and that'll be down the line but i'll announce it when it's available and then we have greenstock.com and greenstock is just like the standard modern web animation you know thing uh or script and you can create mind-boggling animations with uh with gsap it's called green sock but it's uh the short name is gsap alright so i animated the clip path with gsap so i added the cdn script here from jsdeliver um you can find it from uh from any you know from cdn js or let me shut off my phone here um but uh but yeah so i included the script and right down here if i scroll down this is the script that animates the the clip path um so basically i said you know when we click on the left arrow or the right arrow um and then i well i called the slide so i selected the swiper slide and then i selected the left and right arrow and then i created a timeline so i said when we click on any of these arrows i want the clip path to go to 15 so it goes from 80 to 15 so get smaller the position stays the same i added a duration of 0.7 seconds and a specific easing of ease and out and then then the next animation goes back to 80 percent after a delay of 0.7 seconds so if we look at that here in the animation we click it enemies to the circle and there's a 0.7 second delay because the slide is moving well we added a delay of 0.7 to the slide so it animates in the slide moves up and then on the next slide the circle expands all right so that's just a quick overview i know that's probably kind of a lot um yeah and so here i just call i said you know i called the left arrow and i said on click restart the animation and that's how we can restart the animation every time we click on the previous and next arrows so yeah that's basically it i know that's i mean i'm saying that's basically it but there i did cover a lot there but i just wanted to quickly showcase how i achieved this effect and i'll i'll definitely be designing this a lot better i'll be using some cool arrows for the previous and next buttons all of that can be designed in webflow and and i'll i'm going to grab some arrows from like a arrow pack and um yeah i think that might be it for that that's all i wanted to cover today uh yeah but but clip path is super cool you can use any shapes and like animate anything you know uh and just create like different vector paths and they'll just crop an image and if we look at the support for clip path i think it's pretty wide i think a lot of browsers support clip path let's just see clip path css property um i might be wrong here maybe maybe not okay most of them support it but there's uh this partial support support refers to supporting shapes and the url syntax for inline svg but not shapes and external svgs we're not using svg so i think these yellows could be mostly supported so yeah chrome supports it safari supports it firefox supports it uh yeah so most major browsers do support it ie does not support it so that's just something to note um there but but edge does and hopefully we'll start we'll we'll be we'll start seeing less of ie we can see the the global usage is 0.75 percent that's still a lot the global usage of firefox is 0.02 i'm wondering if i'm reading these global usages correctly in any case um i do think a lot of browsers do support it ie does not but edge edge does um yeah so [Music] so cool yeah i kind of want to like showcase how to build it now because it's just so fresh in my mind at the moment but i think this effect deserves deserves its own video and definitely a bit more design um focus there all right so yeah that was a lot of fun um so let's go go ahead onto building again um you know as i'm building if you have any questions please post them in chat i haven't built this layout before so it's going to be a bit of an experiment we are going to learn quite a bit with some of these different elements layouts yeah with these different elements how we decide to do the layout um and yeah so i'm excited to to jump in uh yeah let's do it all right so i have a blank project here and let me let me close some of these tabs and i'll just close that for now and [Music] yeah i'll close this this and this all right cool very nice um hopefully yeah i think my email showed a little bit but i don't have anything interesting there cool so the first thing i'm going to do because it's just going to be fun is create a parallax effect with this first section up here so i'm going to export the this background no not that background let's find it here background right here this hg image i'm going to export it as png let's just uh take a look at it and yeah so that's perfect so whoever created this like did some good photoshop work all right then we have these mountains that looks good i'm gonna export and actually let me export it as two times let's say export so we can we can add it as high dpi and i'll delete this one and let's re-export it as 2x okay that looks good and um this bottom piece here vg okay so we can look at these images and we can see they're all nicely cropped so that's probably one of the hardest parts is cropping images to make them look really cool in in web flow or to create interesting effects all right so there we go we have those three images cool so let's drag and drop them into webflow uh john can you teach me how to create this animation and webflow with scroll word below it with scroll word below it uh do you mean do you mean how how they did in code yeah that's one i'm going to add that that animation uh as well in the final uh project so here when we go to the next we can see the text changes as well um so i'll be adding this animation um along with the uh the circle um i'm not sure if that answered your question i don't know uh what you mean by scroll word uh below it all right very cool um so so yeah let's go ahead and start building let me turn hiding on all right cool so let's take a look at this here so we have this section [Music] all right yeah let me just build out these mountains and see how we go all right and then we'll we'll add content after we build out this background section okay so i'm going to add so i'm going to hit command k to add different sections uh you can also go to the elements panel click add and add a section so i'll hit command k add a section and we'll just call this hero background section okay and i'll go ahead and add those assets that we downloaded from figma and uh this is the link which shows animation on codepen and i want to know if we can do it in webflow uh yeah so chat doesn't allow links to go through a bill so you have to either type the link with spaces or send me an email with the link i prefer if you could type it with spaces so i can see within chat what you're referring to right so let me add these three images right in here and it might be large i didn't compress them let me see yeah they're large let me view it as a list and oh those are way too big no no way so let's compress them they're still going to be very big but i'm just going to compress them um here so i'm using compresspng.com to compress them and they're very large nice hope everyone had a a great weekend yeah i spent most of my weekend not most of it but i you know a good amount of time figuring out the the animation i just showed because i initially was working with it in svg and it was i looked at it in safari and i was like no way that is not gonna fly and then i looked up um safari doesn't por doesn't support lottie masks well um so that's when i looked at clip path and we used the uh the clip path animation there okay so these images are still too large yeah way too large okay so i'm going to resize all of these to so let me select them here tools adjust size i'm going to say 1920. click ok and then save so 1920 is just like a 16 9 i think aspect ratio oh man um they're still too large tools edge of size yeah still very big okay let me compress them one more time this part is actually really important because too often i find sites with really large images and that can really affect the load time of a site and nobody wants that so i do try to keep my images around 300 uh kilobytes oh so this this might be better we can see it compressed and compressed it a lot more all right okay this is not bad so we might get to like maybe the 600 kilobyte area so let's see compress the download okay show in finder okay here we go let's look at it now okay not bad seven one of them is still too large but that's what we have to work with so let's let's go ahead and add it all right i can see viewers are trickling in welcome everyone i'll i'll go ahead and give my intro welcome to to my live stream um the live excuse me the live stream is monday through every monday through thursday from from 12 p.m central to 1pm uh central and we cover everything from how to build a site in webflow how to build animations and interactions in webflow and i also provide support uh via the super chat function in youtube so if you have a question about your personal project if there's anything related to webflow in general i'll definitely answer it but if it's related to your personal project just feel free to drop me a super chat and i can take a closer look at your project and help with anything related to the project and and webflow all right cool so i took a moment we did want to make sure the images were a good size uh we don't want to add really large images so right now we're going to be we're rebuilding this site here so cool so let's go ahead and add the first background image do i want to add it as a background image or as an image i'm going to add it as an image uh hello omkar can you just quick recap of what happened just joined uh yeah so i'm basically building this site here and i've just exported the images and i also showcased this project um that i'm working on and i'm gonna be creating a specific video just for this animation and i went over you know uh after the session you can just go to the beginning of the video i gave a quick overview of how i built this but i will be building a full or like one that's fully designed and i'll be creating a video on how to do it like step by step and everything like that but at the beginning of this video i just went over a quick intro i heard somewhere that we should use svg as they are low in size and responsive for images and icons would you recommend that absolutely yes for icons i absolutely recommend svg and for depends on the image if it's a vector image then yes i absolutely recommend svg uh vector images are just images that are paths so like anything that's not a photo or anything like that you build in illustrator or any vector tool i would recommend exporting it as svg there's many benefits to svg in that like you can make it as large as you want and you don't lose any quality quality in the svg and you can make it as small as you want and you don't lose any quality so highly recommend svg for any vector graphics like icons and illustrations all right so uh let me add the sky here i'm gonna add it as an image that looks good and for the fill let's just say cover all right so we have the sky that looks pretty good so i'm going to relabel it here and call it sky or sky image sky image then i'll go ahead and add the [Music] this next section let's let me look at the site here it looks like the mountain man is in both images this could cause some issues um let me go ahead and add this and i'll place it below here and actually no i want to add never mind that one i'm going to add this one oh no he's cropped out perfect all right cool so we have the sky and we have this image oh this is quite interesting okay so what i'm going to do i'm going to call this this is kind of the mid ground so i'm going to call this mountains image oh thank you omkar appreciate it appreciate the super chat uh john can you take a look at the link i mentioned above a bill the yeah the link uh needs to have spaces in it it doesn't come through in the chat so i actually can't see the link i don't know if you can see it on your end but it doesn't come through when i'm looking at it yeah so props omkar appreciate the super chat um cool so we have the mountain image so what i can do for the mountain image is just give it some negative margin to line it up with the sky there all right that looks good and then we'll add the last image which is this one here of the um what should we call this grass grass image and i'll add some negative margin here we'll just line it up all right so yeah that's that's basically it i'm gonna see if on i don't really like that this middle image is cropping out the guy here there's a few reasons for that because it's it's gonna affect how we animate this uh because i did want to create like a parallax uh situation with it where the background or the the middle ground these mountains and this grass are moving at different speeds to create a really unique effect uh well you can change oh let me check that out let's see you can change chat settings to allow sending links so let me see can i do that now i may not be visible i do see a setting but i can't quite access it right now couldn't couldn't the parallax be vertical uh yeah i think that's the idea is to to make it vertical um so but if we're gonna do it that way then we wouldn't need to use interactions like basically what i could do here for the sky image is set it to a position of fixed and [Music] and then bring the other elements to the front so i would set this to relative um no fixed yeah um i always said it's a sticky i think sticky might be the because we can see it kind of messed up our layout a little bit so we'll set this to position sticky so let me try that position sticky and i think zero from the top and then i would bring these elements to the front no i still don't see it can you guys see the link no i can't um can you send an email to i'll send you the email link just send me an email john yeah sorry about that a bill i'm not sure i'll make sure that links are um enabled let me see enable links in youtube chat just gonna do a quick search here uh yeah i'll look into that but um just go to webdev4you.com and the contact page and just send me the link via the contact page and i'll take a look i was told to fix my form i needed to hey you would need to add input hidden and save there a budget amount but got no clue how to do it uh joseph um [Music] yeah if you want to send me uh a read-only link to your project if you don't mind everyone seeing it or you can email me uh your your project and if you want me to take a closer look you know we can do a super chat for that uh as well you need to add input hidden and save there a budget amount not quite sure uh what that's in reference to okay so let me bring this mountain image to the front so i'm gonna set it to a position of relative okay so it brings it to the front the grass image i'm gonna set it to uh relative as well okay all right so here what we can see happening we scroll and the sky stays in place but the mountain moves up gentle thank you oh that's super awesome appreciate it nice uh oh okay let me check my my gmail yeah gently um agentel if you had any question yeah let me know i super appreciate that uh cool so explained higher up the chat okay let me let me read it all right [Music] so um uh i don't see anything joseph about your specific uh project or or what you need help with if you want to just explain again again the links are not coming through i probably have to enable something but um i haven't enabled anything but i'll definitely look into that um for sure i've sent you the mail okay so a bill sent an email so let's take a look all right just waiting for it to come through [Music] and it hasn't come through yet all right yep don't see anything yet um cool so while we're waiting for that um oh i think i just got it yep cool so let's see so bill hello john so i wanted to know if we can animate mouse icon and webflow with the word scroll written below it okay let's take a look so a bill is referring to this code pen and i don't know if i can if we can animate mouse icon and workflow with the word scroll written below it oh absolutely yeah yeah i would do this in yeah this let's do this real quick cool um so a bill i think you did send the super chat so we can definitely oh okay um yeah i think this would be a super chat a bill because this is like super it's like a very custom thing but i'm tempted to do it anyways because it's just it's it's only a few few steps um yeah so let's just uh quickly build this so let me just add a new page this one's on the house a bill i don't know so mouse interaction and or mouse animation i should call this but yeah it's okay let's just call it mouse animation and we'll add a section appreciate it thanks you thank you jintel um 100 vh for the section size and we'll give it a background color of one eight one eight one eight all right so for that mouse animation so a bill is referring to this here this uh this animation um i'm gonna make it super big so we can all see it clearly and uh yeah so for this i'm gonna set the flex setting for the section to center center and then i'm going to add a div block add a div block and let's make it let's make it 300 nope um 100 or let's say yeah let's say 200 by 400 okay so there's gonna be our mouse and maybe our mouse isn't that tall so 300 by 200. and i'm going to add a border set the border to white and add a border border radius of let's say 50 percent nope uh 50 pixels let's do 100 pixels okay so that's starting to look like a mouse and let's give it uh three pixels for the the border and i'll make it a little bit taller maybe 350. so it's about yeah it's almost a one to two aspect ratio there for the width and the height hello uh hanan what's up uh cool so yeah so in here all we have to do is add that dot so let's see where the dot starts so the dot starts at the top so basically back in here we can just set the and i'll call this uh mouse yeah i'll just call it mouse and then for this mouse we'll set a flex setting of top and center and then we'll add a dot in here so here i'll add a div block and we'll make this the circle so i'll say 50 by 50. that's too big let's do 25 by 25 and give it the background of white and for the radius we'll set it to 50 percent uh when you set a perfect squared div block uh to 50 it makes it a perfect circle okay then i'll just add some margin from the top something like this and we have our dot and i can maybe add a little bit more something like this maybe 50 pixels from the top so our dot starts there and all we have to do for this is add an interaction so i'll go into interactions and i'll say on page load um i like to start these animations when the page finishes loading so so yeah everything's just that's just a personal preference i just want to make sure everything's loaded on the site before the animation kicks in all right and then uh all we want to do here is animate the circle so i'm going to add an element trigger i'm going to say oh wait no sorry in the page trigger click the plus and then when page finishes loading we'll start a timed animation and i'll say mouse wheel move or mouse circle move something like that okay and then we're just going to move it 100 down let's see if that works 100 no not 100 we're going to move it let's let's pick a pixel value um yeah for here we're going to pick a pixel value so the height of this mouse is 350 so let's say and we added 40 40 pixel 50 pixels of margin so we want it to move down 300 pixels all right so that's just some maths there so we'll move it down 300 pixels on the y-axis and uh that went a little bit too low so 250 oh yeah because the dot is 50 pixels so we have to include that in two i believe so we'll just move it down 250 pixels and um let me just call this circle so stay organized with it all right so the circle is moving down and as it's moving down we also want want to add an opacity animation so click opacity and we're just gonna bring it down to zero percent and start it with the movement so if we play we can see it scrolls down and fades out um so how fast is it moving it's moving pretty slow so let's make the duration two seconds and let's set the easing to ease and out that looks nice and all we have to do is loop it so the animation is done and we just click loop right here and let's preview um yeah okay so i have to add let's see um i might have to yeah i have to add an a beginning state or i actually have to reset it so for the movement we'll say move for the circle and we'll move it back to zero pixels and we'll say set the duration to zero and then the opacity uh let's add it here set the opacity to a hundred percent and duration of zero so it just resets it and we'll start these two together um so the animation will play and then it will reset all right and that will allow us to loop it so if i preview it goes down and does that so we just have to reset it i think we could also add initial states maybe and it would reset yeah let me try that i'm just curious let's try adding an initial state instead just for for education purposes so let me delete these actually let me undo that i'll keep these and i'll set these as the initial state and let's see if it works it does not okay um so yeah we have to reset it within the interaction so yep just how i did it set the movement after it plays reset it and just set the duration to zero and then we have the animation so it loops all right and then to add text uh yeah let's just add another div block and i'll call this mouse wheel animation or mouse wheel wrapper mouse wrapper how about that and we'll put the mouse in this wrapper and then we'll add in this mouse wrapper we'll add a text block and we'll say scroll we'll just do something like this we'll center this change the text to let's do ubuntu and white and change the letter spacing and add some margin and just like that we have a scroll animation um yeah so hopefully that answered the question a bill i can make this cloneable uh but yeah i wouldn't need a super chat because this is this is a kind of a a personal request it's not anything specific to webflow but you wanted to learn how to build this yeah so if we wanted to make it this small we'd just have to adjust the sizing of everything and adjust the interaction but i wanted to make it larger so we could all see it but that is a pretty cool effect i kind of like it alright so just to recap i'll go over the structure we added you can start with the with the mouse wrapper and then you can add the mouse and for the mouse we set it to 200 by 350 and we added a a border of 3 pixels set it to white and we added a border radius of 100 uh pixels uh so the width was 200 so it gave us this nice border or this nice radius and then for the mouse we set it to flex top and center and oh thank you thank you bill uh send me an email and i'll or actually i'll i'll email you this uh this project so you can i'll email you the read-only link to this project so you can take a look um yeah oh yeah i appreciate it yeah because you said the super chat doesn't work uh on your end but yeah send it over yeah and i'll definitely hook you up with this uh with this read only link but but yeah and i'll send it regardless i'll just send it through after the live stream uh so so yeah uh we set this to flex top center we added the circle we gave a margin of 50 pixels from the top and then we animated the circle when the page finishes loading so page load animation and we said uh move this circle down 250 pixels and then set uh change the opacity from 100 to zero percent and we added some easing there and then we reset it by moving the circle back to zero pixels and set the opacity to 100 with no duration and this allowed us to loop the animation and then within the mouse wrapper we added this text block and just typed in scroll and we have the animation there so yeah let me just make it small just so we have some reference for that as well so instead of 200 by 350 i'll set it to let's see what this person set it to here 30 30 pixels by 50. so it's very small so i'll go into webflow set it to 30 by 50. and then this circle is gonna be very small so like five by five maybe seven by seven we can actually look in here um eight by eight so that circle's eight by eight eight by eight and then we'll the margin will just say five or maybe seven maybe maybe eight that looks good and for the interaction we just have to change the the amount it moves down so for the movement down we'll say the height of the the mouse is 50 pixels so we're going to move it down maybe 30. nope that's too low 25 still too low so we'll move it down 20 and the opacity situation is the same and then for the mouse wrapper let's set it to flex vertical and centered and then for this text let's make it a little bit it doesn't look centered does it um scroll oh okay for this text let's make it smaller as well so like 12 something like that all right and that's it so it's a bit smaller and i might change the duration here because it's much smaller so for the interaction we'll change it to uh one second for the duration it looks pretty cool yeah i might make that circle even a bit smaller so instead of eight by eight i would do maybe six by six yeah cool and that's pretty fast so for the interaction as you can see i get pretty detailed when working with interactions i'm gonna say 1.5 for the duration and perfect i like that uh so yeah omkar wrote what what do you suggest using rem or pixel for bolt for full build um i typically use pixel but there there is a lot of users that say um you know rem is a good practice uh let's let's look that up rem and m's web flow and i might do another live stream on this because this question has been asked a lot already but if we go to input values in units in in webflow uh we can we can see let's see if we can find rem units yeah so rem is relative to the font size of the body element so i think there are benefits to using rems i think it's something with like using the browser's default size i believe and m's yeah m's are relative to the parent element so if you set if you set 16 pixel or 16 rem to the body then and you set i don't know you set the font size of an element in the body to 0.5 ms it would be 8 pixels yeah so so yeah excellent says rem over pixels uh yeah so i can definitely get into that i have used rems before and m's um yeah so here's a good example uh of it so let's say the font size the browser default is 16 pixels like on chrome or um you know whatever browser you're using and you set the font size of the body to 1.5 the font size would be 24 pixels and there's many articles on rems and ms here i don't think it goes over it goes over the benefits of it uh yeah so let's see you know rems and m's i'm sure there's plenty of uh plenty of information online on m's and rems and m's but it's definitely you can definitely add it in webflow like i can just select this font and say you know let's say i want it to be 12 pixels and the and the uh the the rem font size is 16 then it would be like so one rem one m would be 16 pixels so it would be like point eight right m's you know so 0.8 m's and i could you know adjust it here 0.8 and if i publish you know it would it would use ms and i'm curious if i apply to the body if i apply rem so let's apply specific value so i'm going to say two rems okay so notice what happened there i gave the body two rems so i think this it gave it double the size here if i say one rem it'll just go back to the the original size so by applying a rem you're applying the base font size to the parent element and then if you use m's it's going to be relative to that to that rem uh let's see so pixels change with screen rems is adjusted for each screen so placement and sizing are always the same relative to the screen size nice it it it is best to use m so your text is responsive uh m is relative to parent body so that is good for flexibility where you want things to take the same percentage size of its parent regardless of the screen but the layout will change per screen size yeah that makes sense that's uh that's a really good point excellence yeah yeah so maybe moving forward i'll just start working with rems so we can kind of get used to that idea because i have worked with rems and i know there is a benefit to it sometimes though in initially when explaining some web flow concepts just working with pixels is a bit easier because everyone's just used to pixels but um this goes you know typography goes really in depth and it's actually a really important part of a build so for this build i'll just use rums as we start adding uh you know typography into this build which we didn't get quite into today because we had some really good questions today let me see if i have another email from yeah from joe hi john okay so i'm gonna pick up with a project got a form that builds and estimates the time and i would so uh joe do you want is it okay if i cover it in this live stream is that is that cool or if not i'll just follow up with you after the live stream but i'm just reading it now uh yeah so joe i just read your your request um yeah i just read the request and um yeah this is something i'll follow up with you afterward this is a really kind of personalized request and it has to do with custom code so i'll just follow up right after cool uh but yeah we're getting to the end of the stream uh we covered some pretty cool things uh how to create this mouse animation and uh and yeah this was this was cool we talked about rems and ms i went over at the beginning i went over how i built this animation using clip paths we're going to be using clip paths a lot more um in these videos and i have some really interesting ideas for club paths um but yeah stay tuned for a a specific video on how to create this and the design is going to be really cool um show so yeah i'm just thinking if there's anything else i want to cover maybe we'll just try to create this parallax effect here on the home page let's see how far we got uh yeah looks alright and i'm going to place uh let's see here yeah so as the screen changes size that's going to affect yeah that's why i don't like that the mountain cropped out the the guy that i don't think that was necessary uh let's see here so we fixed the the uh the sky let's make it high dpi no that that's no good let's see 100 okay thank you thank you excellence appreciate it uh let's see so yeah that's kind of the effect i want where the the sky stays fixed and the mountain comes in then we have this issue here so i'm going to have to let's just try to figure this one out real quick maybe if i place this in a div block no and let's see mountain image and grass image so yeah let me do something like this i'll just remove that and remove this and i'll set both of these to position absolute and top make sure this div block has a position of relative oh dope um let me check that out real quick uh gentilejeed.com this is super nice um all right cool so yeah i'm just checking out your site genteel it's very nice you got some nice animation um yeah i'll just go ahead and showcase it real quick so this is genteel's site and it's very nice this is very cool really like the slider up here then i like these hover effects so was this built in web flow let me just take a look uh [Music] doesn't no it's wordpress uh but still still very nice i mean yeah you can get nice sites with wordpress but yeah hopefully these streams will help you build in webflow definitely but it's a cool site for sure oh yeah it's definitely cool all right i'll definitely check this out genteel it's dope oh and you have a mouse animation too oh look at that oh that's nice yeah so this is this feels like a lottie animation here this uh mouse icon yeah it uh we have this animation to the mouse that could be a cool thing i cover i could cover as well yeah good stuff nice yeah check that out everyone uh genteel g.com she's got some really good stuff all right very nice i'm gonna yeah i'll spend a bit more time with it after the stream it looks really cool um nice so so yeah i think we're ending near the end of the stream shoe let's see what am i doing here oh yeah so position i want to set both of these to position absolute and top excuse me did that work yeah and then i can move this grass image down uh let me set it to the bottom actually grass image mountain image uh this is set to relative um why is the grass image on top and this div block all right so div block let's move it down um oh position relative the mountain and the sky image is set to sticky [Music] and this yeah let's try this um so the sky image we have the div block all right so yeah i'll play around with this it's not quite doing what i want it to do so maybe i have to apply position sticky to the hero background all right just so i'm not scrolling too much in this live stream i'm gonna come back to this and we'll have something prepared for tomorrow oh i think position so div block this guy image should stay in place yeah but it's not okay diff block yeah it works like this actually and 100 [Music] 100 [Music] and let me just set it to relative and relative all right so i'll come back to this we won't spend too much time on this parallax effect all right a bill wrote i always wanted some parallax effect on my website but always seemed complicated for me you are making this parallax effect much easier yeah this is kind of a parallax effect in a way like we only have one object moving but it still makes it look parallax because one object is stationary while another one is moving which gives us that kind of parallax of feel yeah so what i think i'm gonna do in this case is um save this image as one image and that's just gonna save us a lot of kind of headaches if if this image wasn't didn't have this guy cropped out here we could create a much more unique parallax effect where the mountains are moving at a different speed than the guy here so everything looks like it's moving or everything would look like it has like a 3d depth to it or like yeah like parallax or like uh i don't know if you've seen like a like one of those i'm not gonna say chinese puppet shows but where they have like the dragons and stuff and everything's like overlaid and they have this these cool effects going like if this image didn't have the guy cropped out um we could create something more along those lines but for now in figma i'm just going to uh yeah thank you excellence appreciate it yeah enjoy the rest of the day for sure um nice and uh yeah so what i'll do is i'll save these two images together uh yeah so let's let's see how that looks and i don't think i saved them together actually yeah they're still separate um so let me group these group selection and then i'll export this selection let's do two times export and nice so now we have this as just one image cool so we'll go back back into webflow and i'm gonna have to compress the image again so get info [Music] yeah that's huge that's too big 4.8 megabytes don't ever add an image that's 4.8 megabytes to your site and i'm just going to compress it i resized it so i'm just going to compress it that's i don't i don't normally speak it in absolutes like that but you never want to add uh an image that's 4.8 megabytes to the site that's that would really affect the low time of the site all right um so let's see here so i've reduced the size 589 that's okay not great but it's okay so go ahead and add that in there and then i'll just delete this image and we'll just replace this mountain image with uh this one we just added so now when we scroll this guy stays in place and we have this going on here so this will be cool um i just have to move it up a bit more it's a little bit low so yeah what i'll do is i'll set this to a position of absolute and we'll just move it down move it down 25 cool all right um sky image mount image huh so i guess when setting something to position sticky yeah it doesn't i can't set this the other elements have to be a position relative i guess maybe that's something new i'm learning i haven't used position sticky too much here i'll just use margin i don't really like using margin this this way feels a little bit hacky but it works negative 50 or negative uh negative 35 yeah that's that's gonna have to do for now yeah so we just built this this section and the next thing we'll do is add this text at the top and the menu and all these different elements uh but yeah this is just gives us something to do while no one has questions or you know just something for me to build in the background and for us to continue to learn webflow and as other questions come in you know those take precedence but this is what what we will be building uh during the live streams this week we're definitely going to learn a lot of new things in webflow as you can see i'm already learning a few things with position sticky um but yeah i think i'm going to end the stream here we covered a lot of very cool things um this mouse interaction this interaction uh this was using custom code we got a little bit into this build so we're gonna build out this figma file if you want this figma file um it is here let me zoom out i'll leave a link in the chat actually so you can grab it this figma file was from yeah right here so i'll post this here in the chat and you can just download it it's the first one here and you can look at other figma files that they have we actually built this one in last week's live stream or the last few weeks of live stream but yeah just having fun building in web flow i'm not a huge fan so far of this just because the image quality here is really low and i'm not exactly sure why i don't know if i can get it to higher quality but here in this figma file yeah it looks like this image isn't good quality in the figma file either typically when i build a site what makes it enjoyable is working with good assets uh working with good assets yeah makes a build much more enjoyable because if you're building a site and the assets are all grainy and distorted and bad quality well then you're not going to really have a lot of fun building it because you're you're already thinking well it doesn't look great you know like the image quality is really bad so so yeah uh and if it does bother me too much then we'll think of something else or maybe i'll go to unsplash and crop a few images myself maybe we'll learn how to use photoshop a bit more um and yeah i mean i do know how to crop images in photoshop so doing something like this in photoshop would not be difficult like we can go to unsplash and just uh just get like our own images person on a mountain right yeah so this this could work like any of these could work and we could create like a really unique parallax effect yeah so maybe let's do that we'll we'll work with uh we'll work with some of these um yeah we'll see i'll try to spend some time cropping and uh maybe we can we can have some fun with with photoshop for sure i'm just trying to think yeah cool i'm just trying to get some ideas here but yeah we'll look at that tomorrow uh yeah thanks for the passion for the product and sharing it with us absolutely joseph uh nice can we get asses yeah so omkar uh i just left the link um hopefully it showed up to sleekui.com it's it can be found here so if the link didn't show up in chat it's here it's sleekui.com slash free figma website templates and then you can just copy or duplicate the project it's the first one here just duplicate it into your figma account right so yeah if uh yeah this image is just really bad quality if uh if i decide not to work with this one that will work with photoshop tomorrow to to crop these images and create an even more unique uh parallax effect all right so cool i think i'm gonna go ahead and end the live stream uh joseph i will follow up with you right after this live stream and uh and a bill i'll be i'll follow up with you as well all right everyone have a good rest of the day thanks so much yeah i'll send it to you bill just uh give me one second send that over um yeah have a good rest of the day everyone and i will see you tomorrow at 12 p.m central time and we'll continue building and web flow all right have a great evening thank you you

Channel: WebDev For You

Views: 374

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design

Id: Ph-d_qql0tI

Length: 79min 25sec (4765 seconds)

Published: Mon Sep 13 2021