웹플로우(Webflow)로 코드없이 어디까지 개발할 수 있을까?#3 - 스크롤 애니메이션2

노코드 서비스 웹플로우(webflow)를 활용하여 어디까지 개발이 가능한가?라는 주제로

글을 쓰고 있는데요.

연재 계획은 아래와 같습니다.

웹플로우(webflow)로 인터렉티브 웹사이트 만들기
- 토스랜딩페이지 클론하기(현재 포스팅)
- 웹디자인 awwwards 수상작 클론하기
웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

이번 포스팅은 웹플로우(webflow)를 활용한 인터렉티브 웹사이트 만들기 - 토스랜딩페이지 클론하기 스크롤 애니메이션 2입니다.

지난 글에서는 웹플로우(webflow)의 기본세팅과 Fade 애니메이션, 스크롤 애니메이션에 대해서 다뤄봤습니다.

처음부터 읽고 싶으시다면 지난 포스팅을 참조바랍니다.

웹플로우(Webflow)로 스크롤 애니메이션 구현하기

이번 포스팅에서 구현해볼 스크롤 애니메이션은 위와 같습니다 .

스크롤에 따라서 가로 영역이 확장되면서 화면을 모두 채우는 애니메이션입니다.

기본 세팅

위의 요소들을 구현하기 위해서 기본 세팅을 진행하겠습니다.

이렇게 박스 영역들을 지정해주었고, 이에 맞게 웹플로우에서 구현해보겠습니다.

원리 분석

애니메이션을 실제로 구현하기 전에 원리를 분석해보겠습니다.

이 애니메이션은 가운데 스크롤에 따라서 가운데 이미지의 가로 영역(width)가 점점 커지면서 화면 끝까지 차지하는 것처럼 보입니다.

하지만 여기에 눈 속임이 있습니다.

실제로는 양 옆에 흰색 배경 박스가 두 개가 존재합니다.

처음부터 해당 이미지는 가로 영역(width)을 채운 상태로 시작하고,

스크롤에 따라서 양옆의 흰색 배경을 가진 박스가 양옆으로 이동하면서 화면 밖으로 사라지게 됩니다.

이렇게 되면 양 옆의 흰색 배경 박스가 이동하면서 실제 이미지가 점점 커지는 것처럼 보이게 됩니다.

이번 스크롤 애니메이션은 지난번에 다뤘던 스크롤 애니메이션과 다른 점이 있습니다.

이전에 다뤘던 애니메이션은 Webflow의 scroll into view 애니매이션으로써 화면 영역의 끝단(스크롤 좌표값)과 HTML 요소가 만나는 시점에 효과를 줄 수 있습니다.

이번에 다룰 애니메이션은 Scroll의 특정 시점이 아니라, a에서 b로 이동하는 스크롤의 영역 중에 효과를 서서히 바꿀 수 있는 애니메이션입니다. 웹플로우(Webflow)에서는 이것을 While scrolling in view라고 부릅니다.

그렇다면 이제 스크롤 중에 변화하는 효과를 구현하는 실습을 진행해봅시다.

스크롤 애니메이션 구현하기

스크롤 이벤트를 설정하고 싶은 요소를 클릭합니다. 이번에는 양옆에 있는 흰색 박스들이 될 것 입니다. 우측 보조바에 interactions 탭으로 넘어와서 + 버튼을 눌러줍니다.
Element trigger에서 While scrolling into view를 선택해줍니다.
play scroll animation을 선택해줍니다.

+를 클릭하여 애니메이션을 추가해줍니다.
추가할 애니메이션의 이름을 설정해주고, scroll Actions을 선택해줍니다.
양 옆의 박스 요소가 화면밖으로 사라지는 애니메이션을 구현할 것이기 move를 애니메이션을 선택해줍니다.

시작할 때의 위치와 끝날 때의 위치를 지정해줍니다. 시작할 때의 위치는 현재 위치이기 때문에 0vw로 설정했고, 끝날 때의 위치는 왼쪽의 박스가 자신의 넓이만큼 왼쪽으로 나갈 것이기 때문에 -20vw로 설정해줍니다.
이렇게 설정이 되었다면 애니메이션 설정이 완료되었습니다. 우측 박스 영역은 우측으로 사라질 수 있도록 똑같이 적용해줍니다.

여기까지의 결과를 확인해보겠습니다.

계획했던 애니메이션이 구현된 것을 볼 수 있습니다.

웹플로우(Webflow)에서는 아래와 같은 과정을 거쳐서 배포할 수 있습니다.

준비해두신 도메인이 있다면, 연결시킬 수도 있습니다.

이렇게 배포된 홈페이지를 공유해드리겠습니다.

현재는 desktop 버전만 제작이 되었지만,

모바일이나, 테블릿도 각각의 viewport 크기에 맞게 제작하면

반응형으로도 제작이 가능합니다.

정리하기

이번 포스팅에서는

스크롤 영역 상에서 발생하는 애니메이션
스크롤 영역 상에서 발생하는 애니메이션을 웹플로우(Webflow)로 실습하는 방법

에 대해서 알아봤습니다.

이렇게 토스 랜딩페이지를 웹플로우(webflow)로 구현해보았는데요.

확실히 웹플로우(webflow)가 인터렉티브한 웹사이트를 노코드로 만드는데 있어서 장점이 있는 것 같습니다.

다음 포스팅에서는 다른 홈페이지의 복잡한 인터렉션을 클론해서보면서

더 다양한 인터렉티브 웹사이트를 제작해보겠습니다.

노코드로 웹디자인부터 웹서비스까지

위의 글이 도움이 되셨나요?

노코드툴을 활용하여 인터렉티브 웹사이트 또는 백앤드 로직이 담긴 웹서비스를 제작하는 것에 관심이 있으신가요?

연 초에 노코드로 웹디자인부터 웹서비스까지 진행하는 교육 프로그램을 내년 초에 계획하고 있습니다.

새해에는 아이디어로만 품었던 포트폴리오들을 실제 서비스로 만들어보시면 좋겠습니다.

무조건 자신의 아이디어를 실제 웹사이트로 제작하는 것을 목표로 합니다.

관심이 있으신 분은 아래의 구글폼에서 사전 신청해주세요.

사전 신청해주신 분들에 한하여, 특별한 혜택을 드리려고 합니다!