<div class="other-38" id="js-other-38"><img class="other-38__img" src="../../img/components/others/other38/bg.jpg" alt="" /></div>
<p><span>※グラデーション画像はフリー素材を利用</span><br /><span>著作者：user3802032／出典：Freepik</span><br /><span>https://jp.freepik.com/free-photo/vivid-blurred-colorful-wallpaper-background_16482584.htm</span></p>
.other-38#js-other-38
img.other-38__img(src=path('/img/components/others/other38/bg.jpg'), alt="")
p
span ※グラデーション画像はフリー素材を利用
br
span 著作者：user3802032／出典：Freepik
br
span #{ text }
{
"text": "https://jp.freepik.com/free-photo/vivid-blurred-colorful-wallpaper-background_16482584.htm"
}
$BLOCK_NAME: '.other-38';
// 変数
#{ $BLOCK_NAME } {
--filter-transition-duration: 16s;
--hus-value: 0deg;
--grayscale: 0;
aspect-ratio: 16 / 9;
max-width: 900px;
transition: filter var(--filter-transition-duration) ease-out;
filter: unquote('hue-rotate(var(--hus-value)) grayscale(var(--grayscale))');
&__img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
'use strict';
export const other38 = () => {
const other = new Other38();
other.init();
};
class Other38 {
el: HTMLElement;
constructor() {
this.el = document.getElementById('js-other-38');
}
/**
* 初期化
*/
init() {
if (!this.el) return;
this.setStyle1();
}
setStyle1() {
const second = 16;
const styleStr = `--filter-transition-duration: ${second}s; --hus-value: 360deg; --grayscale: 0;`;
this.el.setAttribute('style', styleStr);
setTimeout(() => {
this.setStyle2();
}, second * 1000);
}
setStyle2() {
// 一度--hus-valueをクリア
const styleStrClear = `--filter-transition-duration: 0s; --hus-value: 0deg; --grayscale: 0;`;
this.el.setAttribute('style', styleStrClear);
// dom更新されてから次のスタイルをセット
setTimeout(() => {
const second = 1;
const styleStr = `--filter-transition-duration: ${second}s; --hus-value: 0deg; --grayscale: 1;`;
this.el.setAttribute('style', styleStr);
setTimeout(() => {
this.setStyle1();
}, second * 1000);
}, 100);
}
}