【jQuery】背景にアニメーションCSSアイコンパターンを含めるIcon Patterns

jQuery

October 22, 2017

Icon patternsは背景にアニメーションCSSアイコンパターンを含める。

Import Dependencies

必要なフォントアイコンをインポート

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.cssfrel="stylesheet" type="text/css" >

CSSアセットを読み込み

<link href="https://unpkg.com/icon-patterns/dist/icon-patterns.min.css" rel="stylesheet" type="text/css">

bodyタグを 閉じる前にjavascriptアセットを読み込み

<!-- jQuery import -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- IconPatterns import -->
<script src="https://unpkg.com/icon-patterns/dist/icon-patterns.min.js" ></script>

Setup DOM

<div id="my-container"> We've created Icon Patterns </div>

Configure positions and count

$('#my-container').IconPatterns({
  color: '#FFFFFF',
  icons: {
    'ion-ios-bell-outline': {
      count: 10,
      sizeVariation: [10, 25],
    },
    'ion-ios-cloud-outline': {
      count: 15,
      sizeVariation: [5, 20],
    },
    'ion-ios-lightbulb-outline': {
      count: 10,
      sizeVariation: [5, 35],
    },
  }]
}).draw();

MIT

Latest Posts

Related Posts