CSS

カテゴリーページ

紙吹雪が舞う

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-8.css">

body内の背景アニメーションを表示させたい場所にHTMLを記載します。

<div id="particles-js"></div>
<div id="wrapper">
	この中にコンテンツが入ります。
<!--/wrapper--></div>

body 終了タグ直前にparticle.jsと、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!--自作のJS-->
<script src="js/5-8.js"></script>

CSSの書き方

particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#f3f3f3;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

JSの書き方

particlesJS("particles-js",{
	"particles":{
		"number":{
			"value":125,//この数値を変更すると紙吹雪の数が増減できる
			"density":{
				"enable":false,
				"value_area":400
			}
		},
		"color": {
        "value": [ "#EA5532", "#F6AD3C", "#FFF33F", "#00A95F", "#00ADA9", "#00AFEC","#4D4398", "#E85298" ]//紙吹雪の色の数を増やすことが出来る
		},
		"shape":{
			"type":"polygon",//形状はpolygonを指定
			"stroke":{
				"width":0,
			},
			"polygon":{
				"nb_sides":5//多角形の角の数
			}
			},
			"opacity":{
				"value":1,
				"random":false,
				"anim":{
					"enable":true,
					"speed":20,
					"opacity_min":0,
					"sync":false
				}
			},
			"size":{
				"value":5.305992965476349,
				"random":true,//サイズをランダムに
				"anim":{
					"enable":true,
					"speed":1.345709068776642,
					"size_min":0.8,
					"sync":false
				}
			},
			"line_linked":{
				"enable":false,
			},
			"move":{
				"enable":true,
				"speed":10,//この数値を小さくするとゆっくりな動きになる
				"direction":"bottom",//下に向かって落ちる
				"random":false,//動きはランダムにならないように
				"straight":false,//動きをとどめない
				"out_mode":"out",//画面の外に出るように描写
				"bounce":false,//跳ね返りなし
				"attract":{
					"enable":false,
					"rotateX":600,
					"rotateY":1200
				}
			}
		},
		"interactivity":{
			"detect_on":"canvas",
			"events":{
				"onhover":{
					"enable":false,
				},
				"onclick":{
					"enable":false,
				},
				"resize":true
			},
		},
	"retina_detect":true
});

投稿日：2022年08月01日

ホタルが舞う

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-7.css">

body内の背景アニメーションを表示させたい場所にHTMLを記載します。

<div id="particles-js"></div>
<div id="wrapper">
	この中にコンテンツが入ります。
<!--/wrapper--></div>

body 終了タグ直前にparticle.jsと、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!--自作のJS-->
<script src="js/5-7.js"></script>

CSSの書き方

particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#000;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

JSの書き方

particlesJS("particles-js",{
	"particles":{
		"number":{
			"value":50,//この数値を変更するとホタルの数が増減できる
			"density":{
				"enable":true,
				"value_area":1602.3971861905397
			}
		},
		"color":{
			"value":"#f3fa8b"//色
		},
		"shape":{
			"type":"circle",//形状はcircleを指定
			"stroke":{
				"width":0,
			}
		},
		"opacity":{
			"value":1,
			"random":true,//透過をランダムに
			"anim":{
				"enable":false,
				"speed":1.10115236356258881,
				"opacity_min":0,
				"sync":false
			}
		},
		"size":{
			"value":4.005992965476349,
			"random":true,//サイズをランダムに
			"anim":{
				"enable":true,
				"speed":24.345709068776642,
				"size_min":0.1,
				"sync":false
			}
		},
		"line_linked":{
			"enable":false,
		},
		"move":{
			"enable":true,
			"speed":6,//この数値を小さくするとゆっくりな動きになる
			"direction":"none",//方向指定なし
			"random":true,//動きはランダムに
			"straight":false,//動きをとどめない
			"out_mode":"out",//画面の外に出るように描写
			"bounce":false,//跳ね返りなし
			"attract":{
				"enable":false,
				"rotateX":600,
				"rotateY":600
			}
		}
	},
	"interactivity":{
		"detect_on":"canvas",
		"events":{
			"onhover":{
				"enable":false
			},
			"onclick":{
				"enable":false
			},
			"resize":true
		}
	},
	"retina_detect":true
});

投稿日：2022年08月01日

桜が散る

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-6.css">

body内の背景アニメーションを表示させたい場所にHTMLを記載します。

<div id="particles-js"></div>
<div id="wrapper">
	この中にコンテンツが入ります。
<!--/wrapper--></div>

body終了タグ直前にparticle.jsと、動きを制御する自作のJSの2つを読み込みます。

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!--自作のJS-->
<script src="js/5-6.js"></script>

CSSの書き方

particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#FEE7E7;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

JSの書き方

※ここでは桜の画像を設定しています。画像はご自身で制作していただくか、下記のリンクから右クリックで画像を保存してご利用ください。

flower.png

