Join Our Community Join!

How To Design Or Create Marquee Logo Slider Using Only HTML And CSS

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


A CSS marquee logo slider with auto play is a great way to showcase your brand or logo in a dynamic and eye-catching way. Essentially, this type of slider uses CSS animations to create a scrolling effect for a series of logos or images, and it can be set up to automatically play on a loop.



How To Create



To create a marquee logo slider, you'll need to have some basic knowledge of HTML and CSS. Here are the basic steps to get started:



  • Create an HTML container for your logo slider, using a div element with a class name that you can reference in your CSS.


  • Inside the container, create a series of img elements for each of the logos or images you want to display. Give each image a class name that you can reference in your CSS.


  • In your CSS, set up the container element with a fixed height and width, and set the overflow property to "hidden" to hide any logos that are outside the container.


  • Use CSS animations to create a scrolling effect for the logo images. This can be done by setting up a keyframe animation that moves the images from left to right or right to left, depending on your preference.


  • 5.Finally, use JavaScript to set up an auto-play function that will automatically start the animation and loop through the logos.


  • Here Is A HTML



     <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

    <article class="wrapper">
    <div class="marquee">
    <div class="marquee_group">
    <i class="fa fa-adn"></i>
    <i class="fa fa-amazon"></i>
    <i class="fa fa-android"></i>
    <i class="fa fa-apple"></i>
    <i class="fa fa-bitcoin"></i>
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-github"></i>
    <i class="fa fa-html5"></i>
    </div>
    <div aria-hidden="ture" class="marquee_group">
    <i class="fa fa-adn"></i>
    <i class="fa fa-amazon"></i>
    <i class="fa fa-android"></i>
    <i class="fa fa-apple"></i>
    <i class="fa fa-bitcoin"></i>
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-github"></i>
    <i class="fa fa-html5"></i>
    </div>
    </div>


    <div class="marquee marquee-reverse">
    <div class="marquee_group">
    <i class="fa fa-adn"></i>
    <i class="fa fa-amazon"></i>
    <i class="fa fa-android"></i>
    <i class="fa fa-apple"></i>
    <i class="fa fa-bitcoin"></i>
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-github"></i>
    <i class="fa fa-html5"></i>
    </div>
    <div aria-hidden="ture" class="marquee_group">
    <i class="fa fa-adn"></i>
    <i class="fa fa-amazon"></i>
    <i class="fa fa-android"></i>
    <i class="fa fa-apple"></i>
    <i class="fa fa-bitcoin"></i>
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-github"></i>
    <i class="fa fa-html5"></i>
    </div>
    </div>
    </article>




    </body>
    </html>


    Here Is A CSS



     :root{
    --color-text:#000;
    --colog-bg:#000;
    --color-bg-accent:#FFE018;
    --size:clamp(10rem, 1rem + 40vmin, 30rem);
    --gap:calc(var(--size) / 14);
    --duration:60s;
    --scroll-start:0;
    --scroll-end:calc(-100% - var(--gap));
    }

    *{box-sizing: border-box;}
    body{
    display: grid;
    align-content: center;
    overflow: hidden;
    gap:var(--gap);
    width: 100%;
    min-height: 100vh;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--colog-bg);
    }
    .marquee{
    display: flex;
    overflow: hidden;
    user-select: none;
    gap:var(--gap);
    }
    .marquee_group{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap:var(--gap);
    min-width: 100%;
    animation: scroll-x var(--duration) linear infinite;
    }
    .marquee-reverse .marquee_group{
    animation-direction: reverse;
    animation-delay: -3s;
    }
    @keyframes scroll-x{
    from{transform: translateX(var(--scroll-start));}
    to{transform: translateX(var(--scroll-end));}
    }
    .fa{font-size: 70px!important}
    .marquee .fa{
    display: grid;
    place-items:center;
    width: var(--size);
    fill: var(--color-text);
    background: var(--color-bg-accent);
    aspect-ratio:19/9;
    padding: calc(var(--size) / 10);
    border-radius: 0.5rem;
    }
    .wrapper{
    display: flex;
    flex-direction: column;
    gap:var(--gap);
    margin: auto;
    max-width: 100vw;
    }
    Related Posts
    Hi I am Samir From Bangladesh. I Will Create A Ui/Ux Website And Blogger Theme. I like to playing to code.

    1 comment

    1. hi bro

    Cookies Consent

    This website uses cookies to ensure you get the best experience on our website.