Choose a layout
Font family

Ripple Effect

A grid of cells that ripple when clicked.

Report an Issue

Table of contents

  • Interactive Background Boxes Ripple Effect

    Hover over the boxes above and click.To be used on backgrounds of hero sections OR Call to Action sections. I beg you don't use it everywhere.

PR

Installation

To install, just include the following JavaScript somewhere on your page: 

<!-- Load the core file first -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft-core.iife.js"
></script>


<!-- Load the component -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft/bg-ripple-effect.iife.js"
></script>

Important notes

  • Make sure your project is using either Frankenstyle or FrankenstyleKit.
  • The order of JavaScript loading is important. The ft-core.iife.js file must be loaded before any other components.
  • When using multiple Frankternity components, the core file only needs to be loaded once.

Props

To pass props, include them as JSON inside a <script> tag with the data-fn="props" attribute.

Note The data-ft-* attribute determines which Frankternity component is mounted and should be replaced with the component name.

PropTypeDefaultDescriptionRequired
rowsnumber8Number of rows in the grid.No
colsnumber27Number of columns in the grid.No
cellSizenumber56Size of each square cell in pixels.No