JavaScript ScrollLoopMenu Plugin

0 0 1 minute read

In this article, we will learn how to implement the Scrolling Loop Menu using JavaScript-based ScrollLoopMenu plugin. It is another type of simple and interactive scrolling menu used in developing web pages for getting some nice visual effects.

Note: Please download the JavaScript ScrollLoopMenu plugin in the working folder and include the required files in the head section of your HTML code.

<link href=”https://use.typekit.net/rtr2vsr.css” rel=”stylesheet” type=”text/css”/>
<link href=”css/base.css” rel=”stylesheet” type=”text/css”/>
<script src=”js/index.js”></script>

Example: The following example demonstrates the scrolling loop menu using HTML controls and JavaScript based ScrollLoopMenu plugin. Different classes like “menu”, “menu__item-inner”, “frame__link” of the of “base.css” file of the plugin are attached to the HTML tags as shown below for the expected output.

html

<!DOCTYPE html>
<html lang="en" class="no-js">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1" />
    <title>Scroll Loop Menu Plugin</title>
    <meta name="description"
          content="scroll loop animation." />
    <meta name="keywords"
          content="Enter keywords in your web page" />
    <link rel="stylesheet"
          href=
"https://use.typekit.net/rtr2vsr.css" />
    <link rel="stylesheet"
          type="text/css"
          href="css/base.css" />
</head>
 
<body>
    <div class="frame">
        <h1 class="frame__title">
            GFG Scroll Loop Menu
        </h1>
        <div class="frame__links">
            <a href=
"https://www.zambiatek.com/javascript-tutorial/"
               class="frame__link">
                JavaScript
            </a>
            <a href=
"https://www.zambiatek.com/css-tutorials/"
               c lass="frame__link">
                CSS
            </a>
        </div>
        <span class="frame__button"
              aria-hidden="true">
            Close
        </span>
    </div>
    <nav class="menu">
        <div class="menu__item">
            <a class="menu__item-inner">
                Algorithms
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Data Structures
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Languages
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Interview Corner
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                GATE
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                ISRO CS
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                UGC NET CS
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                CS Subjects
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Web technologies
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Programming
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Careers
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Internship
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Placement course
            </a>
        </div>
        <div class="menu__item">
            <a class="menu__item-inner">
                Geek of the Month
            </a>
        </div>
    </nav>
    <script src="js/index.js"></script>
</body>
 
</html>