2023 GDWEB Design Award 수상작을 보며

너무 많은 분야로 나눠 몇개씩 수상작을 뽑기 때문에 전부 살펴보진 못했지만,

현재 웹 동적 모션 트렌드는 확실히 알겠다.

 

1. 스크롤효과

2. 스크롤효과

3. 스크롤효과

 

기승전 스크롤 효과^^;

사용자의 흥미를 끌 수 있는, 지루하지 않은 홈페이지를 만들기 위해서 다양한 패럴렉스 효과가 적용되고 있다.

세로로 컨텐츠가 내려갔다가 가로로 움직였다가~ fadein이 되었다가 고정되었다가~

 

물론 시스템 홈페이지나 금융권이라던지, 포털이라던지 이런 쪽에는 현실적으로 적용하기가 어렵지만

브랜딩 홈페이지나 랜딩 페이지 비스무리한 사이트들은 전~~~부 들어가 있다고 해도 과언이 아닐정도.

 

자사 홈페이지 만들면서 약간 해보긴 했는데...

프로젝트가 대부분 SI다 보니 언제 또 사용하게 될진 모르겠다.

하지만 그 언젠가를 위해서 템플릿이라도 만들어봐야지.

 

아래는 수상작 몇개를 보며 사용된 js 조금 살펴본것.

 

----------------

 

1. 클리엔
https://clien.life/ 
- gsap.js
- ScrollTrigger.min.js


2. Cylndr
http://cylndr.co.kr/
- gsap.js
- ScrollTrigger.min.js
- CSSPlugin.js
- Observer.js
- SplitText.js
- ScrollSmoother.js


3. Better
https://better-context.lifeplatform.co.kr/index.php
- lottie.js : json기반 애니메이션 파일. 움직이는 이미지를 GIF나 비디오가 아닌 스크립트로 구현할 수 있다. 벡터 기반의 애니메이션을 JSON 파일로 변환. https://mizzu-log.vercel.app/lottie-araboja 참고
- detectmobilebrowser.js : 모바일 기기 감지 (jquery와 같이 사용)  https://hclee2575.tistory.com/419 참고
- lenis : 스크롤 관련. mit 라이센스.  https://github.com/studio-freight/lenis (데모 https://lenis.studiofreight.com/)
- moment.js : 날짜 관련 js
- common.js 보니까 스크롤 위치에 따른 애니메이션이....좀....노가다로 들어가있음. 근데 막 엄청 어려운건 또 아니어서 무료 라이센스로 할려면 이 방식이 더 나을수도...


4. 현대모토라스
http://motras.co.kr/
- gsap.js
- ScrollTrigger.min.js
- 스크롤트리거 스크립트 script.js 에 있음.  (.timeline 검색)  노가다 방식인건 사실 거의 비슷하다. 어떻게 쓰느냐의 차이일뿐.

 

 

이 외 여기도 스크롤 효과를 적극 활용.

https://www.crea-m.com/  : 대한민국 탑 웹 에이전시. 최신 트렌드의 집합체 👍

https://www.dot-mill.com/?p=2

https://www.hanwhaaerospace.co.kr/kor/index.do