3 replies

Infinite horizontal scroll menu

Hi everyone! I'm looking for a bit of guidance on the following: I'd like to make an infinite horizontal scroll-menu, preferably where the middle "card" is a bit larger than the others. My absolute dream would be to create something like the (purple) image. However that was coded in GSAP and looks a bit too complicated for me. Hence I'm looking for alternatives. Do you have any tips/Youtube-vids on what do to next, without making it instantly complicated?

What I have so far
It's just a simple set-up so far. The second image is what it looks like at the moment.

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite(['resources/css/app.css','resources/css/home.css', 'resources/css/layout.css', 'resources/js/home.js'])
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <title>Home</title>
</head>
<body>
    <div class="scrollmenu">
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" ><!-- 1 INTERNET -->
    <img src="{{ asset('/asset/img/frontend.jpg') }}"width="480" height="480" ><!-- 2 FRONTEND -->
    <img src="{{ asset('/asset/img/backend.jpg') }}"width="480" height="480" ><!-- 3 BACKEND -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 4 FULLSTACK -->
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" > <!-- 5 ONDERHOUDBARE SOFTWARE -->
    <img src="{{ asset('/asset/img/git.jpg') }}" width="480" height="480" > <!-- 6 TOOLING -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 7 SCRUM -->
</div>
</body>
</html>

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite(['resources/css/app.css','resources/css/home.css', 'resources/css/layout.css', 'resources/js/home.js'])
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <title>Home</title>
</head>
<body>
    <div class="scrollmenu">
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" ><!-- 1 INTERNET -->
    <img src="{{ asset('/asset/img/frontend.jpg') }}"width="480" height="480" ><!-- 2 FRONTEND -->
    <img src="{{ asset('/asset/img/backend.jpg') }}"width="480" height="480" ><!-- 3 BACKEND -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 4 FULLSTACK -->
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" > <!-- 5 ONDERHOUDBARE SOFTWARE -->
    <img src="{{ asset('/asset/img/git.jpg') }}" width="480" height="480" > <!-- 6 TOOLING -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 7 SCRUM -->
</div>
</body>
</html>

div.scrollmenu {
    background-color: white;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    gap: 20px;

}

.scrollmenu img {
    display: inline-block;
}

div.scrollmenu a:hover {
    background-color: #777;
}

div.scrollmenu {
    background-color: white;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    gap: 20px;

}

.scrollmenu img {
    display: inline-block;
}

div.scrollmenu a:hover {
    background-color: #777;
}

Bit of background
A couple of months ago I quit my job to have myself re-schooled into software engineer. As for my final project I have to make a portfolio and I taught it would be a nice challenge to make a site from my portfolio.
As the other pieces are rather 'simple', I want the first page to have something more challenging. I don't use any frameworks, just Javascript/CSS/Html and a tiny bit of PHP.

KP-C

Kevin Powell - Community•2y ago•

3 replies

Wu-Knows.

Infinite horizontal scroll menu

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite(['resources/css/app.css','resources/css/home.css', 'resources/css/layout.css', 'resources/js/home.js'])
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <title>Home</title>
</head>
<body>
    <div class="scrollmenu">
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" ><!-- 1 INTERNET -->
    <img src="{{ asset('/asset/img/frontend.jpg') }}"width="480" height="480" ><!-- 2 FRONTEND -->
    <img src="{{ asset('/asset/img/backend.jpg') }}"width="480" height="480" ><!-- 3 BACKEND -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 4 FULLSTACK -->
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" > <!-- 5 ONDERHOUDBARE SOFTWARE -->
    <img src="{{ asset('/asset/img/git.jpg') }}" width="480" height="480" > <!-- 6 TOOLING -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 7 SCRUM -->
</div>
</body>
</html>

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite(['resources/css/app.css','resources/css/home.css', 'resources/css/layout.css', 'resources/js/home.js'])
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <title>Home</title>
</head>
<body>
    <div class="scrollmenu">
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" ><!-- 1 INTERNET -->
    <img src="{{ asset('/asset/img/frontend.jpg') }}"width="480" height="480" ><!-- 2 FRONTEND -->
    <img src="{{ asset('/asset/img/backend.jpg') }}"width="480" height="480" ><!-- 3 BACKEND -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 4 FULLSTACK -->
    <img src="{{ asset('/asset/img/uml.jpg') }}" width="480" height="480" > <!-- 5 ONDERHOUDBARE SOFTWARE -->
    <img src="{{ asset('/asset/img/git.jpg') }}" width="480" height="480" > <!-- 6 TOOLING -->
    <img src="{{ asset('/asset/img/uml.jpg') }}"width="480" height="480" ><!-- 7 SCRUM -->
</div>
</body>
</html>

div.scrollmenu {
    background-color: white;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    gap: 20px;

}

.scrollmenu img {
    display: inline-block;
}

div.scrollmenu a:hover {
    background-color: #777;
}

div.scrollmenu {
    background-color: white;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    gap: 20px;

}

.scrollmenu img {
    display: inline-block;
}

div.scrollmenu a:hover {
    background-color: #777;
}

Infinite horizontal scroll menu

Infinite horizontal scroll menu

Similar Threads

Similar Threads

Similar Threads