WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

6月15日作業分データ

Webサイト制作

パーティクルとマウスとか色々

ファイル構成
f:id:yachin29:20210615143921p:plain


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svgとparticle</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="particles-js"></div>

<main>
<h1>サイトコンテンツ</h1>
<p class="cursor-on"><a href="menu/">メニューページへ</a></p>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore impedit quasi error, deserunt porro harum, beatae vitae sapiente voluptatum itaque consectetur perferendis earum molestiae exercitationem laudantium ex quaerat eveniet eligendi nemo explicabo alias debitis quis? Inventore facilis repudiandae velit cumque sint quo exercitationem aut nulla corporis culpa. Placeat, odio labore iste ex cupiditate est ullam eius sequi, necessitatibus debitis ea excepturi in ipsum sapiente, reprehenderit quam iusto incidunt? Eaque sunt iusto a aut reprehenderit reiciendis corporis temporibus, facere vel fugiat.</p>
</main>

<div class="cursor"></div>
<div class="follower"></div>




<div id="curtain">
<div class="svg-logo" id="svg-box">

</div><!-- /.svg-logo -->
</div><!-- /#curtain -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/particles.min.js"></script>
<script src="js/script.js"></script>
<script src="js/my-particle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
<script src="js/cursor.js"></script>

<script>
$.ajax({
url: 'img/logo.svg',//ここにsvgファイルのパスを入れる
})
.then(
// 1つめは通信成功時の処理
function(data){
	var svg = $(data).find('svg');
  $('#svg-box').append(svg);
},
// 2つめは通信失敗時の処理
function(){
	alert('読み込み失敗');
});
</script>


</body>
</html>


style.css

@charset "utf-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}



#curtain{
width: 100%;
height: 100vh;
background-color: #d4d6d6;
position: fixed;
top: 0;
}
.svg-logo{
width: 400px;
position: absolute;
left: -300px;
right: 0;
top: 100px;
margin: auto;
}
#XMLID_2_>path{
fill:#d4d6d6;/* 塗りの色 */
stroke: #000;/* 線の色 */
stroke-width: 1px;/* 線幅 */
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: svg 2s 0.5s linear forwards;
}
@keyframes svg{
0%{stroke-dashoffset: 200px;}
80%{stroke-dashoffset: 0;fill:#d4d6d6;}
100%{stroke-dashoffset: 0;fill:#000;}
}

/* パーティクル部分 */
canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ 
#particles-js{
position:fixed;
top: 0;
z-index: -10;
width: 100%;
height: 100vh;
background-color: #d2d2d2; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

body{
padding-top: 100px;
cursor: none;
}
a{
cursor: none;
}
main{
width: 60%;
height: 300vh;
margin: 0 auto;
padding: 80px 40px;
background-color: rgba(255, 255, 255, 0.609);
}
h1{
text-align: center;
font-size: 50px;
padding: 30px 0 20px;
}
main>p{
line-height: 2;
}


/* カーソルの指定 */
.cursor,.follower{
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.cursor{
width: 8px;
height: 8px;
background-color: black;
z-index: 101;
}
.follower{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: url(../img/cursor.svg) no-repeat center center/contain;
z-index: 100;
transition: 0.1s;
text-align: center;
}
.follower.is-active{
width: 60px;
height: 60px;
background:rgba(248, 233, 93, 0.534) url(none) no-repeat center center/contain;
}

.cursor-on{
width: 200px;
height: 50px;
text-align: center;
}
.cursor-on>a{
line-height: 50px;
color: #333;
font-size: 20px;
}
.cursor-on>a:hover{
text-decoration: underline;
}


script.js

@charset "utf-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}



#curtain{
width: 100%;
height: 100vh;
background-color: #d4d6d6;
position: fixed;
top: 0;
}
.svg-logo{
width: 400px;
position: absolute;
left: -300px;
right: 0;
top: 100px;
margin: auto;
}
#XMLID_2_>path{
fill:#d4d6d6;/* 塗りの色 */
stroke: #000;/* 線の色 */
stroke-width: 1px;/* 線幅 */
stroke-dasharray: 200px;
stroke-dashoffset: 200px;
animation: svg 2s 0.5s linear forwards;
}
@keyframes svg{
0%{stroke-dashoffset: 200px;}
80%{stroke-dashoffset: 0;fill:#d4d6d6;}
100%{stroke-dashoffset: 0;fill:#000;}
}

/* パーティクル部分 */
canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ 
#particles-js{
position:fixed;
top: 0;
z-index: -10;
width: 100%;
height: 100vh;
background-color: #d2d2d2; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }

body{
padding-top: 100px;
cursor: none;
}
a{
cursor: none;
}
main{
width: 60%;
height: 300vh;
margin: 0 auto;
padding: 80px 40px;
background-color: rgba(255, 255, 255, 0.609);
}
h1{
text-align: center;
font-size: 50px;
padding: 30px 0 20px;
}
main>p{
line-height: 2;
}


/* カーソルの指定 */
.cursor,.follower{
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.cursor{
width: 8px;
height: 8px;
background-color: black;
z-index: 101;
}
.follower{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: url(../img/cursor.svg) no-repeat center center/contain;
z-index: 100;
transition: 0.1s;
text-align: center;
}
.follower.is-active{
width: 60px;
height: 60px;
background:rgba(248, 233, 93, 0.534) url(none) no-repeat center center/contain;
}

.cursor-on{
width: 200px;
height: 50px;
text-align: center;
}
.cursor-on>a{
line-height: 50px;
color: #333;
font-size: 20px;
}
.cursor-on>a:hover{
text-decoration: underline;
}


cursor.js

var
cursor = $('.cursor'),
follower = $('.follower'),
cWidth = 6, //カーソルの大きさ
fWidth = 30, //フォロワーの大きさ
delay = 5, //数字を大きくするとフォロワーがより遅れて来る
mouseX = 0, //マウスのX座標
mouseY = 0, //マウスのY座標
posX = 0, //フォロワーのX座標
posY = 0; //フォロワーのX座標

//カーソルの遅延アニメーション
//ほんの少ーーーしだけ遅延させる 0.001秒
TweenMax.to({}, .001, {
  repeat: -1,
  onRepeat: function() {
    posX += (mouseX - posX) / delay;
    posY += (mouseY - posY) / delay;

    TweenMax.set(follower, {
        css: {    
          left: posX - (fWidth / 2),
          top: posY - (fWidth / 2)
        }
    });
    
    TweenMax.set(cursor, {
        css: {    
          left: mouseX - (cWidth / 2),
          top: mouseY - (cWidth / 2)
        }
    });
  }
});

//マウス座標を取得
$(document).on('mousemove', function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

//ボタンにホバーした時
$('.cursor-on').on({
  "mouseenter": function() {
    cursor.addClass('is-active');
    follower.addClass('is-active');
  },
  "mouseleave": function() {
    cursor.removeClass('is-active');
    follower.removeClass('is-active');
  }
});


my-particle.js

particlesJS("particles-js", {"particles":{"number":{"value":6,"density":{"enable":true,"value_area":800}},"color":{"value":"#cf55c8"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000"},"polygon":{"nb_sides":6},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.3,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":160,"random":true,"anim":{"enable":true,"speed":10,"size_min":40,"sync":false}},"line_linked":{"enable":false,"distance":200,"color":"#ffffff","opacity":1,"width":2},"move":{"enable":true,"speed":8,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":false,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;