Locomotive JS

Ayush Kumar's photo
Ayush Kumar
·

1 min read

Locomotive JS

1.Locomotive CDN:

2.Similarly Copy - css CDN

& paste the link in link:css of html

3.Finally: Boiler Plate for Locomotive

Will look like,

Locomotive Design: The Super Parent Div or Tag - Should not have height & width. ⚠️ 🚨 💀

EDIT script.js file:

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});
  • You Can add you topmost parent element 🔽
// FileName: script.js
const scroll = new LocomotiveScroll({
    el: document.querySelector('#main'),
    smooth: true
});

HTML File: Boiler Plate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
    <link rel="stylesheet" href="style.css">
    <title>Locomotive </title>
</head>
<body>
    <div id="main" data-scroll-container>
        <div id="page1" class="pages" data-scroll ></div>
        <div id="page2" class="pages" data-scroll data-scroll-speed="-1" ></div>
        <div id="page3" class="pages" data-scroll ></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.js"></script>
    <script src="script.js"></script>
</body>
</html>

4.GitHub - Locomotive

Use All Features by locomotive - github documentation🔗

locomotive