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

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

글을 쓰고 있습니다.

1. 웹플로우(webflow)로 인터렉티브 웹사이트 만들기

• 토스랜딩페이지 클론하기(현재 포스팅)

• 웹디자인 awwwards 수상작 클론하기

1. 웹플로우(webflow)와 노코드 툴을 활용하여 웹서비스 만들기

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

이번 포스팅에서는 스크롤 애니메이션을 다뤄보겠습니다.

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

기본 세팅

위와 같이 박스 요소들을 잡았고, 모든 요소들을 레이아웃을 신경쓰지 않고 웹플로우(Webflow)에 입력해주겠습니다.

(css 속성과 레이아웃을 잡는 방법은 아래의 글에서 다뤘기 때문에 빠르게 넘어가겠습니다.)

여기서 레이아웃까지 잡으면 이렇게 변합니다.

스크롤 애니메이션 원리 이해하기

스크롤 애니메이션을 실습하기 전에 스크롤 애니메이션의 원리를 간단하게 살펴봅시다.

웹 브라우저로 현재 확인하고 있는 화면 영역(viewport)은 전체 페이지의 일부입니다.

스크롤을 내릴 때마다 화면 영역(viewport)이 달라지게 되고,

스크롤에 해당하는 화면 영역을 웹 브라우저에서 볼 수 있게 됩니다.

스크롤 애니메이션은 요소들이 화면 영역 안에 들어온 순간을 감지해서 요소들의 스타일 속성을 바꿔줍니다.

위의 애니메이션을 자세히 살펴보면,

스크롤을 감지해서 특정 화면 영역이 보이는 순간 각 요소들의 투명도(Opacity)가 진해지고(0 -> 1),

하단에서 상단(transform)으로 요소들이 움직이면서 올라오는 듯한 느낌이 듭니다.

투명도(opacity)는 css 속성으로 값이 0일 때, 보이지 않았다가 1에 가까워질수록 원래의 값을 가지는 속성입니다.

transform은 요소의 위치를 바꿀 수 있는 css 속성입니다. 값이 0이라면, 기본적인 위치에 고정됩니다. 값이 커질수록 원래의 위치에서 아래로 이동하게 됩니다. 50px에서 0px로 이동하게 된다면, 요소가 상승하는 것처럼 보입니다.

스크롤을 감지하여 요소가 화면 영역에 나타나는 순간 위와 같은 2가지 css의 속성을 바꿔주면

우리가 원하는 스크롤 애니메이션을 구현할 수 있습니다.

javascript로 구현한다면, 스크롤의 값과 요소의 위치값을 비교해줘야 합니다.

웹플로우(Webflow)에서는 코딩없이 설정을 지정해주어 위와 같은 효과를 만들어낼 수 있습니다.

스크롤 애니메이션 실습하기

기본적인 스크롤 애니메이션에 대해서는 이전 포스팅에서 다뤘는데요.

설정을 다시한번 살펴봅시다.

1. 스크롤 이벤트를 설정하고 싶은 요소를 클릭합니다. 우측 보조바에 interactions 탭으로 넘어와서 + 버튼을 눌러줍니다.

2. Element trigger에서 Scroll into view를 선택해줍니다. Scroll into view가 스크롤을 감지해서 요소가 화면 영역 안에 들어오는 것을 감지해줍니다.

3. 화면 영역에 요소가 나타날 때, 이벤트를 발생시킬 것이기 때문에 When scrolled into view에서 action을 선택해줍니다. When scrolled out of view를 선택하게 되면, 요소가 화면 밖으로 나올 때 애니메이션을 실행하게 됩니다.

1. Action 중에서 "Slide"를 선택합니다. "Slide"는 기본적으로 투명도(opacity)와 위치이동(transform)을 변경해줍니다.

2. Direction(방향)을 From Bottom으로 설정합니다.

3. Delay를 500ms로 설정합니다.

이렇게 원하는 요소에 slide action을 원하는 Delay만큼 설정하기만 한다면,

스크롤 요소에 따른 투명도와 위치를 변경하도록 하는 애니메이션을 구현할 수 있습니다.

(각 요소마다 Slide 액션을 넣어서 만든 결과입니다)

정리하기

이번 포스팅에서는

1. 스크롤 애니메이션 원리

2. 스크롤 애니메이션을 웹플로우(Webflow)로 실습하는 방법

에 대해서 알아봤습니다.

실제 개발로 구현한다면 다소 손이 많이 들어가는 스크롤 애니메이션을

웹플로우(webflow)로 손쉽게 구현해보았습니다.

다음 포스팅에서는 아래의 gif처럼 스크롤 할수록 이미지 영역이 화면을 채우는 인터렉션에 대해서 알아보겠습니다.

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

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

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

무조건 자신의 아이디어를 실제 웹사이트로 제작하는 것을 목표로 하는 유/무료의 프로그램입니다.

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

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