particlesJS("particles-js", {
	"particles":{
		"number":{
			"value":30,//この数値を変更すると桜の数が増減できる
			"density":{
				"enable":true,
				"value_area":1121.6780303333778
			}
		},
		
		"color":{
			"value":"#fff"
		},
		
		"shape":{
			"type":"image",//形状は画像を指定
			"stroke":{
				"width":0,
			},
			"image":{
				"src":"img/flower.png",//【重要】画像を指定！桜の画像を設定してください。
				"width":120,
				"height":120
			}
		},
		
		"opacity":{
			"value":0.06409588744762158,
			"random":true,
			"anim":{
				"enable":false,
				"speed":1,
				"opacity_min":0.1,
				"sync":false
			}
		},
		
		"size":{
			"value":8.011985930952697,
			"random":true,//サイズをランダムに
			"anim":{
				"enable":false,
				"speed":4,
				"size_min":0.1,
				"sync":false
			}
		},
		"line_linked":{
			"enable":false,
		},
		
		"move":{
			"enable":true,
			"speed":7,//この数値を小さくするとゆっくりな動きになる
			"direction":"bottom-right",//右下に向かって落ちる
			"random":false,//動きはランダムにしない
			"straight":false,//動きをとどめない
			"out_mode":"out",//画面の外に出るように描写
			"bounce":false,//跳ね返りなし
			"attract":{
				"enable":false,
				"rotateX":281.9177489524316,
				"rotateY":127.670995809726
			}
		}
	},
		"interactivity":{
			"detect_on":"canvas",
			"events":{
				"onhover":{
					"enable":false,
				},
				"onclick":{
					"enable":false,
				},
				"resize":true
			}
		},
	"retina_detect":false
});

投稿日：2022年08月01日

雪が降る

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-5.css">

body内の背景アニメーションを表示させたい場所にHTMLを記載します。

<div id="particles-js"></div>
<div id="wrapper">
	この中にコンテンツが入ります。
<!--/wrapper--></div>

body 終了タグ直前にparticle.jsと、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!--自作のJS-->
<script src="js/5-5.js"></script>

CSSの書き方

/*particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。*/

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#070A31;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

JSの書き方
※ここでは雪の画像を設定しています。画像はご自身で制作していただくか、下記のリンクから右クリックで画像を保存してご利用ください。
snow.png

particlesJS("particles-js", {
	"particles": {
		"number": {
			"value": 100,//この数値を変更すると雪の数が増減できる
			"density": {
				"enable": true,
				"value_area": 800
			}
		},
		
		"color": {
			"value": "#ffffff"
		},
		
		"shape": {
			"type": "image",//形状は画像を指定	
			"stroke": {
				"width": 3,
				"color": "#fff"
			},
			
			"image": {
				"src": "img/snow.png",//【重要】画像を指定！雪の画像を設定してください。
				"width": 120,
				"height": 120
			}
		},
		
		"opacity": {
			"value": 0.7,
			"random": false,
			"anim": {
				"enable": false,
				"speed": 1,
				"opacity_min": 0.1,
				"sync": false
			}
		},
		
		"size": {
			"value": 5,
			"random": true,
			"anim": {
				"enable": false,
				"speed": 20,
				"size_min": 0.1,
				"sync": false
			}
		},
		
		"line_linked": {
			"enable": false,
		},
		
		"move": {
			"enable": true,
			"speed": 3,//この数値を小さくするとゆっくりな動きになる
			"direction": "bottom",//下に向かって落ちる
			"random": true,//動きはランダム
			"straight": false,//動きをとどめない
			"out_mode": "out",//画面の外に出るように描写
			"bounce": false,//跳ね返りなし
			
			"attract": {
				"enable": true,
				"rotateX": 300,
				"rotateY": 1200
			}
		}
	},
		
		"interactivity": {
			"detect_on": "canvas",
				"events": {
					"onhover": {
					"enable": false,
				},
				"onclick": {
					"enable": false,
				},
				"resize": true
			}
		},
	
	"retina_detect": true

});

投稿日：2022年08月01日

幾何学模様

カテゴリー：背景の動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-4.css">

body内の背景アニメーションを表示させたい場所にHTMLを記載します。

<div id="particles-js"></div>
<div id="wrapper">
	この中にコンテンツが入ります。
<!--/wrapper--></div>

body 終了タグ直前にparticle.jsと、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!--自作のJS-->
<script src="js/5-4.js"></script>

CSSの書き方

/*particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。*/

html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color:#35004D;/*背景色*/
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
	width:100%;
	height: 100%;
}

JSの書き方

particlesJS("particles-js",{
	"particles":{
		"number":{
			"value":38,//この数値を変更すると幾何学模様の数が増減できる
			"density":{
				"enable":true,
				"value_area":800
			}
		},

		"color":{
			"value":"#ffffff"//色
		},

		"shape":{
			"type":"polygon",//形状はpolygonを指定
				"stroke":{
					"width":0,
				},
				"polygon":{
					"nb_sides":3//多角形の角の数
				},
				"image":{
					"width":190,
					"height":100
				}
			},

			"opacity":{
				"value":0.664994832269074,
				"random":false,
				"anim":{
					"enable":true,
					"speed":2.2722661797524872,
					"opacity_min":0.08115236356258881,
					"sync":false
				}
			},

			"size":{
				"value":3,
				"random":true,
				"anim":{
					"enable":false,
					"speed":40,
					"size_min":0.1,
					"sync":false
				}
			},
			"line_linked":{
				"enable":true,
				"distance":150,
				"color":"#ffffff",
				"opacity":0.6,
				"width":1
			},
			
			"move":{
				"enable":true,
				"speed":6,//この数値を小さくするとゆっくりな動きになる
				"direction":"none",//方向指定なし
				"random":false,//動きはランダムにしない
				"straight":false,//動きをとどめない
				"out_mode":"out",//画面の外に出るように描写
				"bounce":false,//跳ね返りなし
				"attract":{
					"enable":false,
					"rotateX":600,
					"rotateY":961.4383117143238
				}
			}
		},
		"interactivity":{
			"detect_on":"canvas",
			"events":{
				"onhover":{
					"enable":false,
					"mode":"repulse"
				},
				"onclick":{
					"enable":false
				},
				"resize":true
			}
		},
	"retina_detect":true
});

投稿日：2022年08月01日

カテゴリーページ

紙吹雪が舞う

ホタルが舞う

桜が散る

雪が降る

幾何学模様

アーカイブ