Simba Grid

Infinite grid scroll.

View Online Demo

Table of Contents

• Installation
• Implementation
  • Method 1
  • Method 2
  • Method 3
• Options
• License

Installation

[A] Download

• simba-grid.min.js - Minified
• simba-grid.js - Unminified

[B] Package

• Install with npm: npm install simba-grid

• Install with yarn: yarn add simba-grid

[C] Get a local working copy of the development repository (Optional) git clone https://github.com/Rodgath/simba-grid.git

Implementation

There are several methods you can use to add Simba Grid into your project.

Method 1

Initializing with simbaGrid function. View Demo

Your HTML code with images

<div class="my-simba-grid">
  <img src="./images/01.jpg" alt="Image 01">
  <img src="./images/02.jpg" alt="Image 02">

  <!-- More Images Here -->
  
  <img src="./images/20.jpg" alt="Image 20">
  <img src="./images/21.jpg" alt="Image 21">
</div>

Call the simbaGrid() function with two arguments.

...1) The element 'class' or 'id' holding the images

...2) The 'options' object

document.addEventListener('DOMContentLoaded', function () {
  simbaGrid('.my-simba-grid', {
    animationStyle : 'rotate'
  });
});

Enqueue the simbaGrid script at the bottom of your markup

• Using local script file.

<script src="simba-grid.min.js"></script>
<!-- OR -->
<script src="./node_modules/simba-grid/dist/js/simba-grid.min.js"></script>

• Using CDN file. (Optional)

<script src="https://cdn.jsdelivr.net/npm/simba-grid@latest/dist/js/simba-grid.min.js"></script>

↑ TOP ↑

Method 2

Using data-simba-grid attribute. View Demo

Your HTML code with images

<div data-simba-grid='{ "animationStyle": "zoomRotate", "cols": "4" }'>
  <img src="./images/01.jpg" alt="Image 01">
  <img src="./images/02.jpg" alt="Image 02">

  <!-- More Images Here -->
  
  <img src="./images/20.jpg" alt="Image 20">
  <img src="./images/21.jpg" alt="Image 21">
</div>

Enqueue the simbaGrid script at the bottom of your markup

• Using local script file.

<script src="simba-grid.min.js"></script>
<!-- OR -->
<script src="./node_modules/simba-grid/dist/js/simba-grid.min.js"></script>

• Using CDN file. (Optional)

<script src="https://cdn.jsdelivr.net/npm/simba-grid@latest/dist/js/simba-grid.min.js"></script>

↑ TOP ↑

Method 3

Using JSON object of images

...[A] - Adding the JSON object inside the data-simba-grid attribute. View Demo

<div data-simba-grid='{ "animationStyle": "zoom", 
    "cols": "4", 
    "rows": "4", 
    "gap": "4", 
    "rowHeight": "150", 
    "images": [
      { "src": "./images/01.jpg", "title": "Image 01" },
      { "src": "./images/02.jpg", "title": "Image 02" },
      
      // More Images Here

      { "src": "./images/20.jpg", "title": "Image 20" },
      { "src": "./images/21.jpg", "title": "Image 21" }
    ]
  }'></div>

...[B] - Add the JSON object inside the simbaGrid function. View Demo

HTML code.

<div class="image-rotation-box image-spin-demo"></div>

JavaScript code

document.addEventListener('DOMContentLoaded', function() {
   simbaGrid('.image-rotation-box', {
        animationStyle: 'zoom', 
        width: 1300, 
        cols: 6, 
        rows: 4, 
        gap: 10, 
        rowHeight: 200, 
        images: [
          { "src": "./images/01.jpg", "title": "Image 01" },
          { "src": "./images/02.jpg", "title": "Image 02" },
        
        // More Images Here

          { "src": "./images/20.jpg", "title": "Image 20" },
          { "src": "./images/21.jpg", "title": "Image 21" }
        ]
    });
});

↑ TOP ↑

Options

Name | Type | Default | Description :--- | :--- | :------ | :---------- width | number | 1200 | Width of each grid group. cols | number | 3 | Grid columns for each grid group. rows | number | 3 | Grid rows for each grid group. rowHeight | number | 280 | Grid row height. gap | number | 0 | Space between grid items. scrollSpeed | number | 1 | Grid scrolling speed. Min is 1. scrollDirection | string | 'left' | Scroll direction. Possible values: 'left' or 'right'. pauseOnHover | boolean | true | Whether to pause scrolling movement when grid is hovered on. shuffle | boolean | false | Whether to shuffle grid items when grid is loaded. animationStyle | string | 'zoom' | Grid items entry animations. Possible values: 'zoom', 'rotate', 'zoomRotate'

License

simbaGrid is an open-source project released under the MIT license.

Crafted by Rodgath

↑ TOP ↑