Easily Add Custom Text Watermarks to Web Pages – Watermark-lite

Watermark-lite is a lightweight and simple JavaScript plugin that adds text watermarks to web pages or specific elements.

The plugin gives you a lot of control over the appearance of your watermarks. You can customize the text, font, color, opacity, angle, and position. You can also specify the number of rows and columns of watermarks to create a repeating pattern.

This makes it a great choice for a variety of use cases, including:

• Protecting images and content: Adding a watermark can make it more difficult for others to copy and use your work without permission.
• Branding your website or application: A subtle watermark can help reinforce your brand identity.
• Adding a copyright notice: You can use a watermark to clearly display your copyright information.
• Creating a unique visual effect: Watermarks can be used to add an interesting design element to your webpage.

How to use it:

1. Install the plugin using your preferred package manager:

# Yarn
$ yarn add watermark-lite
# NPM
$ npm install watermark-lite
# PNPM
$ pnpm install watermark-lite

2. Import the Watermark module:

import { Watermark } from "watermark-lite";

3. Create a new Watermark instance:

const wm = new Watermark();

4. Display the watermark with custom text:

wm.mount({
  text: "CSSScript.Com"
});

5. By default, the watermark is added to the document.body. You can change this by specifying the parentEl parameter:

wm.mount({
  text: "CSSScript.Com"
  parentEl: "app"
});

6. Customize the appearance of the watermark using the following parameters:

• el (string, default: ‘watermark’): This option lets you specify the ID of the container element that will hold the watermark. If an element with this ID doesn’t exist, watermark-lite will create one.
• x (number, default: 0): The starting x-coordinate (in pixels) for the top-left corner of the first watermark item.
• y (number, default: 0): The starting y-coordinate (in pixels) for the top-left corner of the first watermark item.
• rows (number, default: auto-calculated): The number of rows of watermarks to generate. If set to 0 or left undefined, the number of rows is automatically calculated based on the available space and other parameters.
• cols (number, default: auto-calculated): The number of columns of watermarks to generate. Similar to rows, if set to 0 or left undefined, it’s automatically calculated.
• xGap (number, default: 50): The horizontal spacing (in pixels) between watermark items in a row.
• yGap (number, default: 50): The vertical spacing (in pixels) between watermark items in a column.
• zIndex (number or string, default: 99999): Controls the stacking order of the watermark. Higher zIndex values place the watermark on top of other elements.
• itemIdPrefix (string, default: ‘watermark-item’): A prefix used to generate unique IDs for each individual watermark item. This is useful for styling or targeting specific watermark items with CSS or JavaScript.
• itemWidth (number, default: 100): The width (in pixels) of each individual watermark item.
• itemHeight (number, default: 100): The height (in pixels) of each individual watermark item.
• fontSize (string, default: ’14px’): The font size of the watermark text. You can use any valid CSS font size value (e.g., ’16px’, ‘2em’, ‘1.5rem’).
• fontFamily (string, default: ‘inherit’): The font family of the watermark text. You can use any valid CSS font family name (e.g., ‘Arial’, ‘Helvetica’, ‘sans-serif’).
• color (string, default: ‘#000000’): The color of the watermark text. You can use any valid CSS color value (e.g., ‘#FF0000’, ‘rgb(255, 0, 0)’, ‘red’).
• opacity (number, default: 0.15): The opacity of the watermark, ranging from 0 (completely transparent) to 1 (completely opaque).
• rotate (number, default: 15): The rotation angle (in degrees) of the watermark text.
• monitor (boolean, default: true): When set to true, watermark-lite uses a MutationObserver to monitor changes to the parent element and automatically rebuilds the watermark if the parent’s content or style changes. This ensures the watermark remains correctly positioned and visible even after dynamic updates to the page.

wm.mount({
  text: "CSSScript.Com"
  el: "watermark",
  x: 0,
  y: 0,
  rows: 0,
  cols: 0,
  xGap: 50,
  yGap: 50,
  zIndex: 99999,
  itemIdPrefix: "watermark-item",
  itemWidth: 100,
  itemHeight: 100,
  fontSize: "14px",
  fontFamily: "inherit",
  color: "#000000",
  opacity: 0.15,
  rotate: 15,
  monitor: true
});

7. Remove the watermark.

wm.unmount();

How It Works

watermark-lite works by dynamically creating a set of divs that contain the watermark text. These divs are positioned absolutely within the parent element and styled according to the options you provide.

The plugin calculates the number of rows and columns based on the dimensions of the parent element and the size of each watermark item. It then creates the divs and positions them using JavaScript.

The monitor option allows the plugin to watch for changes to the parent element and automatically rebuild the watermark if necessary. This ensures that the watermark remains in place even if the content of the page changes.

Changelog:

v0.1.1 (11/15/2024)

• Update

v0.1.0 (10/21/2024)

• Watermark vertically centered
• Rename angle to rotate
• Use ResizeObserver instead of resize event listener
• Update watermark throttle