<div class="other-23" id="js-other-23">
<div class="other-23__circle"></div>
</div>
.other-23#js-other-23
.other-23__circle
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.other-23';
// 変数
#{ $BLOCK_NAME } {
width: 100%;
height: 60px;
background: #d9dce3;
-webkit-mask: url(/parts/img/components/others/other23/text.svg) repeat-x;
mask: url(/parts/img/components/others/other23/text.svg) repeat-x;
-webkit-mask-position: left top;
mask-position: left top;
-webkit-mask-size: auto 100%;
mask-size: auto 100%;
animation: maskSlide 80s linear infinite;
position: relative;
overflow: hidden;
&__circle {
top: 0;
left: 0;
position: absolute;
border-radius: 50%;
width: 0;
height: 0;
z-index: 1;
pointer-events: none;
transition: width 0.4s, height 0.4s;
background: linear-gradient(
#2d3287 0%,
#803f8c 38.42%,
#d5553e 76.85%,
#fbca1b 100%
);
will-change: transform;
@at-root #{ $BLOCK_NAME }.-on & {
width: 100px;
height: 100px;
}
}
}
@keyframes maskSlide {
0% {
-webkit-mask-position: left top;
mask-position: left top;
}
100% {
-webkit-mask-position: left -1600px top;
mask-position: left top;
}
}
'use strict';
export const other23 = () => {
const other = new Other23('js-other-23');
other.init();
};
class Other23 {
el: HTMLElement;
circleSelector: string;
constructor(id: string) {
this.el = document.getElementById(id);
this.circleSelector = '.other-23__circle';
}
/**
* 初期化
*/
init(): void {
if (!this.el) return;
this.onEnterHandler();
this.onLeaveHandler();
}
/**
* 円要素の位置設定
* @param event イベントオブジェクト
*/
setCirclePos(event: MouseEvent): void {
const circleEl = <HTMLElement>this.el.querySelector(this.circleSelector);
const clientRect = this.el.getBoundingClientRect();
// 要素内におけるカーソル位置を取得
const x = event.pageX - (clientRect.left + window.pageXOffset);
const y = event.pageY - (clientRect.top + window.pageYOffset);
// 要素の位置を設定
// TODO: イージング処理できるようになりたい
circleEl.style.transform = `translate(${x - 50}px, ${y - 50}px)`;
}
/**
* カーソル進入時の処理
*/
onEnterHandler(): void {
this.el.addEventListener('mouseover', () => {
this.el.classList.add('-on');
this.el.addEventListener('mousemove', (e) => {
this.setCirclePos(e);
});
});
}
/**
* カーソル退出時の処理
*/
onLeaveHandler(): void {
this.el.addEventListener('mouseout', () => {
this.el.classList.remove('-on');
this.el.removeEventListener('mousemove', (e) => {
this.setCirclePos(e);
});
});
}
}