안녕하세요 테크라소스입니다.
이런 있어 보이는 로고 띠 가끔 보이죠?
웹플로우에서 코딩 없이 만드는 법 알려드릴게 천천히 따라오슈
웹플로우 로고 무한루프
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을 높게 설정할 수록 로고가 천천히 이동합니다.
여기까지 설정했다면 테스트 한 번 해보세요.
아주 잘 작동합니다. 하지만 아직 한 싸이클 돌고 정지합니다. 이제 무한으로 돌려봅시다.
16. 아까 설정한 Move 애니메이션을 복제합니다.
17. 액션이 두 개가 됐을텐데, 그 중 첫 번째 액션의 Duration과 X값을 0으로 설정합니다.
18. 애니메이션을 Save하고 나와서 우측에 루프를 걸면 완성!
아주 잘 작동됩니다.
Loop Container의 속성을 변경하면 이렇게 꾸밀 수도 있습니다.
Max width: 1200px
Border Radious: 100px
좌우 Margin: Auto
모바일에서는 Logo Container의 가로 길이를 300%, 이미지의 height를 30px로 바꿔주면 보기 좋습니다.
이상입니다
도움되셨길 바랍니다.