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
});
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-3.css">body内のアニメーションを表示させたい場所にHTMLを記載します。
<div class="fluid"></div>
CSSの書き方
※border-radius の値は「Fancy Border Radius Generator」（https://9elements.github.io/fancy-border-radius/）」などのジェネレーターを使うと数値が出しやすい。
.fluid {
width:40vh;/*横幅*/
height: 40vh;/*縦幅*/
background:#fff100;/*背景色*/
animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
}
@keyframes fluidrotate {
0%, 100% {
border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-2.css">bodyに対してCSSを適応します。
CSSの書き方
/*========= body背景色の変化CSS ===============*/
body {
width: 100%;
height: 100vh;
background:linear-gradient(45deg, #3bade3,#9844b7,#44ea76);/*グラデーションを定義*/
background-size: 200% 200%;/*サイズを大きくひきのばす*/
animation: bggradient 20s ease infinite;
}
@keyframes bggradient{
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1.css">bodyに対してCSSを適応します。
CSSの書き方
body{
animation: bgchange 20s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
}
@keyframes bgchange{
0% {
background:#ffe6e1;
}/*変化させたい色*/
25% {
background:#fdcb9e;
}/*変化させたい色*/
50% {
background:#fdcbc1;
}/*変化させたい色*/
75% {
background:#ffff8c;
}/*変化させたい色*/
90% {
background:#b2dffb;
}/*変化させたい色*/
100% {
background:#ffe6e1;
}/*変化させたい色*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-5-7.css">body内のグラフを表示させたい場所にid名を付けたcanvasタグを記載します。
<div class="chart-area">
<canvas id="chart02"></canvas>
</div>body 終了タグ直前に jQuery、Chart.js、jquery.inview.js 動きを制御する自作のJS の4 つを読み込みます
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-7.js"></script>
CSSの書き方
.chart-area{/*円グラフがスマホでつぶれないようにする*/
position: relative;
width:100%;
height:50vh;
}
JSの書き方
//値をグラフに表示させる
Chart.plugins.register({
afterDatasetsDraw: function (chart, easing) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function (element, index) {
// 値の表示
ctx.fillStyle = 'rgb(0, 0, 0,0.8)';//文字の色
var fontSize = 12;//フォントサイズ
var fontStyle = 'normal';//フォントスタイル
var fontFamily = 'Arial';//フォントファミリー
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
var dataString = dataset.data[index].toString();
// 値の位置
ctx.textAlign = 'center';//テキストを中央寄せ
ctx.textBaseline = 'middle';//テキストベースラインの位置を中央揃え
var padding = 5;//余白
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
//=========== 円グラフ（ドーナッツ型） ============//
$('#chart02').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
if (isInView) {
var ctx=document.getElementById("chart02");//グラフを描画したい場所のid
var chart=new Chart(ctx,{
type:'doughnut',//グラフのタイプ
data:{//グラフのデータ
labels:[ "IT","営業","不動産","医療", ],//データの名前
datasets:[ {
label:"職種別比率",//グラフのタイトル
backgroundColor:[ "#BB5179","#FAFF67", "#58A27C","#3C00FF" ],//グラフの背景色
data:[ "20","30","10","40", ]//データ
}]
},
options:{//グラフのオプション
maintainAspectRatio: false,//CSSで大きさを調整するため、自動縮小をさせない
cutoutPercentage:55,//中央からの空円の太さ。グラフの太さ変更
legend:{
display:true//グラフの説明を表示
},
tooltips:{//グラフへカーソルを合わせた際の詳細表示の設定
callbacks:{
label: function (tooltipItem, data) {
return data.labels[tooltipItem.index]+ ": "+ data.datasets[0].data[tooltipItem.index] + "%";//%を最後につける
}
},
},
title:{//上部タイトル表示の設定
display: true,
fontSize:10,
text: '単位：%'
},
}
});
}
});