How to Webflow: Infinite marquee - Tutorial (2019)

everyone welcome to another how to web flow earlier today I asked you on a YouTube poll what should I record tonight and the options were bottom mobile menu an infinite marquee or responsive card UI and the winner was infinite marquee so that's what I'll be showing you today and it looks a little bit like this and as you can see it just keeps going and going and going and it's really simple to do the only tricky part is setting up the element structure and the interaction is actually the easiest part so yeah I'll show you how to do that right now all right infinite marquee so the trick with this is really how to set up all the elements alright so here we go first element I'm gonna do is let's just do a section in this section we're gonna call it rapper and this rapper I'm gonna give it a padding on each side of 10 nothing too complicated just 10 and we want to set the overflow to hidden because we don't want anything that's leaving this wrapper we don't want anything that's too far to the right or too far to the left to make the browser window have a horizontal scrollbar okay so this is our mask masking element that's why we have overflow:hidden all right next let's go ahead and add a div block and div block we're gonna call this a marquee wrapper okay so this is gonna hold the the things that are like going across and we'll go ahead and set this to flex all right because we want both both rows of content to be all in one row okay or I mean both divs of content you'll get it just just keep watching alright so here we go we have the marquee wrapper and we're gonna set the width of that to 200% okay so that's two hundred percent of its parent which is this guy right here alright and so that's why you can't have that's why I can't scroll left and right because I have the rapper this one right here with overflow:hidden but this one is going to hundred percent of its parent so there we go alright next let's put in our first mark key element I mean our key element what's the thing oh yeah Marky div all right so I'm gonna call it Mar key cool and we're gonna set this as 100% no sorry 50% of its parent okay so this is 200 percent and there's a 50% all right got it which 50% here is a hundred percent of this yeah he get it come on alright next let's go ahead and put some content in here so I'm gonna make sample card so I'm gonna drop in a div block here this one's called card and we'll give this some padding of note we're gonna give this some margin of 10 on each side like that and we'll give it a border radius of 10 give it a border color of something light like this and we'll give it a height of 250 like that alright alright and let's give it a box shadow so this part right here however you want to style the content this is up to you this part like you don't really need to know about just style it however you want yeah nice and soft a soft shadow give it some sort of background color so you can see it alright so that's my card but I want multiple cards actually just put some text inside of here so this text needs to be centered so I'm gonna drag in a text block here and say hello world I'm gonna go back to the card and I want to set this to flex so all child elements will be centered vertically and horizontally and this for this marquee all elements within this marquee row will have a flex and will push them off to this side like this okay and we can take this card and go copy paste paste paste hmm let's just make them stretch boom okay cool sounds good looks good I'm copy and paste this yeah five is fine something like this alright so we have our cards okay now remember I said we're gonna have two rows but we make them into one row because of the Flex box on marquee wrapper watch under press paste and there we go so as you can see right here that little guy I'm trying to scroll left and right but I can't because I have the overflow hidden on rapper but if you look right here that's the second marquee so here's the first one and here's the second one so he's kind of offstage ready to start walking in right so our elements are set we are ready to go for inter interactions but let's let me summarize what I just did okay so to recap rapper give it a padding of 10 on each side overflow:hidden so that way we can mask out anything that's beyond the actual width of this rapper okay marquee rapper so this one is the thing that goes beyond the rapper okay so with 200% and we set this display to flex because we want both of the child rows to actually be one room okay and then our mark he so we can take our bar key and put any content we want inside of it we set the width to 50% all right and we display flex on this one as well because we want everything all in one row and then these cards that's just my content and you can replace these cards with whatever you want and yes you can clone this go ahead and clone this one when you see this video clone it reverse-engineer learn from it use it on your own project whatever you want to do alright so hopefully this makes sense to Marquis 50% this is two hundred percent 100% with got it interactions here we go I'm gonna go here oops yeah so I'm going to go to interactions page trigger page load so when the page finishes loading start in animation create a new timeline I'm gonna call this marky-mark and we'll take this Marquis press plus move and we're going to effect class not the selected element but anything with this class name alright now we're going to set the duration to however slow you want I'm gonna do Alice do you have ten seconds linear and I'm going to move everything with this class name negative one hundred percent all right now look what happened mark key number one right here is now off to the left but this Marquis up well you can't see it's still on the right button it's because I'm like hard to explain but all Marquis moves to the left one hundred percent of their width all right and so after that I go move and set the duration to so we want both marques to reset really quickly like instantly so that's why direction is zero percent and we set the X to zero percent and if I click out press loop preview around the world around the wait I hope I don't get copyright written or copyright strike for what I just did anyways see it's working not too hard okay so let me publish and look what I want to see what it looks like boom boom boom bum bum bum bum bum bum bum bum bum bum bum bum bum bum bum bum yeah so you get it it's working hope this helps alright that's it for this video thank you all so much for watching hopefully you learned a lot from this and all my previous videos if you are learning and you want to leave some feedback or have an idea for a future video or if you've used these tips in your website please put the link or your comment or your feedback below if you want to continue supporting me go ahead and click on the subscribe button the like button and also the notification bill if you want to tweet at me it's apt the pixel geek and that's it thank you all so much for watching and I'll see you in the next one and as always make the web beautiful together see ya

Channel: pixelgeek

Views: 14,200

Keywords: webflow tutorial 2019, pixel geek, modal, web development, html, content management system, webflow interactions, how to, css tricks, webflow tutorial, webflow, css, graphic design, design, cms, webflow cms, responsive web design, web design, pixelgeek, webflow collections

Id: 7Y3ochJTaKk

Length: 10min 37sec (637 seconds)

Published: Thu Oct 24 2019