[플러그인] Perfect Flip 플러그인 소개
Perfect Flip: 3D 플립 카드 효과 플러그인
안녕하세요! if dev 개발자 남민우 입니다.
💡 Perfect Flip 플러그인 소개
📌Perfect Flip 사용법
1.Bubble의 플러그인 탭에서 Perfect Flip을 검색하고 설치합니다.
2.컨테이너 세팅하기
Container: 가장 바깥쪽에 위치한 그룹 | 회전할 그룹을 담고있는 컨테이너
- Layout: Aligned to parent
- 사이즈: 버블 세팅에서 조정
Inner: 회전하는 그룹 | Front 와 Back을 담고있으며 직접 회전을 하는 그룹
- Layout: Aligned to parent
- 사이즈: Container 보다 크지않도록 (같거나 작게)
Front&Back: 보여질 요소
- 사이즈: 100% (inner그룹에 가득 차도록)
- Front: 처음 보여질 요소
- Back: 뒤집었을 때 보여질 요소
- Inner 안에 겹쳐서 세팅해두어야 함
3.ID 값 입력하기
플러그인 설정에서 4개의 ID 값을 입력하세요:
- container_id: 카드의 외부 컨테이너 요소
- inner_id: 회전할 내부 그룹
- front_id: 카드 앞면
- back_id: 카드 뒷면
💡 모든 ID 값은 카드 요소에 맞춰 설정해야 합니다. 💡
설정이 완료되었다면 다음과 같이 마우스를 Hover 했을 때 이미지 혹은 Group 요소가 Flip 되는것을 확인할 수 있습니다!
✔추가
ID는 한 개의 요소에만 적용되기 때문에, 가끔씩은 제대로 동작하지만
여러 요소에 적용해야 할 경우 문제가 생길 수 있습니다.
이를 해결하려면 Class를 부여해서 여러 요소에 같은 스타일을 적용할 수 있습니다.
하지만 Repeating Group을 사용할 때는 current cell's index를 이용해
각각 유니크한 ID를 자동으로 부여하면, 각 셀마다 고유한 ID가 생성되어
Flip 효과가 Repeating Group 내에서도 제대로 동작합니다!
여기서 실제 데모 예시를 통해 확인하실 수 있으니, 아래 데모 에디터에서 직접 확인 해 보세요!
🛠️데모 에디터🛠️
https://bubble.io/page?id=if-devsplugin-66983&tab=Design&name=%F0%9F%93%81+plugin-Perfect+Flip&type=custom
🌐플러그인 페이지🌐
https://if-devsplugin-66983.bubbleapps.io/version-test/plug-ins/1738556573193x835112757315240000
이피니티 - if to infinite
프로젝트의 시작부터 유지, 확장까지 함께하는 외주 개발 파트너
노코드 Bubble.io 전문 에이전시
📱 앱 · 🌐 웹 · 🛠️ 소프트웨어 · 🔌 플러그인 개발
편하게 문의 주세요!
이메일 문의: support@if-inity.io
사이트: if-inity.io
카카오톡 문의: 톡으로 문의하기