Creating an infinite logo carousel with pure CSS

what's up YouTube Welcome Back to another edition of coding with Robbie as always I'm your host Robbie and in this video we're going to be building this logo Carousel I got right here so this is actually super easy to do and it's done with pure CSS so there's no JavaScript uh it can pause on Hover and we got these nice fade outs on the left and right so we're gonna Breeze right through this but before we do make sure to like subscribe leave a comment and uh let's get into it alright so I just recorded this whole video and the audio got messed up so this is take two and here's what I'll be starting out with so all these files are available for download in the description but we got a folder here with all the logos and then we got an empty index.html which links up to this style sheet right here which is completely empty and that's it so let's get right into it let's start in the style sheet right here and I'm just going to reset everything so let's go star and this just selects every single selector we can just go margin zero adding zero and then I'm gonna go box sizing Order Box this line just changes the Box model so that the padding is on the inside if that makes any sense you don't really have to worry about it uh pretty much every website nowadays has this um that looks good let's go to our body selector and let's just change the background color so let's go background we'll go number F2 F2 F2 and that's a nice light gray color and I just did that so we can differentiate the sections so now let's go to our HTML file and let's start writing it out so let's go inside the body and we'll have a div for our section let's go div class we'll call our section logos and then in here we're going to have a div class and we'll call it logos slide and then within this div we're going to have all our logos so to spare you some time I'm just going to paste it in but I just have an image tag for each logo within this logos folder right here so IMG and then the source is going to be dot slash the logos folder and then the file we're selecting let's save that and let's go to our uh website right here I'll refresh and here's what it looks like so let's start just by making all the images the same height so let's go into our style sheet and we can go dot logos slide and then we want to select all the image tags within there let's just go height is going to be let's do 50 pixels let's go back and refresh there we go the the next problem is that it's wrapping it's bringing this logo down to the next line so let's fix that and that's easy you can just go to the parent div so logos slide I'm gonna go white space and then put no wrap and this just makes it so it won't wrap no matter what let's go back refresh and now it overflows to the right and it actually creates this horizontal scroller which we don't like so that's another easy fix we can just go to the parent of this so let's go dot logos I'm gonna go overflow hidden go back there we go there's no more horizontal scroller so now let's add some space on the top and bottom of the section so right here we can just go padding and then we'll use the shorthand we'll go 60 pixel zero so if you just have two values here the first one is the top and bottom and the second one is the left and right and if you had four values it goes top right bottom left but uh we just want top and bottom for now so I'll go back to that go back refresh looks good let's give it a different background color so let's go background white refresh and now we can see uh where our section ends and the background begins so that looks pretty good let's put some space between the logos so we can do the same kind of thing we did here but with margin so let's go to the image tag down here we'll go margin we'll go zero uh 40 pixels and this will add 40 pixels on the left and the right of each image tag go back we'll refresh there we go we got some spacing and I think we're ready to animate this so let's go back and we'll go up here and we'll create a CSS animation let's go at keyframes and uh we have to name it let's just call it slide and then we're going to have a from and then a two and then we just put the properties we want to animate in here so we want to animate from we're going to do transform translate X and this just lets you uh basically transfer I don't know another word it lets you shift the element so on the X so X would be left and right Y is up and down Z is like rotating kind of so we want to animate from uh the initial position which is zero and then we want to go all the way to negative 100 percent so say the elements 100 pixels wide and we go to an uh negative 100 it's gonna go 100 pixels left so let's connect this to our element so let's go to logo slide we'll go animation and uh we'll make it a five second animation we wanted to use our slide animation which we declared right here uh we want it to run infinitely so it just Loops over and over again and then we want to put linear just so the animation is constant and there's no like speed up or slow down or anything so let's hit save and check it out now it slides so at five seconds it'll shift back and there we go so now to make it seamless we basically have to duplicate this so we have two side by side so once it shifts a hundred percent the second one will be the in the same exact position that the first one was in uh I can't speak right now so then if you shift it back it'll look like nothing even happened so check it out let's do that uh I don't want to do that so we're gonna have to duplicate um all those logos so let's copy this whole div right here save that and then let's uh take a look so now we have two of them we need to put these on the left and right of each other and we can do that the same exact way we did with uh these images right here so we can make this display inline block and then we gotta make it so uh they don't wrap so we can actually just move this up to the parent div since it'll Cascade down save that go back and uh let's wait five seconds and yeah it's working right now so the rest is kind of just uh bonus points so let's make it so you can uh pause it on Hover and to do that it's super easy let's make it so hey when someone hovers over the logos div we want to go down to logo slide and we want to go animation what's it called play State and we want to set it to paused just like that let's go back so now when we hover it pauses it and then let's slow it down it's going way too quick so 35 seconds go back and refresh I think that's a nice speed so now let's put some fade outs on the uh left and right so we're basically just gonna position a element absolutely on top of this to a linear gradient so we don't need to use extra divs we can just use the before and after on the logos div so this basically just gives us an extra div to work with it's not technically a div but it works like one we go logos dot dot before and uh we're gonna do position absolute we want it on the top and the left let's go with this uh 250 pixels height we want a hundred percent we want it to be relative to the parent so let's put position relative up here and then for now let's just go back round red so we can see it and then when you do before and after you have to have a Content property so let's go content uh we'll just do an empty string let's go back and refresh and here's that div we did or that before we did so let's make it sit on top of everything we just gotta change its Z index value set it to two which is above the default one go back now it's on top and I'll show you what content does if you did want to put like text in it or something that's what that's for but if you don't have it at all the before won't show they had deleted this we get nothing so that's why we have the empty string there and now we just gotta change this to a linear gradient let's go linear gradient let's go from transparent to let's just go red so we can see it and I don't know why but I think it's Safari doesn't like transparent so you actually want to do uh the RGB a value so two five five two five five two five five which is white and then zero opacity let's go back and it's gone from top to bottom so let's go uh and put two right comma that should change it and I did it backwards so it should be two left refresh there we go now let's make it white looks pretty good so now we just gotta do the opposite on the right so we can use the after for that let's go up here let's go dot logos we'll do before again and Dot logos after and uh most of this down here is going to be the same on both so we'll just copy it so it'll be all of this and uh the content the index and actually the left will only be on before so then let's copy this and do after and instead of on the left we want it to the right and then we have to flip the gradient so we'll go to right save it go back refresh and there we go it fades on the left and right all right so this is pretty much done uh there's one other thing we could do that's optional and it's kind of up to personal preference so if we go back to our HTML right here it's kind of weird to have duplicate content in my opinion like I think it would look cleaner if it was just one so we could duplicate this with JavaScript and it would still work the same and we wouldn't have duplicate HTML but it would then make it dependent on JavaScript so it wouldn't work without uh JavaScript but I'll show you how to do that uh just in case you're looking to do that so we can just delete this copy right here let's add a script tag down here just go VAR copy equal to document dot query selector let's get that logo slide and then we go dot clone node and then this takes a Boolean which is if we want to clone all the child elements also so we'll do true and then let's just append this copy to dot logos let's go document dot query selector dot logos dot append child we'll give it the copy we created which we stored on the copy variable and uh that's pretty much it let's see if that still works let's go to uh inspect logos zoom in and you can see we have uh the duplicate so it's working good and uh that's the video so I hope you enjoyed this one make sure to like subscribe leave a comment I know this was a short and sweet one but I'll be back with some longer videos if you have uh something CSS related that you want to see put in the comments and uh yeah I'll see you next time

Channel: Coding with Robby

Views: 117,505

Keywords:

Id: nAjR0Oj0J8E

Length: 12min 18sec (738 seconds)

Published: Wed Mar 08 2023