【二次創作FAサイト】Nakamu誕生日2024で作成したコード
拙いコードではありますが、WEBサイト構築に、よかったら、ご参考ください。
基本的にhtmlは画面表示のみ、装飾とかはcssおよびjsで、webの雰囲気をまとめ上げていました。
マウスを画面上動かすと、波紋が広がります。
Nakamuの画像は、FAを厚塗りで描いています。
img
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nakamu 2024 Happy Birthday!</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.ripples@0.6.3/dist/jquery.ripples.min.js"></script>
</head>
<body>
<div class="titlebox">
<h1 class="h1title">Happy Birthday!</h1>
</div>
<div class="watercover"></div>
<div class="starry_sky">
<img src="img/img1.png" alt="" class="img">
<div class="constellation"></div>
</div>
</body>
<script src="js/script.js" type="text/javascript"></script>
</html>css/style.css
html{font-size:62.5%;overflow-y:scroll}
*{
margin: 0;
padding: 0;
font-size: 10px;
}
body{
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Homemade Apple", cursive;
font-weight: 400;
font-style: normal;
color: #fff;
}
/*画面上部の郵便の帯*/
body::before,
body::after{
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 15px;
z-index: 20;
background: -webkit-repeating-linear-gradient(135deg, #dd6c98 0px, #dd6c98 20px, #fefdf3 20px, #fefdf3 40px, #4376b3 40px, #4376b3 60px, #fefdf3 60px, #fefdf3 80px);
background: repeating-linear-gradient(135deg, #dd6c98 0px, #dd6c98 20px, #fefdf3 20px, #fefdf3 40px, #4376b3 40px, #4376b3 60px, #fefdf3 60px, #fefdf3 80px);
-webkit-box-shadow: 0 0 6px rgba(67,118,179,0.6);
-moz-box-shadow: 0 0 6px rgba(67,118,179,0.6);
box-shadow: 0 0 6px rgba(67,118,179,0.6);
}
body::before{
top: 0;
}
body::after{
bottom: 0;
}
/*波紋が広がる水のカバー*/
.watercover{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
width: 100%;
height: 100%;
padding: 0 12%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: rgb(40,67,119);
mix-blend-mode:overlay;
}
.titlebox{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
/*MV「Happy Birthday」のテキスト*/
.h1title{
position: relative;
margin: auto;
font-size: 4rem;
z-index: 100;
box-sizing: border-box;
display: inline-block;
background-size: 500% 100%;
background-image: linear-gradient(
70deg,
rgba(104, 221, 212, 0.6) 45%,
#68ddd4 50%,
rgba(104, 221, 212, 0.6) 55%
);
color: #fff;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: shine 5s infinite;
padding: 10px;
}
@keyframes shine {
0% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@media screen and (max-width: 400px) {
.h1title{ font-size: 3rem; }
}
/*Nakamu後ろの星空*/
.starry_sky {
background: -webkit-linear-gradient(top, rgb(178, 170, 235) 50%, rgb(207, 198, 247)80%, rgb(243, 192, 239));
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
z-index: 1;
}
.starry_sky .img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 10;
}
//この中に星が追加されていきます。
.constellation {
background-attachment: scroll;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: rotate 600s infinite linear;
}
.star {
background-color: white;
border-radius: 50%;
position: absolute;
animation-name: star;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.star.style1 {
animation-duration: 0.5s;
animation-name: star;
}
.star.style2 {
animation-duration: 1s;
animation-name: star;
}
.star.style3 {
animation-duration: 1.5s;
animation-name: star;
}
.star.style4 {
animation-duration: 2s;
animation-name: starFeat;
}
.star.tam1 {
width: 1px;
height: 1px;
}
.star.tam2 {
width: 2px;
height: 2px;
}
.star.tam3 {
width: 3px;
height: 3px;
}
.star.opacity1 {
opacity: 1;
}
.star.opacity2 {
opacity: .5;
}
.star.opacity3 {
opacity: .1;
}
@keyframes star {
0% {
box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
}
50% {
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.4);
}
100% {
box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
}
}
@keyframes starFeat {
0% {
background-color: #FFFFFF;
box-shadow: 0 0 10px 0px rgba(255, 255, 255, 1);
}
20% {
background-color: #FFC4C4;
box-shadow: 0 0 10px 0px rgb(255, 196, 196, 1);
}
80% {
background-color: #C4CFFF;
box-shadow: 0 0 10px 0px rgb(196, 207, 255, 1);
}
100% {
background-color: #FFFFFF;
box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);
}
}JS/script.js
/*Nakamu背景の星空を星一つ一つ追加しています。*/
function init(){
var style = ["style1", "style2", "style3", "style4"];
var tam = ["tam1", "tam1", "tam1", "tam2", "tam3"];
var opacity = ["opacity1", "opacity1", "opacity1", "opacity2", "opacity2", "opacity3"];
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var star = "";
var numStars = 200;
var starry_sky = document.querySelector(".constellation");
var widthWindow = window.innerWidth;
var heightWindow = window.innerHeight;
for (var i = 0; i < numStars; i++) {
star += "<span class='star " + style[getRandomArbitrary(0, 4)] + " " + opacity[getRandomArbitrary(0, 6)] + " "
+ tam[getRandomArbitrary(0, 5)] + "' style='animation-delay: ." +getRandomArbitrary(0, 9)+ "s; left: "
+ getRandomArbitrary(0, widthWindow) + "px; top: " + getRandomArbitrary(0, heightWindow) + "px;'></span>";
}
starry_sky.innerHTML = star;
}
window.onload = init;
/*波紋プラグインを呼びだしています*/
$(".watercover").ripples({
dropRadius: 100,
resolution: 700,
});いいなと思ったら応援しよう！
