상호작용 모션 — 전부 피드백 목적으로만
모션은 이유가 있어야 붙인다. 여기 넣은 것은 전부 '지금 이걸 보고 있다' 또는 '이건 눌린다'를 말한다. 장식 목적 애니메이션은 넣지 않았다. - 유리 카드 29곳: 커서 아래에서 3px 떠오르고 그림자가 깊어진다 - 링크 2곳: 밑줄이 왼쪽에서 자란다 - 쇼케이스 판 2곳: 1.2% 다가온다 - 스파인 정거장: 마커가 커지고 인용선이 밝아진다 전부 transform 과 opacity 만 움직인다(하드 게이트 8). prefers-reduced-motion 안에 넣어 모션을 줄이는 설정에서는 전부 사라진다.
This commit is contained in:
parent
85be000704
commit
ed1f335a89
9 changed files with 57 additions and 8 deletions
|
|
@ -13,7 +13,7 @@ const { c } = Astro.props;
|
|||
<div class="full log">
|
||||
{
|
||||
c.items.map((i, idx) => (
|
||||
<article class="entry glass reveal" style={`--reveal-delay:${idx * 60}ms`}>
|
||||
<article class="entry glass lift reveal" style={`--reveal-delay:${idx * 60}ms`}>
|
||||
<p class="caught">
|
||||
<span class="tick" aria-hidden="true" />
|
||||
{i.caught}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue