UI 메뉴판호버로 사진 확대“마우스 올리면 사진만 커지는 거”
메뉴판 › UI 메뉴판 › 마우스 반응 › 호버로 떠오르기
실물 새 창으로 열기ui-menu · fx-hover-lift
코드 보기
불러오는 중…
폰에서는
이 영상에 나왔어요폰에는 호버가 없다. 누르는 순간(:active) 살짝 눌리는 모양으로 대신하고, 떠오른 채로 멈춰 있지 않게 @media (hover: hover) 안에만 둔다.
웹사이트 연출 24 · 마우스를 올리거나 누를 때 영상 1번째 칸
같이 나온 7개 보기같은 묶음 · 마우스 반응
UI 메뉴판 · 마우스 반응
UI 메뉴판커서 따라오기“커서를 동그라미가 졸졸 따라오는 거”
커서 따라오기 Cursor Follower
“커서를 동그라미가 졸졸 따라오는 거”UI 메뉴판자석 버튼“커서 가까이 가면 버튼이 끌려오는 거”
자석 버튼 Magnetic Button
“커서 가까이 가면 버튼이 끌려오는 거”UI 메뉴판물결(리플)“누른 자리에서 동그랗게 퍼지는 거”
물결(리플) Ripple Effect
“누른 자리에서 동그랗게 퍼지는 거”UI 메뉴판밑줄 늘어나기“메뉴에 올리면 밑줄이 쭉 그어지는 거”
밑줄 늘어나기 Underline Animation
“메뉴에 올리면 밑줄이 쭉 그어지는 거”UI 메뉴판전후 비교 슬라이더“가운데 선을 끌어서 전후를 비교하는 거”
전후 비교 슬라이더 Before/After Slider
“가운데 선을 끌어서 전후를 비교하는 거”UI 메뉴판떠날 때 팝업“나가려고 할 때 뜨는 창”