3D Card Interaction
#Carft, #Interaction #Prototype · 2024. 02
3D Card Interaction
#Carft, #Interaction #Prototype · 2024. 02
약간의 코드와 Framer 기본 Transform 기능을 활용해서 3D 인터렉션을 작업했습니다.
아쉽지만, PC Web 환경에서 확인해주세요.
3D Hover Interaction
3D Hover Interaction
가장 기본 3D 인터렉션 예제입니다. 인터렉션 요소에 커서를 호버하면 커서의 위치에 따라서 3D Rotation과 Flare Effect가 동작하게 됩니다. 공간감 효과를 위해서 미세한 Transition을 추가했습니다.
직접 마우스를 올려서 작동시켜 보세요!
PC Web 환경에서 확인해주세요.
다양한 Transition 적용을 위해서 이미지 레이어를 분리해서 작업했습니다. 각 레이어는 Interaction 따라서 개별적으로 동작하고, 커서의 위치를 추적하도록 되어있습니다.
background-image-layer
particle-layer
shape-layer
cursor-light-layer
background-image-layer
particle-layer
shape-layer
cursor-light-layer
직접 마우스를 올려서 작동시켜 보세요!
3D Transform
커서를 호버할 경우 3D Transform된 형태를 유지하면서 인터렉션되는 예제입니다.
Glass Effect
Gradient Effect - 01
Liquid Effect - 01
Bubbles Effect
Liquid Effect - 02
Gradient Effect - 02
Glass Effect
Liquid Effect - 02
Gradient Effect - 02
직접 마우스를 올려서 작동시켜 보세요!
Hover Me?
Hover Me?
직접 마우스를 올려서 작동시켜 보세요!