hatching.js

要素・画像・文字の背面に、斜線ハッチングの影を付ける小さなライブラリです。jQuery プラグイン版と、jQuery なしで動く Vanilla JS 版があり、どちらも同じオプションで同じ見た目になります。

切り替えると、このページのハッチングとコードが選んだ版に変わります。カードをクリックすると、そのハッチングを作るコードを表示してコピーできます。

グラデーション

左は濃く、右は薄い斜線

-45°

細かい青い線

0°

水平ハッチ

45° の設定コード

画像の輪郭にも

白いティーカップのシルエットに輪郭に沿ったハッチングの影 
$('.hatch-image').hatching({
  color: '#202020',
  angle: '150deg',
  width: '1px',
  gap: '6px',
  offsetX: '12px',
  offsetY: '16px'
});

文字の輪郭にも

文字にハッチング Hatching

$('.hatch-title').hatching({
  mode: 'text',
  color: '#202020',
  angle: '135deg',
  width: '1px',
  gap: '3px',
  offsetX: '5px',
  offsetY: '6px'
});

インストール

jQuery 版は、jQuery を先に読み込んでから使います。

Vanilla JS 版は、jQuery を読み込まずに単体で動きます。

CDN で読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@goonruntongue/hatching@1/dist/jquery.hatching.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@goonruntongue/hatching@1/dist/jquery.hatching.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@goonruntongue/hatching-vanilla@1/dist/hatching-vanilla.css">
<script src="https://cdn.jsdelivr.net/npm/@goonruntongue/hatching-vanilla@1/dist/hatching-vanilla.min.js"></script>

npm でインストールする

npm install @goonruntongue/hatching jquery
npm install @goonruntongue/hatching-vanilla