랜딩페이지 해킹2편: 세상의 모든 렌딩페이지 인터렉션을 노코드로 구현한다.

오늘은 typed 랜딩페이지의 인터렉션을 노코드로 구현해보겠습니다.

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

글을 쓰고 있습니다.

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

• 토스랜딩페이지 클론하기

• 다른 기업 랜딩페이지들 클론하기

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

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

토스랜딩페이지, flex 랜딩페이지를 지난 게시글에서 다뤄봤는데요.

오늘은 typed 랜딩페이지에서 멋있는 인터렉션에 대해서 다뤄보겠습니다.

Typed 랜딩페이지 인터렉션 분석

구성 톺아보기

주된 인터렉션은 스크롤에 따라서 Before Typed의 이미지를 After Typed의 이미지가 왼쪽에서 오른쪽으로 겹쳐서 대체되는 것처럼 보이는 것 입니다.

실제로 코드를 보면, Before Typed 이미지의 width는 스크롤에 따라서 점점 줄어들고, 이미 뒷 배경에 준비되어있던 After Typed 이미지가 드러나는 것을 확인할 수 있습니다.

가운데 있는 보라색 바도, Before Typed 이미지의 width(가로 넓이)가 줄어들수록 오른쪽에서 왼쪽으로 이동한다는 것을 알 수 있습니다.

Before Typed, After Typed의 텍스트의 색상도 Before Typed의 width에 따라서 색상이 바뀌는 것도 확인할 수 있었습니다.

그럼 차례대로 만들어보겠습니다.

HTML, CSS + 레이아웃 넣기

HTML, CSS를 속성을 넣어주었습니다.

레이아웃을 잡아주겠습니다.

포지션 absolute를 사용하여서 두 이미지를 겹쳐주고, 바도 오른쪽으로 정렬해주었습니다.

애니메이션 넣기

position:sticky로 위치 고정하기

position:sticky로 위치를 고정했을 때,

스크롤 영역만큼 저 영역이 화면에 고정되어있는 것을 알 수 있습니다.

스크롤에 따라 변하는 애니메이션

이 인터렉션에서 애니메이션은 크게 3가지가 있습니다.

우선 Before typed에서 After typed로 이미지가 바뀌어야 합니다.

다음으로는 보라색바도, 이 Before 이미지의 넓이가 100%에서 0이 되는 순간을 따라올 수 있도록 만들어보겠습니다.

보라색 바의 위치를 transform X 속성을 통해서 바꿔줬습니다.

다음으로는 스크롤 영역에 따라서 폰트 색상을 바꿔보겠습니다.

폰트 색상이 바뀔 시점을 지정해주고, 그 시점에 색상 속성을 바꿔주었습니다.

결과보기

아래는 실제 웹사이트입니다.

정리하기

typed의 랜딩페이지를 직접 구현해봤습니다.

position: sticky 속성을 이용해서 요소를 부모 요소의 스크롤 영역 동안, 화면 영역(viewport)의 특정 부분에 고정시켰습니다.

시점에 맞는 스크롤 애니메이션을 적용해보았습니다.

다음번에는 awward 수상작과 같은 더 복잡한 인터렉션을 구현해보겠습니다!

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

노코드툴을 활용하여 인터렉티브 웹사이트 또는 백앤드 로직이 담긴 웹서비스를 제작하는 것에 관심이 있으신가요? 함께 만들어보면 좋을 거 같습니다!

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

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

어떤 내용에 관심이 있는지를 묻는 사전 수요조사입니다. 가볍게 참여해주세요!