<div class="other-25" id="js-other-25">
<div class="other-25__back"><img src="/parts/img/components/others/other25/img-back.png" alt="" /></div>
<div class="other-25__center"><img src="/parts/img/components/others/other25/img-center.png" alt="" /></div>
<div class="other-25__front"><img src="/parts/img/components/others/other25/img-front.png" alt="" /></div>
</div>
.other-25#js-other-25
.other-25__back
img(src='/parts/img/components/others/other25/img-back.png', alt='')
.other-25__center
img(src='/parts/img/components/others/other25/img-center.png', alt='')
.other-25__front
img(src='/parts/img/components/others/other25/img-front.png', alt='')
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.other-25';
// 変数
$offset: 50px;
#{ $BLOCK_NAME } {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 1280 / 853;
background: #000;
&__back,
&__center,
&__front {
position: absolute;
top: -$offset;
bottom: -$offset;
left: -$offset;
right: -$offset;
transition: transform 0.2s;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__back {
> img {
transform: translateY(10px);
}
}
&__front {
> img {
transform: translateY(-10px);
}
}
}
'use strict';
export const other25 = () => {
const other = new Other25('js-other-25');
other.init();
};
class Other25 {
el: HTMLElement;
backEl: HTMLElement;
centerEl: HTMLElement;
frontEl: HTMLElement;
backOffset: number;
centerOffset: number;
frontOffset: number;
constructor(id: string) {
this.el = document.getElementById(id);
if (!this.el) return;
this.backEl = this.el.querySelector('.other-25__back');
this.centerEl = this.el.querySelector('.other-25__center');
this.frontEl = this.el.querySelector('.other-25__front');
this.backOffset = 0.03;
this.centerOffset = 0.04;
this.frontOffset = 0.05;
}
/**
* 初期化
*/
init(): void {
if (!this.el) return;
this.onMouseMoveHandler();
}
/**
* マウス移動時の処理設定
*/
onMouseMoveHandler(): void {
console.log('test');
this.el.addEventListener('mousemove', (e) => {
const elRect = this.el.getBoundingClientRect();
const posX = e.clientX - elRect.left - elRect.width / 2;
const posY = e.clientY - elRect.top - elRect.height / 2;
this.backEl.style.transform = `translate(${posX * this.backOffset}px, ${
posY * this.backOffset
}px)`;
this.centerEl.style.transform = `translate(${
posX * this.centerOffset
}px, ${posY * this.centerOffset}px)`;
this.frontEl.style.transform = `translate(${posX * this.frontOffset}px, ${
posY * this.frontOffset
}px)`;
});
}
}