horizontal-scroll-animation-package

v1.0.0

Published

7 months ago

Horizontal Scroll Animation is a lightweight JavaScript package that allows you to create horizontal scroll animations easily. You can control the scroll direction (left or right) and scroll speed (fast or slow) by setting specific classes and IDs in your

Downloads

0High
0Medium
0Low

nanaakosua

Horizontal Scroll Animation

Description

Installation

To use Horizontal Scroll Animation in your project, install it via npm:

npm install horizontal-scroll-animation

Usage

Include the Script: Add the script to your HTML file using a <script> tag. You can reference the script from the node_modules directory:
```
<script src="./node_modules/horizontal-scroll-animation/index.js"></script>
```

Create Your Content: Create a container <div> for your content with specific classes and IDs to control the animation:

<div class="container">
  <div class="content right" id="fast">
    <!-- Your content here -->
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <!-- Add more items as needed -->
  </div>
</div>

Use the class right or left to set the scroll direction (right or left).
Use the ID "fast" or "slow" to set the scroll speed (fast or slow).

Initialize the Animation: Initialize the horizontal scroll animation in your JavaScript file or directly in your HTML using a script tag:

<script>
  window.addEventListener("DOMContentLoaded", () => {
    // Animation is automatically initialized based on the classes and IDs in your HTML
  });
</script>

View in Browser: Open your HTML file in a web browser. The horizontal scroll animation should now be active based on the settings you provided in your HTML code.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scroll Animation Example</title>
<script src="./node_modules/horizontal-scroll-animation/index.js"></script>
</head>
<body>
  <div class="container">
    <div class="content right" id="fast">
      <!-- Your content here -->
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <!-- Add more items as needed -->
    </div>
  </div>

  <script>
    window.addEventListener("DOMContentLoaded", () => {
      // Animation is automatically initialized based on the classes and IDs in your HTML
    });
  </script>
</body>
</html>

License

This package is licensed under the MIT License. See the LICENSE file for details.

Published

Vulnerabilities

Links

Maintainers

Keywords