diff --git a/public/index.html b/public/index.html
index aa10cd0..d5c3ad1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -47,6 +47,8 @@
+
+
@@ -309,7 +311,7 @@
-
+
-
+
@@ -393,7 +395,7 @@
-
+
diff --git a/src/scripts/app.js b/src/scripts/app.js
index 0b73cdd..d44e636 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -1,5 +1,4 @@
import riot from 'riot'
-import route from 'riot-route'
import * as util from './lib/util'
import preload_json from './config/preload'
import history_json from './config/history'
@@ -20,6 +19,7 @@ util.bindCloseBtn()
util.startLoading(() => {
util.preload(preload_json, () => {
util.finLoad()
+ util.showSkipButton()
}, data => {})
})
diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js
index 10a06d7..056e2b6 100644
--- a/src/scripts/lib/util.js
+++ b/src/scripts/lib/util.js
@@ -129,6 +129,34 @@ export const hiddenPage = () => {
document.querySelector('.product-page').style.display = 'none'
}
+/**
+ * スキップボタンの表示
+ */
+export const showSkipButton = () => {
+ const skip_button = document.getElementById('skip-button')
+ skip_button.setAttribute('data-state', 'true')
+
+ /* click ---------------------------------------------------------------- */
+ skip_button.addEventListener('click', e => {
+ e.target.setAttribute('data-state', 'false')
+ skipAnimation()
+ })
+
+ setTimeout(() => { skip_button.setAttribute('data-state', 'false') }, 5000)
+}
+
+/**
+ * アニメーションをスキップ
+ */
+export const skipAnimation = () => {
+ if(load_view) root.removeChild(load_view)
+ if(gab_animation) root.removeChild(gab_animation)
+ if(calling) root.removeChild(calling)
+ if(end_animation) root.removeChild(end_animation)
+
+ top_page.setAttribute('data-state', 'start')
+}
+
/**
* ロードの開始タイミングを取得
* @param fn : コールバック関数
diff --git a/src/scss/modules/_skip-button.scss b/src/scss/modules/_skip-button.scss
new file mode 100644
index 0000000..cf8b5cc
--- /dev/null
+++ b/src/scss/modules/_skip-button.scss
@@ -0,0 +1,71 @@
+@include pc-layout {
+ #skip-button {
+ position: absolute;
+ bottom: 50px; right: 0;
+ width: 160px; height: 60px;
+ background-color: $theme-mint;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ font-size: 30px;
+ color: $theme-purple;
+ text-align: center;
+ line-height: 60px;
+ box-shadow: 0 0 5px rgba(0,0,0,0.6);
+ transform: translateX(100%);
+ transition: all 0.3s ease 0s;
+ border: none;
+ cursor: pointer;
+ z-index: 1001;
+ }
+}
+@include tablet-layout {
+ #skip-button {
+ position: absolute;
+ bottom: 50px; right: 0;
+ width: 160px; height: 60px;
+ background-color: $theme-mint;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ font-size: 30px;
+ color: $theme-purple;
+ text-align: center;
+ line-height: 60px;
+ box-shadow: 0 0 5px rgba(0,0,0,0.6);
+ transform: translateX(100%);
+ transition: all 0.3s ease 0s;
+ cursor: pointer;
+ z-index: 1001;
+ }
+}
+@include sp-layout {
+ #skip-button {
+ position: absolute;
+ bottom: 50px; right: 0;
+ width: 100px; height: 45px;
+ background-color: $theme-mint;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ font-size: 20px;
+ color: $theme-purple;
+ text-align: center;
+ line-height: 45px;
+ box-shadow: 0 0 5px rgba(0,0,0,0.6);
+ transform: translateX(100%);
+ transition: all 0.3s ease 0s;
+ cursor: pointer;
+ z-index: 1001;
+ }
+}
+
+#skip-button:hover {
+ color: #fff;
+ background-color: $theme-pink;
+}
+
+#skip-button[data-state="true"] {
+ transform: translateX(0%);
+}
+
+#skip-button[data-state="false"] {
+ transform: translateX(100%);
+}