CSS mask を使ってシャッター効果を作る

2022年12月30日
blog
css

hover デモ

.shutter-box--hover

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.shutter-box--hover.mod--reverse

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.shutter-box--hover.mod--vertical

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

.shutter-box--hover.mod--vertical.mod--reverse

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

emergence.js デモ

.shutter-box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.shutter-box.mod--reverse

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.shutter-box.mod--vertical

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

.shutter-box.mod--vertical.mod--reverse

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

コード

.shutter-box--hover,
.shutter-box {
  --shutter-mask: url('data:image/gif;base64,R0lGODdhCgAKAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAAKAAoAAAIIhI+py+0PYysAOw==');
  -webkit-mask-image: var(--shutter-mask);
  mask-image: var(--shutter-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size .6s, mask-size .6s;
}

.shutter-box--hover {
  -webkit-mask-size: 0 100%;
  mask-size: 0 100%;
}

.shutter-box--hover.mod--reverse,
.shutter-box.mod--reverse {
  -webkit-mask-position: right top;
  mask-position: right top;
}

.shutter-box--hover.mod--vertical {
  -webkit-mask-size: 100% 0;
  mask-size: 100% 0;
}

.shutter-box--hover.mod--vertical.mod--reverse,
.shutter-box.mod--vertical.mod--reverse {
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
}

.shutter-box--hover:hover {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.shutter-box[data-emergence='hidden'] {
  -webkit-mask-size: 0 100%;
  mask-size: 0 100%;
}

.shutter-box.mod--vertical[data-emergence='hidden'] {
  -webkit-mask-size: 100% 0;
  mask-size: 100% 0;
}

参考サイト

«
»