luxy js - Javascript

Simple & lightweight javascript library to make elements follow the users scroll.

Introduction

luxy js is a lightweight and easy-to-use javascript library that allows elements on a webpage to smoothly follow the user's scroll. It provides a simple way to create stunning parallax effects or add subtle animations to your website.

Features

• Easy to setup and use.
• Smooth and natural scrolling effects.
• Works on both desktop and mobile devices.
• Lightweight and fast.
• Customizable options for advanced usage.

Installation

To start using luxy js in your project, you can either download it directly from the GitHub repository or use a package manager like npm:

npm install luxy-js

Include the luxy js script in your HTML file:

<script src="path/to/luxy.js"></script>

Usage

HTML Markup

First, add the necessary markup to your HTML file:

<div class="luxy-el" data-speed="0.1">
  <!-- Your element content goes here -->
</div>

Here, the data-speed attribute defines the scrolling speed of the element. A value of 0 means the element will stay fixed, while a value of 1 means the element will follow the scroll at the same speed. You can adjust this value to achieve the desired effect.

Initialize luxy js

To start using luxy js, simply call the luxy.init() function in your javascript:

luxy.init();

You can also customize the options by passing an object parameter to the init() function:

luxy.init({
  wrapper: '#luxy-wrapper',
  targets: '.luxy-el',
  wrapperSpeed: 0.08,
  targetSpeed: 0.02,
  vertical: true,
  horizontal: false
});

Here are some important options you can customize:

• wrapper: Selector for the wrapper element (default: document.body).
• targets: Selector for the elements to apply the scroll effect (default: .luxy-el).
• wrapperSpeed: Scrolling speed of the wrapper element (default: 0.1).
• targetSpeed: Scrolling speed of the target elements (default: 0.1).
• vertical: Enable or disable vertical scrolling effect (default: true).
• horizontal: Enable or disable horizontal scrolling effect (default: true).

Examples

Example 1: Simple Parallax Effect

<div class="luxy-el" data-speed="0.2">
  <!-- Your element content goes here -->
</div>

<script>
  luxy.init();
</script>

Example 2: Customized Options

<div id="luxy-wrapper">
  <div class="luxy-el" data-speed="0.1">
    <!-- Your element content goes here -->
  </div>
</div>

<script>
  luxy.init({
    wrapper: '#luxy-wrapper',
    targets: '.luxy-el',
    wrapperSpeed: 0.05,
    targetSpeed: 0.02
  });
</script>

Conclusion

luxy js is a powerful javascript library for creating smooth scrolling effects on webpages. With its simplicity and lightweight nature, it is a great choice for adding subtle animations or parallax effects to your website. Give it a try and enhance your user experience today!

For more information and detailed documentation, visit the official luxy js GitHub repository.

Note: Don't forget to include the required CSS for styling the elements properly.