: - - -

TEXT:

RANK: - - - - - - -

- - - - - - - - -

Time		STEP
Miss		Target
Ratio		High Score
Types		Trr Trial
Speed		STEP Trial
Score
Comment

- -

jsTRR

+ +

: + + +

TEXT:

RANK: + + + + + + +

+ + + + + + + + +

Time		STEP
Miss		Target
Ratio		High Score
Types		Trr Trial
Speed		STEP Trial
Score
Comment

+ + + diff --git a/jstrr.css b/jstrr.css index 1fb2ad7..4f70273 100644 --- a/jstrr.css +++ b/jstrr.css @@ -1,11 +1,131 @@ -body {background-color: rosybrown;} -.inner{ - position: relative; - height: 100vh; /* コンテナの高さ */ - width: 100%; /* コンテナの横幅 */ - overflow: hidden; /* コンテナからはみ出した要素を隠す */ +body {background-color: rgb(142, 174, 235); background-image: url(snow.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + z-index: 0.1;} +.wrapper{ + text-align: center; + margin: 0 auto; + width: 100%; } +.wrapper.snow-inner{ + position: relative; +} +.snow { + background-color: #fff; + border-radius: 50%; + position: absolute; + animation: animate-snow 10s linear; +} +@keyframes animate-snow { + 0% { + opacity: 0; + top: 0; + } + + 10% { + opacity: 1; + } + + 90% { + opacity: 1; + } + + 100% { + opacity: 0; + top: 100vh; + } +} +/*.wrapper.snow-inner img:nth-child(2n+1){ + width: 13px; +} +.wrapper.snow-inner img:nth-child(2n){ + width: 15px; +} +img .snow-part1{top: 0; left: 5%;} +img .snow-part2{top: 0; left: 12%;} +img .snow-part3{top: 0; left: 15%;} +img .snow-part4{top: 0; left: 22%;} +img .snow-part5{top: 0; left: 25%;} +img .snow-part6{top: 0; left: 28%;} +img .snow-part7{top: 0; left: 35%;} +img .snow-part8{top: 0; left: 40%;} +img .snow-part9{top: 0; left: 43%;} +img .snow-part10{top: 0; left: 50%;} +img .snow-part11{top: 0; left: 55%;} +img .snow-part12{top: 0; left: 60%;} +img .snow-part13{top: 0; left: 63%;} +img .snow-part14{top: 0; left: 70%;} +img .snow-part15{top: 0; left: 75%;} +img .snow-part16{top: 0; left: 81%;} +img .snow-part17{top: 0; left: 85%;} +img .snow-part18{top: 0; left: 90%;} +img .snow-part19{top: 0; left: 93%;} + +@keyframes animate-snow { + 0% { + opacity: 0; + } + 20% { + transform:translate(3px,30px) rotate(20deg); + opacity: 1; + } + 30% { + transform:translate(0,50px) rotate(50deg); + } + 50% { + transform:translate(-20px,100px) rotate(150deg); + } + 70% { + transform:translate(-40px,150px) rotate(-50deg); + opacity: .8; + } + 90% { + transform:translate(-60px,200px) rotate(-180deg); + } + 100% { + transform:translate(-70px,230px); + opacity: 0; + } +} +.snow-inner img { + animation: animate-snow linear 6s infinite; +} +img.snow-part1,img.snow-part4,img.snow-part7,img.snow-part10,img.snow-part8,img.snow-part11,img.snow-part13,img.snow-part16,img.snow-part19{ + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +img.snow-part2,img.snow-part5{ + -webkit-animation-delay: 1.5s; + animation-delay: 1.5s; +} +img.snow-part3,img.snow-part6,img.snow-part9,img.snow-part12{ + -webkit-animation-delay: 4s; + animation-delay: 4s; +} +img.snow-part8,img.snow-part11,img.snow-part13,img.snow-part16,img.snow-part19{ + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} +img.snow-part14,img.snow-part17{ + -webkit-animation-delay: 2s; + animation-delay: 2s; +} +img.snow-part15,img.snow-part18{ + -webkit-animation-delay: 5s; + animation-delay: 5s; +}*/ + table{ + margin: 0 auto; + background-color: white; + } +.login{ + background-color: rgb(142, 174, 235); + background-image: url(snow.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover;} body.secret {background: black; color: white;} div#typing {margin: 1em 1ex; border-top: double cyan 5px;} div#typing pre { @@ -45,7 +165,28 @@ input[name="text"]+button {min-width: 10em;} input[name="text"]:checked+button {background: yellow;} -div.login, div.login2 {padding: 40% 0%;} +/*div.login, div.login2 {padding: 40% 0%;}*/ +div.login{ + background-color: rgb(142, 174, 235); + background-image: url(christmas.jpg); + background-position: 10% 80%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; +} +div.login-item{ + position: absolute; + left: 50%; top: 50%; + width: 100%; + transform: translate(-50%, -50%); + text-align: center; +} +#loginhead{ + color: white; +} +#prompt{ + color: white; +} div.login2 { opacity: 0; transition: 0.5s; border-radius: 50%; diff --git a/newyear.jpg b/newyear.jpg new file mode 100644 index 0000000..bbf0dc8 --- /dev/null +++ b/newyear.jpg Binary files differ diff --git a/normal.png b/normal.png new file mode 100644 index 0000000..86ad7ef --- /dev/null +++ b/normal.png Binary files differ diff --git a/snow.js b/snow.js new file mode 100644 index 0000000..058b636 --- /dev/null +++ b/snow.js @@ -0,0 +1,22 @@ +window.addEventListener('DOMContentLoaded', ()=> { + const container = document.querySelector('.wrapper'); + + const createSnow = () => { + const snowEl = document.createElement('span'); + snowEl.className = 'snow'; + const minSize = 5; + const maxSize = 10; + const size = Math.random() * (maxSize - minSize) + minSize; + snowEl.style.width = `${size}px`; + snowEl.style.height = `${size}px`; + snowEl.style.left = Math.random() * 100 + '%'; + container.appendChild(snowEl); + + setTimeout(() => { + snowEl.remove(); + }, 3000); + } + + setInterval(createSnow, 100); + }); + \ No newline at end of file diff --git a/snow.png b/snow.png new file mode 100644 index 0000000..b7862d1 --- /dev/null +++ b/snow.png Binary files differ