Web Scroll Effect – Locomotive Scroll JS

You are bored with static/non-moving websites. You feel your website should be a bit animated to improve the user experience[UX]. Scrolling a website with just plain text and images is really boring. We hope to see some animation. Locomotive Scroll JS is a Javascript library that helps to do all the CSS and Javascript heavy lifting when you try to produce web animation. Lets look at what we need to produce good website

How to implement Locomotive Scroll JS

Sample of the code from github : https://github.com/locomotivemtl/locomotive-scroll

//HTML Files

    <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM” crossorigin=”anonymous”>

    <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js” integrity=”sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz” crossorigin=”anonymous”></script>

    <link rel=”stylesheet” href=”locomotive-scroll.css”>

<div data-scroll-container>
<div data-scroll-section>
<h1 data-scroll>Hey</h1>
<p data-scroll>👋</p>
</div>
<div data-scroll-section>
<h2 data-scroll data-scroll-speed="1">What's up?</h2>
<p data-scroll data-scroll-speed="2">😬</p>
</div>
</div>
<script src="locomotive-scroll.min.js"></script>

//Javascript
<script>
    (function () {
        var scroll = new LocomotiveScroll();
    })();
</script>

You need two important files to make this file works. The files can be obtained from github. Link has been attached above

1. locomotive-scroll.min.js
2. locomotive-scroll.css

Take a look a the tutorial for more example.

This is another demo for reference where i used lerp and delay

If you are looking forward to implementing this scroll effect, you can seek my help. We are able to assist