MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #17 from yuki540net/feature/profile-page

Browse Source 
Feature/profile page
This commit is contained in:
yuki540 2018-04-19 15:58:31 +09:00 committed by GitHub
commit 3bb1d2fe77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 365 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/profile/yuki540.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

70
public/index.html
View File

@ -333,7 +333,7 @@
</section>
</section>
<!--********************************** top-page ***************************************-->
<section class="top-page">
<section class="top-page" data-state="start">
<section class="top-page__ring">
<div class="wrap">
<div class="inner">
@ -357,12 +357,12 @@
<section class="top-page__global-nav">
<nav class="nav-box">
<section>
<a data-color="pink" href="#">私について</a>
<a data-color="light-pink" href="#">思い出</a>
<a data-href="profile-page" data-color="pink" href="#">私について</a>
<a data-href="memories-page" data-color="light-pink" href="#">思い出</a>
</section>
<section>
<a data-color="light-purple" href="#">このサイトの歴史</a>
<a data-color="purple" href="#">作ったもの</a>
<a data-href="history-page" data-color="light-purple" href="#">このサイトの歴史</a>
<a data-href="product-page" data-color="purple" href="#">作ったもの</a>
</section>
</nav>
<div class="message"><h3>ようこそ、魔法少女サイトへ</h3></div>
@ -384,6 +384,66 @@
</a>
</section>
</section>
<!--********************************** page-box ***************************************-->
<section class="page-box">
<section class="page-box__bg"><div></div><div></div></section>
<a class="page-box__close-btn" href="#">
<section></section>
<section><div></div></section>
</a>
<article class="page-box__content">
<!--**** profile ****-->
<section class="profile-page" style="display: none">
<section class="page-title">
<div></div><div></div><div></div><div></div>
<h2>私について</h2>
</section>
<section class="profile-page__body">
<div class="icon"><div></div><div></div><div></div><div></div></div>
<h3 class="name">yuki540</h3>
<div class="info">
<div class="info-li">
<span>Location</span><span>：</span><span>Wakayama, Japan</span>
</div>
<div class="info-li">
<span>Birthday</span><span>：</span><span>1996/11/09</span>
</div>
<div class="info-li">
<span>Job</span><span>：</span><span>ニート（通う理由がなく、専門学校退学した）</span>
</div>
<div class="info-li">
<span>Love</span><span>：</span><span>アニメ, 由比ヶ浜結衣, ミライアカリ, ココロヤミ</span>
</div>
</div>
</section>
</section>
<!--**** history ****-->
<section class="history-page" style="display: none">
<section class="page-title">
<div></div><div></div><div></div><div></div>
<h2>このサイトの歴史</h2>
</section>
</section>
<!--**** product ****-->
<section class="product-page" style="display: none">
<section class="page-title">
<div></div><div></div><div></div><div></div>
<h2>作ったもの</h2>
</section>
</section>
<!--**** memories ****-->
<section class="memories-page" style="display: none">
<section class="page-title">
<div></div><div></div><div></div><div></div>
<h2>思い出</h2>
</section>
</section>
</article>
</section>
</main>
<script type="text/javascript" src="./scripts/app.min.js"></script>
</body>

1
src/scripts/app.js
View File

@ -9,6 +9,7 @@ import './components/app.tag'
// init
util.setRingSize()
util.bindNav()
util.bindCloseBtn()
// loading
util.startLoading(() => {

22
src/scripts/lib/util.js
View File

@ -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')
})
}

22
src/scss/keyframes/pc/_page-box.scss Normal file
View File

@ -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; }
}

165
src/scss/modules/pc/_page-box.scss Normal file
View File

@ -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;
}
}
}

84
src/scss/modules/pc/_profile.scss Normal file
View File

@ -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%;
}
}
}
}
}

9
src/scss/modules/pc/_top-page.scss
View File

@ -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 ***/