<div class="other-26" id="js-other-26"><svg class="other-26__svg" viewBox="0 0 1600 900" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask class="other-26__svg-mask" id="other-26__svg-mask">
<path d="M0,0 L320,0 L320,320 L0,320Z"></path>
<path d="M400,80 L720,80 L720,400 L400,400Z"></path>
<path d="M800,0 L1200,0 L1200,240 L800,240Z"></path>
<path d="M1280,0 L1600,0 L1600,320 L1280,320Z"></path>
<path d="M0,400 L240,400 L240,900 L0,900Z"></path>
<path d="M320,480 L720,480 L720,900 L320,900Z"></path>
<path d="M800,320 L1120,320 L1120,840 L800,840Z"></path>
<path d="M1200,400 L1600,400 L1600,900 L1200,900Z"></path>
</mask>
</defs>
<foreignObject class="other-26__content" mask="url(#other-26__svg-mask)" width="1600" height="900">
<div class="other-26__bg"></div>
</foreignObject>
</svg>
<ul class="other-26__items">
<li class="other-26__item --item1"><a class="other-26__item-link" href="#item1"><img src="https://picsum.photos/id/237/1700/900" /></a></li>
<li class="other-26__item --item2"><a class="other-26__item-link" href="#item2"><img src="https://picsum.photos/id/247/1700/900" /></a></li>
<li class="other-26__item --item3"><a class="other-26__item-link" href="#item3"><img src="https://picsum.photos/id/239/1700/900" /></a></li>
<li class="other-26__item --item4"><a class="other-26__item-link" href="#item4"><img src="https://picsum.photos/id/248/1700/900" /></a></li>
<li class="other-26__item --item5"><a class="other-26__item-link" href="#item5"><img src="https://picsum.photos/id/249/1700/900" /></a></li>
<li class="other-26__item --item6"><a class="other-26__item-link" href="#item6"><img src="https://picsum.photos/id/242/1700/900" /></a></li>
<li class="other-26__item --item7"><a class="other-26__item-link" href="#item7"><img src="https://picsum.photos/id/243/1700/900" /></a></li>
<li class="other-26__item --item8"><a class="other-26__item-link" href="#item8"><img src="https://picsum.photos/id/244/1700/900" /></a></li>
</ul>
</div>
.other-26#js-other-26
svg.other-26__svg(
viewBox='0 0 1600 900',
version='1.1',
xmlns='http://www.w3.org/2000/svg',
)
defs
mask#other-26__svg-mask.other-26__svg-mask
path(d='M0,0 L320,0 L320,320 L0,320Z')
path(d='M400,80 L720,80 L720,400 L400,400Z')
path(d='M800,0 L1200,0 L1200,240 L800,240Z')
path(d='M1280,0 L1600,0 L1600,320 L1280,320Z')
path(d='M0,400 L240,400 L240,900 L0,900Z')
path(d='M320,480 L720,480 L720,900 L320,900Z')
path(d='M800,320 L1120,320 L1120,840 L800,840Z')
path(d='M1200,400 L1600,400 L1600,900 L1200,900Z')
foreignObject.other-26__content(
mask='url(#other-26__svg-mask)',
width='1600',
height='900',
)
.other-26__bg
ul.other-26__items
- for (var i = 0; i < items.length; i++)
li.other-26__item(class='--item' + (i + 1))
a.other-26__item-link(href='#item' + (i + 1))
img(src=items[i])
{
"items": [
"https://picsum.photos/id/237/1700/900",
"https://picsum.photos/id/247/1700/900",
"https://picsum.photos/id/239/1700/900",
"https://picsum.photos/id/248/1700/900",
"https://picsum.photos/id/249/1700/900",
"https://picsum.photos/id/242/1700/900",
"https://picsum.photos/id/243/1700/900",
"https://picsum.photos/id/244/1700/900"
]
}
$BLOCK_NAME: '.other-26';
// 変数
#{ $BLOCK_NAME } {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
&__svg {
width: 100%;
aspect-ratio: 16 / 9;
vertical-align: bottom;
}
&__svg-mask {
fill: #fff;
}
&__content {
position: relative;
}
&__bg {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: auto 100%;
background-position-x: 100%;
transition: background-position-x 0.3s;
@at-root #{ $BLOCK_NAME }.--hover & {
background-position-x: 0%;
}
}
&__items {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
&__item {
position: absolute;
&.--item1 {
top: 0;
bottom: calc(100% * (1 - 320 / 900));
left: 0;
right: calc(100% * (1 - 320 / 1600));
}
&.--item2 {
top: calc(100% * (80 / 900));
bottom: calc(100% * (1 - 400 / 900));
left: calc(100% * (400 / 1600));
right: calc(100% * (1 - 720 / 1600));
}
&.--item3 {
top: 0;
bottom: calc(100% * (1 - 240 / 900));
left: calc(100% * (800 / 1600));
right: calc(100% * (1 - 1200 / 1600));
}
&.--item4 {
top: 0;
bottom: calc(100% * (1 - 320 / 900));
left: calc(100% * (1280 / 1600));
right: 0;
}
&.--item5 {
top: calc(100% * (400 / 900));
bottom: 0;
left: 0;
right: calc(100% * (1 - 240 / 1600));
}
&.--item6 {
top: calc(100% * (480 / 900));
bottom: 0;
left: calc(100% * (320 / 1600));
right: calc(100% * (1 - 720 / 1600));
}
&.--item7 {
top: calc(100% * (320 / 900));
bottom: calc(100% * (1 - 840 / 900));
left: calc(100% * (800 / 1600));
right: calc(100% * (1 - 1120 / 1600));
}
&.--item8 {
top: calc(100% * (400 / 900));
bottom: 0;
left: calc(100% * (1200 / 1600));
right: 0;
}
}
&__item-link {
display: block;
width: 100%;
height: 100%;
filter: grayscale(1);
// transition: filter 0.2s;
// &:hover {
// filter: grayscale(0);
// }
& > img {
width: 100%;
height: 100%;
object-fit: cover;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
transition: clip-path 0.3s;
@at-root #{ $BLOCK_NAME }.--hover & {
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
}
}
}
'use strict';
export const other26 = () => {
const other = new Other26('js-other-26');
other.init();
};
class Other26 {
el: HTMLElement;
bgEl: HTMLElement;
itemEls: NodeListOf<HTMLElement>;
constructor(id: string) {
this.el = document.getElementById(id);
if (!this.el) return;
this.bgEl = this.el.querySelector('.other-26__bg');
this.itemEls = this.el.querySelectorAll('.other-26__item');
}
/**
* 初期化
*/
init(): void {
if (!this.el) return;
this.onHoverItemHandler();
}
/**
* 項目ホバー時の処理
*/
onHoverItemHandler() {
const self = this;
[...this.itemEls].forEach((el) => {
el.addEventListener('mouseenter', (e) => {
const targetEl = <HTMLElement>e.target;
const targetImg = targetEl.querySelector('img').getAttribute('src');
self.el.classList.add('--hover');
self.bgEl.style.backgroundImage = `url(${targetImg})`;
});
el.addEventListener('mouseleave', () => {
self.el.classList.remove('--hover');
});
});
}
}