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

Merge pull request #24 from yuki540net/feature/skip-button

Browse Source 
Feature/skip button
This commit is contained in:
yuki540 2018-04-20 11:58:29 +09:00 committed by GitHub
commit b77d010f71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 105 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/index.html
View File

@ -47,6 +47,8 @@
</head>
<body>
<main id="root">
<!--********************************* skip button **************************************-->
<button id="skip-button">SKIP</button>
<!--********************************** load view ***************************************-->
<section class="load-view">
<div class="load-view__frame">
@ -309,7 +311,7 @@
<div></div><div></div><div></div><div></div><div></div>
</section>
</section>
<!--********************************** end-animation ***************************************-->
<!--********************************** end animation ***************************************-->
<section class="end-animation">
<section class="end-animation__end-roll">
<div class="text-balls">
@ -341,7 +343,7 @@
</div>
</section>
</section>
<!--********************************** top-page ***************************************-->
<!--********************************** top page ***************************************-->
<section class="top-page">
<section class="top-page__ring">
<div class="wrap">
@ -393,7 +395,7 @@
</a>
</section>
</section>
<!--********************************** page-box ***************************************-->
<!--********************************** page box ***************************************-->
<section class="page-box">
<section class="page-box__bg"><div></div><div></div></section>
<a class="page-box__close-btn" href="#">

2
src/scripts/app.js
View File

@ -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 => {})
})

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

@ -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 : コールバック関数

71
src/scss/modules/_skip-button.scss Normal file
View File

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