Public code

全画面背景動画

画面サイズによって比率を守って、幅/高さいっぱいを計算する。CSSはfixedで中央に。
0
0
Screenshot!
Copy Code!
export default class Hoge { constructor() { this.video = document.querySelector('.video') const height = 1366 const width = 768 // 動画比率 this.baseVideoRatio = height/width this.heightRatio = width/height this.init() } init() { this.setVideoSize() window.addEventListener('resize', this.setVideoSize.bind(this)) } setVideoSize() { // 現在比率 let currentRatio = window.innerWidth / window.innerHeight // 幅 : 100% // 高さ : 比率を守って計算する if (this.baseVideoRatio < currentRatio) { const videoWidth = window.innerWidth const videoHeight = videoWidth * this.heightRatio TweenMax.set(this.video, { css: { 'height': `${videoHeight}px`, 'width': `${videoWidth}px` } }) } else if (this.baseVideoRatio >= currentRatio) { // 高さ : 100% // 幅 : 比率を守って計算する const videoHeight = window.innerHeight const videoWidth = videoHeight * this.baseVideoRatio TweenMax.set(this.video, { css: { 'height': `${videoHeight}px`, 'width': `${videoWidth}px` } }) } } }
Back to Home