Get started with basicscroll CDN

MIT licensed

BasicScroll is a library for creating custom, animated scrolling effects on web pages.

Tags:
  • parallax
  • scroll
  • scrolling

Stable version

Copied!

How to start using basicscroll CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with basicscroll CDN - cdnhub.io</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.cdnhub.io/basicscroll/3.0.4/basicScroll.min.js"></script>
</head>
<body>
    <div id="container" style="height: 100vh; overflow: auto;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit. Sed euismod, nisi quis scelerisque bibendum, quam tellus rhoncus nisl, sed commodo ipsum leo eget elit.</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('container');
            const scroll = new window.BasicScroll(container, {
                headerTransform: 'translateY(0px)',
                footerTransform: 'translateY(0px)',
                wheelPropagation: false,
                inertia: false,
                smoothScrolling: true,
                scrollingX: false,
                scrollingY: {
                    duration: 1000,
                    easing: 'easeInOutQuint'
                }
            });
        });
    </script>
</body>
</html>
Copied!

All versions