tim walker
RENEWAL DESIGN
다양한 세트와 소품, 개성 넘치는 모델을 통해 자신만의 독창적인 세계를 구현해내는 영국 패션사진가 팀 워커는 세계에서
가장 창의적인 사진가 중 한 명이다. 그를 사진작가로써 알리게 된 Vogue, AnOther, i-D, LOVE 등 패션잡지에서 영감을 얻어
패션잡지와 같은 레이아웃으로 동적 움직임을 담아 웹을 구현했습니다.
keyword
#fantasy#magazine#modern
TARGET
사진을 좋아하는 사람
feat. 팀워커 덕후
시각적 상상력을 자극하는 유명한 팀워커의
사진과 그의 전시, 화보집에 대한
정보를 얻고자 하는 사람
Design Concept
패션매거진
팀워커는 패션화보로 세계에 이름을 알렸기에 패션매거진은 팀워커를 직관적으로 인식할 수 있는 상징이라고 생각합니다. 이미지와 타이포를 강조한 디자인으로 웹을 매거진처럼 구성하여 그의 사진을 강조하고 그의 사진에서 느껴지는 느낌을 강렬하게 전달하고자 했습니다.
JavaScript
jQuery
CSS
잡지형식의 디자인을 최대한 살리기 위해 타이포와 사진으로 심플하게 구성하고 화려하고 환상적인 팀워커의 사진을 살리기위해 무채색 계열의 색상을 사용했습니다. 자바스크립트 구현 상황을 최소화하기위해 CSS로 할 수 있는 요소를 분석하여 우선작업을 진행했습니다.
01
글자 이벤트
jQuery
GSAP 웹 애니메이션
스크롤트리거를 사용하여 특정위치도달시
숨겨져 있던 글자가 올라오는 이벤트
글자가 많은 시안을 단조롭지 않도록
글자에 움직임을 적용
02
홈 메인배너
스크롤 이벤트
jQuery
스크롤할 때마다 실행되는 함수 작성
스크롤 down 영상확대 / up 영상 축소!
$(window).scroll(function () {
const scroll = $(window).scrollTop();
$("#mov01").css({
width: 100 + scroll / 12 + "%"});
});
스크롤 이벤트가 발생할 때마다 scroll 함수가 호출되며, scrollTop을 사용하여 현재 스크롤 위치를 계산하고 해당 위치에 따라 요소의 너비를 조정하는 함수를 작성하여 scroll 변수에 할당합니다.
영상 요소의 CSS 속성을 변경하기 위해 css() 메소드를 작성하여, width 속성을 조정하여 요소의 너비를 변경합니다. 너비는 100 + scroll / 12 + "%"로 설정되며, 스크롤 위치에 따라 동적으로 변경됩니다.
03
스크롤시
배경, 글자색상 변화
jQuery
스크롤하여 특정위치 도착시 실행
addClass, removeClass로 미리 설정해둔
active값을 실행하여 body영역의 색상변경
$(window).on('scroll', () => {
const slideBox = $('.m-banner').offset().top + 100;
if (scrollY > slideBox) {
$('body').addClass('active');
} else {
$('body').removeClass('active');
}
});
사용자의 스크롤 위치에 따라 body 요소에 클래스를 추가하거나 제거하는 코드입니다.
'm-banner' 클래스를 가진 요소의 문서 상단으로부터의 오프셋을 계산하고 100 픽셀을 더한 결과를 slideBox 변수에 저장한 함수를 사용하여, 스크롤 위치가 계산된 오프셋보다 크면 'active' 클래스를 추가하고, 작으면 'active' 클래스를 제거하여 웹페이지의 배경과 글자 색상을 변경합니다.
04
스크롤에 따라
슬라이더 높이 변화
JavaScript
ScrollTrigger 플러그인 사용
스크롤 위치에 따라 각각의 슬라이더들의 크기와
높이 조절하여 접혀져있다가 펴지는 효과 구현
05
마우스 커서 이벤트
JavaScript
특정 영역에 따라 마우스의 크기, 형태 변화되도록 설정
마우스 커서의 위치를 추적하고, 특정 이벤트에 따라
스타일이나 동작을 변경할 수 있도록 설정
Style Guide
Color Palette
팀워커의 환상적인 사진을 돋보일 수 있도록 무채색 계열로 작업을 진행했습니다.
Typography
Montserrat
Montserrat Italic
PUBLISHINGPROBLOEM & SOLUTION
Probloem
글자 이벤트를 위해 스크롤트리거 연결시 글자들의 레이아웃 깨짐
-
스크롤에 따른 슬라이더의 크기와 높이가 변경되는 과정에서 이미지가 흐려지는 해상도 문제 발생
-
슬라이더가 바뀔때 타이틀이 변경되도록 설정했으나 원하는 타이밍에 변경되지 않음
Solution
디자인적으로 강약을 주기위한 포인트라 글자의 크기와 정렬을 position으로 일일이 재정렬하여 문제 해결
-
이미지의 뒷면을 숨김으로써 흐림 효과를 제거
backface-visibility: hidden; -
글자변경 타이밍을 맞추기위해 슬라이더 영역을 확인하여 viewportTop과 화면의 높이값을 활용하여 화면끝을 지날때 글자가 변경되도록 했으나 타이밍 실패
WEB PUBLISHING
Tim Walker
패션포토그래퍼 팀워커의 독창적인 세계를 담은 웹사이트입니다. 환상적인 작품을 돋보이게 하기 위해 심플한 구성으로 디자인 시안을 잡고 스크롤시, 마우스 움직임시 이벤트를 넣어 심플한 구성에 재미를 더했습니다. 그의 작품을 잘 보여줄 수 있는 사이트를 구현하는 것을 목적으로 진행했습니다.
PROJECT개인 프로젝트 / JavaScript
작업일정2023.07.28 ~ 2023.08.02
KEYWORD#FANTASY #MAGAZINE #MODERN
- Skills
- HTML5 / CSS3 / JavaScript & jQuery /
- Git & Github / figma / gif
- Tools
-
