[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js
Post on:2014年11月14日
sponsorsr
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。
↓は静止キャプチャですが、優美なアニメーションで動きます。
particles.js
particles.js -GitHub
particles.jsのデモ
デモではparicles.jsの繊細で美しいアニメーションが楽しめます。
昨日の記事「落ち着いたカラースキームが使われているページレイアウトやUIのPSD素材のまとめ」で紹介した「Elegant」も似たアニメーションが使われてますね。
particles.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
[html]
...
コンテンツ
...
[/html]
Step 2: HTML
コンテンツの一番下あたりに、粒子の元となる空divを用意します。
[html]
...
コンテンツ
...
[/html]
Step 3: JavaScript
粒子の空divを指定し、エフェクトをスクリプトで設定します。
「app.js」として外部ファイルにすると楽に管理できます。
[javascript]
particlesJS('particles-js', {
particles: {
color: '#fff',
shape: 'circle', // "circle", "edge" or "triangle"
opacity: 0.5,
size: 2,
size_random: true,
nb: 200,
line_linked: {
enable_auto: true,
distance: 250,
color: '#fff',
opacity: 0.5,
width: 1,
condensed_mode: {
enable: true,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 2
}
},
interactivity: {
enable: false,
mouse: {
distance: 250
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab'
},
/* Retina Display Support */
retina_detect: false
});
[/javascript]
CodePenのデモではカラーや不透明度など変更することができるので、お試しあれ！
sponsors
