
【design】参考にしたい日本人デザイナー・エンジニアのポートフォリオサイトまとめ

https://arts-factory.net/position/
HTML
<div class=”box”>
<p>テキストテキスト</p>
<img src=xxx.jpg width=”600″ height=”400″ alt=”xxxx” >
</div>
CSS
.box{
position: relative;
}
.box p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
velocity.jsと組み合わせて使用した
https://b-risk.jp/blog/2021/01/anim-reference/
https://into-the-program.com/slidein/
https://b-risk.jp/blog/2019/10/text-mask-animation/
https://ics-creative.github.io/210604_mask_variations/css_sample.html
https://github.com/ics-creative/210604_mask_variations/blob/main/canvas_sample.html