# cssのみで出来るエフェクト
## パラパラ
### 同じものを元の位置から少しずらしてちかちか
https://tympanus.net/Development/MenuThumbStackAnimation/
コード
https://github.dev/codrops/MenuThumbStackAnimation

https://tympanus.net/Tutorials/CrosshairDistortion/
### パラパラ出す
https://tympanus.net/Development/InlineToMenuLink/

## マスク(実装済み)
### デフォルト
clip-pathを使ってない！
親と子が逆方向に移動することでマスクして切り替わってるように見える
#### 横
https://tympanus.net/Development/ParanoiaSlideshow/
#### 縦
https://tympanus.net/Tutorials/MarqueeMenu/
### 縮小
実装済み
scaleでマスクを縮小してるように見せてる
https://tympanus.net/Development/GridZoom/
画像をscaleで不均一に伸ばす。
https://tympanus.net/Development/ColumnScroll/

## いっぱい重ねる系
### 上に載せた要素は変形で見えなくする
https://tympanus.net/Development/RepetitionHoverEffect/
### 縦に少しずつずらす
https://tympanus.net/Development/TextRepetitionEffect/

## 無限ループ
### 斜め
https://tympanus.net/Development/Theodore/

## perspective(3d)
### 奥に置いて、rotateXとZでずらす
https://tympanus.net/Development/GlitchPerspective/
### rotateXでマイナスの値を入れて前方に傾いているように見せる
ぬっと出てくるような感じ。それにマスクを足してる
https://tympanus.net/Development/3DGridContentPreview/
### rotateXで潰して戻す
https://tympanus.net/Development/3DLettersMenuHover/

## テキスト
### 文字を上下に動かして消す
https://tympanus.net/Development/RepetitiveTypography/

### 文字色のマスク
https://css-tricks.com/css-hover-effects-background-masks-3d/
#### 左から右へ
https://css-tricks.com/adam-argyles-sick-mouse-out-css-hover-effect/

## 複数要素
### 画像が出た後メニューが出る。ちょっとずらす
画像はちょっと拡大したものをもとに戻す
メニュー以外の要素は上下に適当に動かしてズレてる感じを出してる
https://tympanus.net/Development/ExpandingRoundedMenu/

### 縦に組んだものを横一列に
クリック後
https://tympanus.net/Development/MenuThumbStackAnimation/

### 一つにフォーカスしたあと、その他の要素が集まる
https://tympanus.net/Development/ImageToGridTransition/
https://tympanus.net/Development/IntroTrailEffect/

### 複数要素から一つの要素にフォーカス
https://tympanus.net/Development/LinesToLayout/

# css + svg
## 要素の縁が変形してるように見える
https://tympanus.net/Tutorials/OnScrollPathAnimations/
## 画面切り替え
https://tympanus.net/Development/Theodore/
## 線が震える
https://tympanus.net/Tutorials/CrosshairDistortion/
## filter
### 別画像に切替
https://tympanus.net/Tutorials/Mystique/
### ぐにゃっとする
https://tympanus.net/Development/ThumbHoverSVGFilter/

# css + 横スクロール
## kv部分が出てくる
https://tympanus.net/Development/HoverPreviewMiniMap/

ここから！2022/09/26
https://tympanus.net/Development/PreviewContentTransition/