diff --git a/public/images/profile/yuki540.png b/public/images/profile/yuki540.png new file mode 100644 index 0000000..ffcffb2 Binary files /dev/null and b/public/images/profile/yuki540.png differ diff --git a/public/index.html b/public/index.html index eaf6219..1d2ce20 100644 --- a/public/index.html +++ b/public/index.html @@ -333,7 +333,7 @@ -
+
@@ -357,12 +357,12 @@

ようこそ、魔法少女サイトへ

@@ -384,6 +384,66 @@
+ +
+
+ +
+
+ +
+ + + + + + + + + + + + +
+
diff --git a/src/scripts/app.js b/src/scripts/app.js index 20cdb12..df34437 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -9,6 +9,7 @@ import './components/app.tag' // init util.setRingSize() util.bindNav() +util.bindCloseBtn() // loading util.startLoading(() => { diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js index 027f9f0..a565519 100644 --- a/src/scripts/lib/util.js +++ b/src/scripts/lib/util.js @@ -10,6 +10,7 @@ const end_animation = document.querySelector('.end-animation') const end_animation__end = document.querySelector('.end-animation .window img') const top_page = document.querySelector('.top-page') const top_page__wrap = document.querySelector('.top-page .wrap') +const page_box = document.querySelector('.page-box') /** * 画像のプリロード @@ -68,7 +69,7 @@ export const setRingSize = () => { } /** - * ナビゲーションボタンホバー時のイベント監視 + * ナビゲーションボタンの各イベント監視 */ export const bindNav = () => { const navs = document.querySelectorAll('.top-page__global-nav a') @@ -84,6 +85,25 @@ export const bindNav = () => { nav.addEventListener('mouseout', e => { top_page.setAttribute('data-color', '') }) + + /* click ----------------------------------------------------- */ + nav.addEventListener('click', e => { + e.preventDefault() + const state = !(page_box.getAttribute('data-state') === 'true') + page_box.setAttribute('data-state', state) + }) + }) +} + +/** + * ページを閉じるボタンのイベント監視 + */ +export const bindCloseBtn = () => { + const close_btn = document.querySelector('.page-box__close-btn') + + close_btn.addEventListener('click', e => { + e.preventDefault() + page_box.setAttribute('data-state', 'false') }) } diff --git a/src/scss/keyframes/pc/_page-box.scss b/src/scss/keyframes/pc/_page-box.scss new file mode 100644 index 0000000..297ea44 --- /dev/null +++ b/src/scss/keyframes/pc/_page-box.scss @@ -0,0 +1,22 @@ +@keyframes page-box__show { + from { transform: rotate(90deg); } + to { transform: rotate(0deg); } +} +@keyframes page-box__hidden { + from { transform: rotate(0deg); } + to { transform: rotate(-90deg); } +} + +@keyframes page-box__show-close-btn { + from { transform: translate(calc(100% + 20px), calc(-100% + -20px)); } + to { transform: translate(0, 0); } +} +@keyframes page-box__rotate-close-btn { + from { transform: rotate(0deg); } + to { transform: rotate(15deg); } +} + +@keyframes page-box__show-content { + from { transform: scale(0.9); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} diff --git a/src/scss/modules/pc/_page-box.scss b/src/scss/modules/pc/_page-box.scss new file mode 100644 index 0000000..16603d9 --- /dev/null +++ b/src/scss/modules/pc/_page-box.scss @@ -0,0 +1,165 @@ +@include pc-layout { + .page-box { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background-color: $theme-pink; + transform-origin: right top; + transform: rotate(90deg); + overflow: hidden; + z-index: 1002; + } + + /*** bg ***/ + .page-box__bg { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + + div { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + transform-origin: right top; + transform: rotate(90deg); + } + div:nth-child(1) { + background-color: $theme-light-pink; + } + div:nth-child(2) { + background-color: $theme-bg; + + &::after { + content: ""; display: block; + width: 100%; height: 100%; + background-size: 15px; + background-image: url(../images/bg.png); + opacity: 0.4; + } + } + } + + /*** content ***/ + .page-box__content { + position: absolute; + top: 40px; left: 40px; + width: calc(100% - 80px); height: calc(100% - 80px); + border: solid 10px $theme-pink; + box-sizing: border-box; + background-color: $theme-bg; + border-radius: 15px; + box-shadow: 0 0 15px rgba(0,0,0,0.6) inset; + overflow: auto; + opacity: 0; + transition: all 0.35s ease 0s; + + .page-title { + position: relative; + margin: 50px auto; + width: 600px; height: 45px; + + div { + position: absolute; + right: 0; top: 0; + height: 100%; + } + div:nth-child(1) { width: 100%; background-color: $theme-gray; } + div:nth-child(2) { width: calc(100% - 15px); background-color: $theme-light-purple; } + div:nth-child(3) { width: calc(100% - 30px); background-color: $theme-light-pink; } + div:nth-child(4) { width: calc(100% - 45px); background-color: $theme-pink; } + + h2 { + position: absolute; + top: 0; left: 0; + width: 100%; height: 45px; + font-size: 20px; + color: #fff; + text-align: center; + line-height: 45px; + } + } + } + + /*** close-btn ***/ + .page-box__close-btn { + position: absolute; + top: 10px; right: 10px; + width: 100px; height: 100px; + display: block; + transform: translate(calc(100% + 20px), calc(-100% + -20px)); + z-index: 5; + + section { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + box-shadow: 0 0 5px rgba(0,0,0,0.4); + border-radius: 3px; + transition: all 0.35s ease 0s; + } + section:nth-child(1) { + background-color: $theme-pink; + transform: rotate(0deg); + } + section:nth-child(2) { + background-color: $theme-bg; + + &::before, + &::after { + content: ""; display: block; + position: absolute; + top: 49px; left: 20px; + width: 60px; height: 1px; + border-top: dashed 2px $theme-purple; + box-sizing: border-box; + opacity: 0.7; + } + &::before { transform: rotate(45deg); } + &::after { transform: rotate(-45deg); } + } + } + .page-box__close-btn:hover { + section:nth-child(1) { background-color: $theme-purple; } + section:nth-child(2) { background-color: #eee; } + } + .page-box__close-btn:hover ~ .page-box__content { border-color: $theme-purple; } + + .page-box[data-state="true"] { + animation: page-box__show 0.35s ease 0s forwards; + + /*** bg ***/ + .page-box__bg { + div:nth-child(1) { animation: page-box__show 0.35s ease 0.1s forwards; } + div:nth-child(2) { animation: page-box__show 0.35s ease 0.2s forwards; } + } + + /*** content ***/ + .page-box__content { + animation: page-box__show-content 0.6s ease 0.55s forwards; + } + + /*** close-btn ***/ + .page-box__close-btn { + animation: page-box__show-close-btn 0.6s ease 0.9s forwards; + section:nth-child(1) { animation: page-box__rotate-close-btn 0.6s ease 0.9s forwards; } + } + } + + .page-box[data-state="false"] { + transform: rotate(0deg); + animation: page-box__hidden 0.35s ease-in-out 0.2s forwards; + + /*** bg ***/ + .page-box__bg { + div { transform: rotate(0deg); } + div:nth-child(1) { animation: page-box__hidden 0.35s ease-in-out 0.1s forwards; } + div:nth-child(2) { animation: page-box__hidden 0.35s ease-in-out 0s forwards; } + } + + /*** content ***/ + .page-box__content, + .page-box__close-btn { + animation: fadeout 0.2s ease 0s forwards; + } + } +} diff --git a/src/scss/modules/pc/_profile.scss b/src/scss/modules/pc/_profile.scss new file mode 100644 index 0000000..df0a76b --- /dev/null +++ b/src/scss/modules/pc/_profile.scss @@ -0,0 +1,84 @@ +@include pc-layout { + .profile-page {} + + /*** body ***/ + .profile-page__body { + width: 600px; + margin: 0 auto; + + .icon { + position: relative; + width: 150px; height: 150px; + margin: 0 auto; + border: solid 5px $theme-purple; + background-color: $theme-purple; + border-radius: 50%; + box-sizing: border-box; + + &:after { + position: absolute; + top: 0; left: 0; + content: ""; display: block; + width: 100%; height: 100%; + border-radius: 50%; + background-image: url(../images/profile/yuki540.png); + background-size: cover; + background-position: center; + } + + div { + position: absolute; + background-color: $theme-purple; + } + div:nth-child(1) { width: 25px; height: 100px; left: 0; bottom: -5px; border-radius: 20px; } + div:nth-child(2) { width: 10px; height: 80px; left: 40px; bottom: -10px; border-radius: 4px; } + div:nth-child(3) { width: 18px; height: 80px; left: calc(50% - 6px); bottom: -50px; border-radius: 10px; } + div:nth-child(4) { width: 12px; height: 80px; right: 0px; bottom: -3px; border-radius: 8px; } + } + + .name { + margin: 0 auto; + margin-top: 60px; + width: 150px; height: 40px; + border-left: solid 15px $theme-purple; + background-color: #fff; + padding: 0 5px; + box-shadow: 0 0 5px rgba(0,0,0,0.4); + font-size: 25px; + color: #555; + font-weight: bold; + text-align: center; + line-height: 40px; + transform: rotate(-5deg); + } + + .info { + margin: 0 auto; + margin-top: 40px; + + .info-li { + position: relative; + width: 400px; + padding: 0 10px; + margin: 0 auto; + margin-bottom: 15px; + border-bottom: solid 1px $theme-light-pink; + + span { + font-size: 12px; + color: $theme-light-purple; + margin-right: 5px; + } + + &::after { + position: absolute; + left: -15px; bottom: -5px; + content: ""; display: block; + width: 10px; height: 10px; + background-color: $theme-light-pink; + border-radius: 50%; + } + } + } + } +} diff --git a/src/scss/modules/pc/_top-page.scss b/src/scss/modules/pc/_top-page.scss index 07cc4a4..37b2146 100644 --- a/src/scss/modules/pc/_top-page.scss +++ b/src/scss/modules/pc/_top-page.scss @@ -5,7 +5,7 @@ width: 100%; height: 100%; background-color: $theme-bg; overflow: hidden; - z-index: 996; + z-index: 1001; &::after { content: ""; display: block; @@ -319,6 +319,7 @@ transform: translateX(calc(100% + 5px)); overflow: hidden; z-index: 1; + transition: all 0.3s ease 0s; a { position: relative; @@ -329,11 +330,15 @@ text-align: center; line-height: 50px; color: $theme-purple; - background-color: $theme-mint; + transition: all 0.3s ease 0s; i { font-size: 20px; margin-right: 5px; } } } + .top-page__share-btn:hover { + a { color: #fff; } + background-color: $theme-pink; + } .top-page[data-state="start"] { /*** ring ***/