웹플로우 무한 루프 로고 슬라이드 만들기

안녕하세요 테크라소스입니다.

이런 있어 보이는 로고 띠 가끔 보이죠?

웹플로우에서 코딩 없이 만드는 법 알려드릴게 천천히 따라오슈

웹플로우 로고 무한루프

1.Div 블록 추가 → 셀렉터 이름 Loop Container로 지정

2. Loop Container 내부에 Div Block을 추가 → 셀렉터 이름 Logo Container로 지정

*헷갈리실까봐 Loop Container빨간색, Logo Container파란색으로 표기하였습니다.

3. Logo Container 위, 아래 패딩 30px 설정 → 배경색 검은색으로 설정

4. Logo Container 안에 image 요소를 추가 → 셀렉터 이름 Logo 지정 → 추가한 image요소 Height를 50px 설정

5. 다섯 개까지 복제 후 → 이미지 삽입

*로고는 원하는 만큼 많이 넣어주세요.

6. Logo Container를 Flex 지정 → Justify를 가장 Space Between으로 지정

이제 화면 오른쪽에 두 번째 로고 컨테이너를 추가할게요.

7. Logo Container 복제 (Ctrl + D)

8. 나란히 배치하기 위해 Loop Container를 Flex로 지정(Horizontal)

9. Logo Container의 최소 너비(Min w)를 100%로 설정해주세요.

여기까지 오셨다면 현재 구조는 이렇게 되어 있는 겁니다. 두 번째 로고 박스는 화면 밖으로 나가있습니다.

10. Loop Container의 Overflow를 Hidden으로 설정

*화면 밖으로 나간 두 번째 Logo Container를 보이지 숨기기 위함입니다.

11. 인터랙션과 애니메이션 만들 차례입니다. 다른 방식도 가능하나 이번엔 Page load로 설정하겠습니다.

Loop Container 선택 → Interactions 탭 → Page trigger → Page load 클릭

12. Action에서 Start an animation 선택 → Time Animations 옆에 + 버튼 클릭

13. 이름 지정(ex: 무한루프) → Logo Container 선택 → Actions 탭에 있는 Move 선택

14. 화면 탭 하단에 Affect를 Class로 지정 → Move를 -100%로 지정

여기까지 설정 시 화면에 보이는 Logo Container는 두 번째 컨테이너입니다. 두 컨테이너 모두 왼쪽으로 100% 이동했기 때문에 두 번째 컨테이너가 보이는 것입니다.

15. 거의 다 왔습니다. Duration을 10초로 지정합니다. Duration을 높게 설정할 수록 로고가 천천히 이동합니다.

웹플로우에서 Duration을 10초로 설정

여기까지 설정했다면 테스트 한 번 해보세요.

무한 루프 로고 슬라이드가 잘 작동하는 모습

아주 잘 작동합니다. 하지만 아직 한 싸이클 돌고 정지합니다. 이제 무한으로 돌려봅시다.

16. 아까 설정한 Move 애니메이션을 복제합니다.

기존 애니메이션을 복제

17. 액션이 두 개가 됐을텐데, 그 중 첫 번째 액션의 Duration과 X값을 0으로 설정합니다.

18. 애니메이션을 Save하고 나와서 우측에 루프를 걸면 완성!

Loop 체크

아주 잘 작동됩니다.

Loop Container의 속성을 변경하면 이렇게 꾸밀 수도 있습니다.

Max width: 1200px
Border Radious: 100px
좌우 Margin: Auto

모바일에서는 Logo Container의 가로 길이를 300%, 이미지의 height를 30px로 바꿔주면 보기 좋습니다.

이상입니다

도움되셨길 바랍니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다