[플러그인] Perfect Flip 플러그인 소개

Perfect Flip: 3D 플립 카드 효과 플러그인

안녕하세요! if dev 개발자 남민우 입니다.

 

오늘은 현재 준비 중인 웹사이트에서 필요했던 기능인 Flip 효과를 구현하면서,

 

이런 기능이 웹사이트를 더욱 풍성하게 만들어줄 수 있겠다는 생각을 하게 되었습니다.

 

그래서 Flip 효과를 간단히 구현할 수 있는 플러그인을 개발하게 되었습니다

 

오늘은 그 플러그인을 소개하려고 합니다!

💡 Perfect Flip 플러그인 소개

Perfect Flip은 간단한 3D 플립 카드 효과 플러그인입니다.

 

사용자가 ID 값만 입력하면, 카드의 앞면과 뒷면을 부드럽게 회전시킬 수 있는 기능을 제공합니다.

📌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 값 을 입력하여 플러그인을 설정합니다.

 

💡 모든 ID 값은 카드 요소에 맞춰 설정해야 합니다. 💡

Group에 ID 를 부여하는것을 잊지마세요!

 

설정이 완료되었다면 다음과 같이 마우스를 Hover 했을 때 이미지 혹은 Group 요소가 Flip 되는것을 확인할 수 있습니다!

✔추가

ID는 한 개의 요소에만 적용되기 때문에, 가끔씩은 제대로 동작하지만

여러 요소에 적용해야 할 경우 문제가 생길 수 있습니다.

이를 해결하려면 Class를 부여해서 여러 요소에 같은 스타일을 적용할 수 있습니다.

하지만 Repeating Group을 사용할 때는 current cell's index를 이용해

각각 유니크한 ID를 자동으로 부여하면, 각 셀마다 고유한 ID가 생성되어

Flip 효과가 Repeating Group 내에서도 제대로 동작합니다!

Dynamic Value를 이용한 플러그인 세팅

 

 

Dynamic Value를 이용한 ID부여

 

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 
카카오톡 문의: 톡으로 문의하기