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

update: トップページのリングのサイズを調整する処理を実装

Browse Source
This commit is contained in:
yuki540 2018-04-18 11:14:16 +09:00
parent 63d6c82552
commit 6f0b53c85d
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/scripts/app.js
View File

@ -6,6 +6,9 @@ import preload_json from './config/preload'
// components
import './components/app.tag'
// init
util.setRingSize()
// loading
util.startLoading(() => {
util.preload(preload_json, () => {

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

@ -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,17 @@ 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 })`
}
/**
* ロードの開始タイミングを取得
* @param fn : コールバック関数