diff --git a/public/images/top-page/gab.png b/public/images/top-page/gab.png
new file mode 100644
index 0000000..3df4378
Binary files /dev/null and b/public/images/top-page/gab.png differ
diff --git a/public/images/top-page/logo.png b/public/images/top-page/logo.png
new file mode 100644
index 0000000..e2285c2
Binary files /dev/null and b/public/images/top-page/logo.png differ
diff --git a/public/index.html b/public/index.html
index b840ccf..eaf6219 100644
--- a/public/index.html
+++ b/public/index.html
@@ -332,6 +332,58 @@
+
+
+
+
+
+
+ 
+
+
+
+ ようこそ、魔法少女サイトへ
+
+
+
+
diff --git a/src/scripts/app.js b/src/scripts/app.js
index 156906a..20cdb12 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -6,6 +6,10 @@ import preload_json from './config/preload'
// components
import './components/app.tag'
+// init
+util.setRingSize()
+util.bindNav()
+
// loading
util.startLoading(() => {
util.preload(preload_json, () => {
diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js
index 07ea6ee..027f9f0 100644
--- a/src/scripts/lib/util.js
+++ b/src/scripts/lib/util.js
@@ -1,13 +1,15 @@
-const root = document.getElementById('root')
-const load_icon = document.querySelector('.load-view__body__panel__icon_type_4 .icon')
-const load_view = document.querySelector('.load-view')
-const load_view_body_close = document.querySelector('.load-view__body__close')
-const gab_animation = document.querySelector('.gab-animation')
+const root = document.getElementById('root')
+const load_icon = document.querySelector('.load-view__body__panel__icon_type_4 .icon')
+const load_view = document.querySelector('.load-view')
+const load_view_body_close = document.querySelector('.load-view__body__close')
+const gab_animation = document.querySelector('.gab-animation')
const gab_animation__end_block = document.querySelector('.gab-animation__close .end-block')
-const calling = document.querySelector('.calling')
-const calling__end = document.querySelector('.calling__end')
-const end_animation = document.querySelector('.end-animation')
-const end_animation__end = document.querySelector('.end-animation .window img')
+const calling = document.querySelector('.calling')
+const calling__end = document.querySelector('.calling__end')
+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')
/**
* 画像のプリロード
@@ -54,6 +56,37 @@ export const isPC = () => {
return !isSP()
}
+/**
+ * top-page__ringのサイズを設定
+ */
+export const setRingSize = () => {
+ const default_size = 650
+ const window_size = top_page.clientHeight
+ const per = window_size / default_size
+
+ top_page__wrap.style.transform = `scale(${ per })`
+}
+
+/**
+ * ナビゲーションボタンホバー時のイベント監視
+ */
+export const bindNav = () => {
+ const navs = document.querySelectorAll('.top-page__global-nav a')
+
+ navs.forEach((nav, key) => {
+ /* mouseover ------------------------------------------------- */
+ nav.addEventListener('mouseover', e => {
+ const color = e.target.getAttribute('data-color')
+ top_page.setAttribute('data-color', color)
+ })
+
+ /* mouseout -------------------------------------------------- */
+ nav.addEventListener('mouseout', e => {
+ top_page.setAttribute('data-color', '')
+ })
+ })
+}
+
/**
* ロードの開始タイミングを取得
* @param fn : コールバック関数
@@ -113,5 +146,13 @@ export const startEndAnimation = () => {
end_animation__end.addEventListener('animationend', e => {
root.removeChild(end_animation)
+ startTopPage()
})
}
+
+/**
+ * top-pageの開始
+ */
+export const startTopPage = () => {
+ top_page.setAttribute('data-state', 'start')
+}
diff --git a/src/scss/keyframes/pc/_top-page.scss b/src/scss/keyframes/pc/_top-page.scss
new file mode 100644
index 0000000..0d394a1
--- /dev/null
+++ b/src/scss/keyframes/pc/_top-page.scss
@@ -0,0 +1,34 @@
+@keyframes top-page__show-ring {
+ from { transform: translateY(200px); opacity: 0; }
+ to { transform: translateY(0px); opacity: 1; }
+}
+@keyframes top-page__rotate-ring {
+ from { transform: rotate(0deg) scale(1.2); }
+ to { transform: rotate(360deg) scale(1.2); }
+}
+
+@keyframes top-page__show-message {
+ from { width: 0; }
+ to { width: 250px; }
+}
+@keyframes top-page__hidden-message {
+ from { width: 250px; left: calc(50% - 125px); }
+ to { width: 0px; left: 50%; }
+}
+
+@keyframes top-page__scale-nav {
+ from { width: 200px; left: calc(50% - 100px); }
+ to { width: 700px; left: calc(50% - 350px); }
+}
+@keyframes top-page__rotate-nav-1 {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(20deg); }
+}
+@keyframes top-page__rotate-nav-2 {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(-20deg); }
+}
+@keyframes top-page__show-nav-text {
+ from { color: transparent; }
+ to { color: #fff; }
+}
diff --git a/src/scss/modules/pc/_top-page.scss b/src/scss/modules/pc/_top-page.scss
new file mode 100644
index 0000000..07cc4a4
--- /dev/null
+++ b/src/scss/modules/pc/_top-page.scss
@@ -0,0 +1,405 @@
+@include pc-layout {
+ .top-page {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: $theme-bg;
+ overflow: hidden;
+ z-index: 996;
+
+ &::after {
+ content: ""; display: block;
+ width: 100%; height: 100%;
+ background-image: url(../images/bg.png);
+ background-size: 15px;
+ opacity: 0.5;
+ }
+ &::before {
+ content: ""; display: block;
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: $theme-bg;
+ opacity: 0.4;
+ transition: all 0.3s ease 0s;
+ }
+ }
+ .top-page[data-color="pink"]:before { background-color: $theme-pink; }
+ .top-page[data-color="light-pink"]:before { background-color: $theme-light-pink; }
+ .top-page[data-color="purple"]:before { background-color: $theme-purple; }
+ .top-page[data-color="light-purple"]:before { background-color: $theme-light-purple; }
+
+ /*** ring ***/
+ .top-page__ring {
+ position: absolute;
+ top: calc(50% - 325px); left: calc(50% - 325px);
+ width: 650px; height: 650px;
+ border-radius: 50%;
+ opacity: 0.6;
+ z-index: 1;
+
+ .wrap {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+
+ .inner {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+
+ div {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ &::after {
+ position: absolute;
+ top: 0px; left: calc(50% - 50px);
+ content: ""; display: block;
+ width: 0; height: 0;
+ border-top: solid 120px transparent;
+ border-left: solid 45px transparent;
+ border-right: solid 45px transparent;
+ opacity: 0;
+ }
+ }
+ div:nth-child(1n):after { border-top-color: $theme-pink; }
+ div:nth-child(2n):after { border-top-color: $theme-light-pink; }
+ div:nth-child(3n):after { border-top-color: $theme-purple; }
+ div:nth-child(4n):after { border-top-color: $theme-light-purple; }
+ div:nth-child(5n):after { border-top-color: $theme-gray; }
+ div:nth-child(1) { transform: rotate(0deg); }
+ div:nth-child(2) { transform: rotate(10deg); }
+ div:nth-child(3) { transform: rotate(30deg); }
+ div:nth-child(4) { transform: rotate(40deg); }
+ div:nth-child(5) { transform: rotate(60deg); }
+ div:nth-child(6) { transform: rotate(70deg); }
+ div:nth-child(7) { transform: rotate(90deg); }
+ div:nth-child(8) { transform: rotate(100deg); }
+ div:nth-child(9) { transform: rotate(120deg); }
+ div:nth-child(10) { transform: rotate(130deg); }
+ div:nth-child(11) { transform: rotate(150deg); }
+ div:nth-child(12) { transform: rotate(160deg); }
+ div:nth-child(13) { transform: rotate(180deg); }
+ div:nth-child(14) { transform: rotate(190deg); }
+ div:nth-child(15) { transform: rotate(210deg); }
+ div:nth-child(16) { transform: rotate(220deg); }
+ div:nth-child(17) { transform: rotate(240deg); }
+ div:nth-child(18) { transform: rotate(250deg); }
+ div:nth-child(19) { transform: rotate(270deg); }
+ div:nth-child(20) { transform: rotate(280deg); }
+ div:nth-child(21) { transform: rotate(300deg); }
+ div:nth-child(22) { transform: rotate(310deg); }
+ div:nth-child(23) { transform: rotate(330deg); }
+ div:nth-child(24) { transform: rotate(340deg); }
+ }
+ .inner { transform: scale(1.2); }
+ }
+ }
+
+ /*** main-illust ***/
+ .top-page__main-illust {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-image: url(../images/top-page/gab.png);
+ background-size: auto 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0;
+ z-index: 1;
+ }
+
+ /*** frame ***/
+ .top-page__frame {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ z-index: 1;
+
+ section {
+ position: absolute;
+ width: 45px; height: 45px;
+
+ div {
+ position: absolute;
+ background-color: $theme-purple;
+ border-radius: 3px;
+ opacity: 0.8;
+ transform: scale(0);
+ }
+ div:nth-child(1),
+ div:nth-child(3) { width: 12px; height: 12px; }
+ div:nth-child(2) { width: 25px; height: 25px; }
+ }
+ section:nth-child(1) {
+ top: 20px; left: 20px;
+ div:nth-child(1) { top: 0; right: 0; }
+ div:nth-child(2) { top: 0; left: 0; }
+ div:nth-child(3) { bottom: 0; left: 0; }
+ }
+ section:nth-child(2) {
+ top: 20px; right: 20px;
+ div:nth-child(1) { top: 0; left: 0; }
+ div:nth-child(2) { top: 0; right: 0; }
+ div:nth-child(3) { bottom: 0; right: 0; }
+ }
+ section:nth-child(3) {
+ bottom: 20px; left: 20px;
+ div:nth-child(1) { top: 0; left: 0; }
+ div:nth-child(2) { bottom: 0; left: 0; }
+ div:nth-child(3) { bottom: 0; right: 0; }
+ }
+ section:nth-child(4) {
+ bottom: 20px; right: 20px;
+ div:nth-child(1) { top: 0; right: 0; }
+ div:nth-child(2) { bottom: 0; right: 0; }
+ div:nth-child(3) { bottom: 0; left: 0; }
+ }
+ }
+
+ /*** globa-nav ***/
+ .top-page__global-nav {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ z-index: 1;
+
+ .nav-box {
+ position: absolute;
+ top: calc(50% - 25px); left: calc(50% - 100px);
+ width: 200px; height: 50px;
+ opacity: 0;
+
+ section {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+
+ a {
+ display: block;
+ position: absolute; top: 0;
+ width: 200px; height: 50px;
+ border-radius: 30px;
+ font-size: 17px;
+ font-weight: bold;
+ color: transparent;
+ text-align: center;
+ line-height: 50px;
+ overflow: hidden;
+ transition: all 0.3s ease 0s;
+
+ &::before,
+ &::after {
+ content: ""; display: block;
+ position: absolute;
+ width: 60%; height: 1px;
+ background-color: #fff;
+ opacity: 0.6;
+ transition: all 0.5s ease 0s;
+ }
+ &::before { top: 5px; left: 5px; transform: translateX(calc(-100% + -5px)); }
+ &::after { bottom: 5px; right: 5px; transform: translateX(calc(100% + 5px)); }
+ }
+ a:hover {
+ transform: scale(1.2); border-radius: 0;
+ &::before,
+ &::after { transform: translateX(0); }
+ }
+ a:nth-child(1) { left: 0; }
+ a:nth-child(2) { right: 0; }
+ }
+ section:nth-child(1) {
+ a:nth-child(1) { background-color: $theme-pink; }
+ a:nth-child(2) { background-color: $theme-light-pink; }
+ }
+ section:nth-child(2) {
+ a:nth-child(1) { background-color: $theme-light-purple; }
+ a:nth-child(2) { background-color: $theme-purple; }
+ }
+ }
+
+ .message {
+ position: absolute;
+ left: calc(50% - 125px); top: calc(50% - 25px);
+ width: 0px; height: 50px;
+ border-radius: 30px;
+ background-color: $theme-purple;
+ box-shadow: 0 0 3px rgba(255,255,255,0.5);
+ overflow: hidden;
+
+ h3 {
+ width: 250px; height: 50px;
+ font-size: 15px;
+ color: rgba(255,255,255,0.8);
+ text-align: center;
+ line-height: 50px;
+ transform: translateY(100%);
+ }
+ }
+ }
+
+ /*** logo ***/
+ .top-page__logo {
+ position: absolute;
+ top: calc(50% - 50px); left: 0;
+ width: 100%; height: 100px;
+ background-color: rgba(255,255,255,0.5);
+ opacity: 0;
+ z-index: 1;
+
+ img {
+ position: absolute;
+ left: calc(50% - 150px); top: 0;
+ display: block;
+ background-color: rgba(255,255,255,0.2);
+ height: 100px;
+ }
+ }
+
+ /*** sns ***/
+ .top-page__sns {
+ position: absolute;
+ top: calc(50% - 75px); left: 0px;
+ width: 50px; height: 150px;
+ background-color: #fff;
+ box-shadow: 0 0 5px rgba(0,0,0,0.4);
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ overflow: hidden;
+ transform: translateX(calc(-100% + -5px));
+ z-index: 1;
+
+ a {
+ position: relative;
+ display: block;
+ width: 50px; height: 50px;
+
+ &::before {
+ position: absolute;
+ top: 0; left: 0;
+ content: ""; display: block;
+ width: 100%; height: 100%;
+ transform: translateX(-100%);
+ transition: all 0.25s ease 0s;
+ }
+
+ i {
+ position: absolute;
+ top: 0; left: 0;
+ width: 50px; height: 50px;
+ font-size: 25px;
+ line-height: 50px;
+ text-align: center;
+ color: $theme-light-purple;
+ }
+ }
+ a:hover:before { transform: translateX(0); }
+ a:nth-child(1) {
+ &::before { background-color: $theme-mint; }
+ }
+ a:nth-child(2) {
+ &::before { background-color: $theme-gray; }
+ }
+ a:nth-child(3) {
+ i { font-size: 22px; }
+ &::before { background-color: $theme-light-pink; }
+ }
+ }
+
+ /*** share-btn ***/
+ .top-page__share-btn {
+ position: absolute;
+ right: 0; top: calc(50% - 25px);
+ width: 140px; height: 50px;
+ background-color: $theme-mint;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ box-shadow: 0 0 5px rgba(0,0,0,0.4);
+ transform: translateX(calc(100% + 5px));
+ overflow: hidden;
+ z-index: 1;
+
+ a {
+ position: relative;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ display: block;
+ font-size: 13px;
+ text-align: center;
+ line-height: 50px;
+ color: $theme-purple;
+ background-color: $theme-mint;
+
+ i { font-size: 20px; margin-right: 5px; }
+ }
+ }
+
+ .top-page[data-state="start"] {
+ /*** ring ***/
+ .top-page__ring {
+ .inner {
+ animation: top-page__rotate-ring 150s linear 0s infinite;
+ div:nth-child(1n):after { animation: top-page__show-ring 0.4s ease 0s forwards; }
+ div:nth-child(2n):after { animation: top-page__show-ring 0.4s ease 0.05s forwards; }
+ }
+ }
+
+ /*** main-illust ***/
+ .top-page__main-illust {
+ animation:
+ scale0-1 0.4s ease 0.2s forwards,
+ fadein 0.4s ease 0.2s forwards;
+ }
+
+ /*** frame ***/
+ .top-page__frame {
+ section {
+ div:nth-child(2) { animation: scale0-1 0.4s ease 0.6s forwards; }
+ div:nth-child(1),
+ div:nth-child(3) { animation: scale0-1 0.4s ease 0.7s forwards; }
+ }
+ }
+
+ /*** logo ***/
+ .top-page__logo { animation: fadein 2s ease 2.7s forwards; }
+
+ /*** global-nav ***/
+ .top-page__global-nav {
+ .nav-box {
+ animation: fadein 0.1s ease 1.4s forwards;
+ section:nth-child(1) {
+ animation:
+ top-page__scale-nav 0.3s ease 1.4s forwards,
+ top-page__rotate-nav-1 0.5s ease 1.7s forwards;
+ a:nth-child(1) { animation: top-page__show-nav-text 0.7s ease 2.2s forwards; }
+ a:nth-child(2) { animation: top-page__show-nav-text 0.7s ease 2.5s forwards; }
+ }
+ section:nth-child(2) {
+ animation:
+ top-page__scale-nav 0.3s ease 1.4s forwards,
+ top-page__rotate-nav-2 0.5s ease 1.7s forwards;
+ a:nth-child(1) { animation: top-page__show-nav-text 0.7s ease 2.3s forwards; }
+ a:nth-child(2) { animation: top-page__show-nav-text 0.7s ease 2.4s forwards; }
+ }
+ }
+
+ .message {
+ animation:
+ top-page__show-message 0.4s ease 1s forwards,
+ top-page__hidden-message 0.5s ease 2s forwards;
+ h3 {
+ animation:
+ slide-top 0.5s ease 1.2s forwards,
+ fadeout 0.1s ease 2s forwards;
+ }
+ }
+ }
+
+ /*** sns ***/
+ .top-page__sns { animation: slide-right 0.4s ease 3s forwards; }
+
+ /*** share-btn ***/
+ .top-page__share-btn { animation: slide-left 0.4s ease 3s forwards; }
+ }
+}