Liquid Border

Użycie

Dołącz jQuery, style i plugin:

<link rel="stylesheet" href="liquid-border.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="jquery.liquidBorder.js"></script>

Podstawowe wywołanie:

$('.moj-blok').liquidBorder();

Z opcjami:

$('.moj-blok').liquidBorder({
  amplitude: 8,         // wysokość fal (px)
  frequency: 3,         // liczba fal na najdłuższej krawędzi (2–6)
  speed: 0.4,           // szybkość animacji
  organic: true,        // losowe pulsowanie wysokości fal
  organicIntensity: 1,
  organicSpeed: 2.2,
  contentPadding: 15,   // dla bloków z tekstem (2× amplituda + ta wartość)
  horizontalOnly: false, // true = fale tylko na górze i dole
  borderWidth: 0        // opcjonalna obwódka (0 = tylko clip)
});

Blok z tekstem — ustaw contentPadding: 15 (odstęp treści = 2× amplituda fal + 15px):

$('.karta').liquidBorder({
  amplitude: 8,
  organic: true,
  organicIntensity: 1,
  contentPadding: 15
});

API:

$('.moj-blok').liquidBorder('update', { amplitude: 8 });
$('.moj-blok').liquidBorder('pause');
$('.moj-blok').liquidBorder('play');
$('.moj-blok').liquidBorder('destroy');