Scape.js

What Is This?

How It Works

The package dynamically generates shapes or images and animates them across the screen. You can customize the type, size, color, and animation of the elements.

            
// Example Configuration
window.ScapeConfig = {
  type: 'shape', // 'image' or 'shape'
  shape: 'star', // Shape type
  count: 30, // Number of elements
  size: 10, // Size of each element
  fillColor: 'hsla(200, 90%, 60%, 0.8)', // Fill color
  strokeColor: 'rgba(255, 255, 255, 0.5)', // Stroke color
  strokeWidth: 2, // Stroke width
};
            
          

How to Implement

Follow these steps to add the Scape.js to your website:

1. Include the script in your HTML file:

                   
   <script src="https://cdn.jsdelivr.net/gh/Ali-Cheikh/scape.js@main/scape.js"></script>
   <script src="config.js"></script>
                   
                 

   Copy
2. Create a config.js file to customize the background:

                   
   window.ScapeConfig = {
     type: 'shape',
     shape: 'star',
     count: 30,
     size: 100,
     fillColor: 'hsla(200, 90%, 60%, 0.8)',
     strokeColor: 'rgba(255, 255, 255, 0.5)',
     strokeWidth: 2,
   };
                   
                 

   Copy
3. For image-based backgrounds, use this configuration:

                   
   window.ScapeConfig = {
     type: 'image',
     imageUrl: 'path/to/your/image.png',
     count: 20,
     size: 50,
     spacing: 100,
     minDistance: 30,
     animationDuration: '3s',
     floatDistance: 20,
     rotationRange: 45,
     opacity: 0.8
   };
                   
                 

   Copy

API Documentation

Control your background dynamically with these methods:

Important Note All API methods should be called after the DOM is fully loaded. Wrap your code in an event listener:

            
document.addEventListener('event/action', () => { 
  // Your Scape.js code here e.g. Scape.refresh() etc
});
             

⚠️ Be cautious when using the destroy() method instead of document.add.. use window.add..

Live Demo

Here's a live example of the Scape.js in action: