LUSH 브랜드 소개 사이트 작업일지 (240105~2401)

https://sol227.github.io/lush/

---

240116

• js - 브랜드 페이지에서 특정 구간을 지날 때 가로 스크롤이 반짝하고 생김
  -> scrollTrigger로 x축을 기준으로 오른쪽에 있는 텍스트가 바깥에서 안으로 들어오는 이벤트를 주었는데, js에서 x의 값을 많이 주어서 발생한 문제였음
  -> x: 100이었던 것을 x:70으로 수정

240115

• css - 스크롤바 커스텀 추가

240114

• css - 히스토리 페이지에 버블 애니메이션 추가
  -> 처음에는 버블이 x축 방향으로 이동하면서 순환되게 하고 싶었으나 @keyframes으로 순환되는 애니메이션 구현 실패(애니메이션이 끝나면 다시 처음으로 돌아가는 게 너무 잘 보임 그래서 부자연스러웠음) -> 대신 일정 구간을 좌우로 왔다갔다하게 하고, 각각의 버블에도 둥둥 떠다니는 듯한 움직움을 주어 애니메이션 완성
  -> 기존에 주려했던 모션보다 버블에 더 어울리는 것 같아 잘 된 것 같음
• html/css - 인트로, 엔딩 페이지에 gif 이미지 추가
• js - gsap로 스크롤에 따라 gif 이미지의 투명도 조절
  -> 처음 로딩이 됐을 때는 opacity 값 조절이 잘 되는데 스크롤을 한참 내렸다가 다시 올라가면 이미지의 투명도가 점점 연해지는 문제(아직 미해결)
• js - 캠페인 페이지에서 텍스트 부분에 gsap 스크롤 트리거 효과를 주었으나 안 먹는 문제 발생 (클래스명도 맞게 주었으나 안 됨)
  -> gsap scrollSmoother 아래에 작성해서 효과가 안 된 것
• js - gsap scrollTrigger를 활용해 브랜드 페이지에서 제품의 이미지가 스크롤을 내리면 탑이 쌓이고 다시 올리면 원래 상태로 돌아가도록 pin으로 고정하고 싶었으나 잘 되지않아, 자동으로 하나씩 나타나게 하는 것으로 대체
• js - 지난번에 실패했던 gsap scrollSmoother가 유료버전이어서 적용이 되지 않았던 것
  -> 그래서 gsap scrollTrigger와 호환이 잘 된다는 lenis 플러그인을 활용하여 부드러운 스크롤을 구현
• js - gsap scrollTo로 인트로 페이지 우측 하단에 위치한 태그로 감싸져있는 화살표에 다음
  으로 이동 추가

240113

• 프레스코/포토샵 - 인트로/엔딩/히스토리/기프트 페이지에서 사용될 일러스트 그림과 gif 작업 및 전체적인 분위기 통일을 위해 이미지 보정(노이즈 추가+색감보정)
• 피그마 - 텍스트 애니메이션에서 사용되는 svg와 러쉬픽 페이지 레이아웃 수정
• html - 이미지 업데이트

240112

• css - .footer에 z-index -9999를 주었더니 연결되어 있는 포트폴리오와 작업일지 링크가 눌리지 않음
  -> z-index를 0으로 수정하고 각각의
  (페이지)에 0보다 큰 z-index 값을 부여함
  -> .lush_pick, campaign, ending 페이지는 z-index가 안 먹는 문제 발생
  -> position 값을 주지 않아 기본 값인 static으로 자동 부여되어서 그랬던 것. relative로 값 지정하니 해결 됨
• js - .header 로고 svg를 배경색이 바뀌면 감지를 해서 색상이 변하도록 하려 했는나 잘 안돼서
  -> .header에 mix-bland-mode difference를 주어 대체
• js - 페이지 전체에 gsap scrollSmoother로 부드러운 스크롤을 주고 싶었으나 스무더 값을 주면 트리거에서 준 pin 고정이 되지않고 자동으로 동작하여 실패

240111

• .footer에 position sticky를 주니 위에 컨텐츠들에 배경색을 지정하지않아 .footer 컨텐츠가 겹쳐보이는 문제
  -> 각각의
  에 배경색 값 지정
  -> z-index로 밑으로 보냈던 .intro와 .ending에 텍스트 애니메이션이 안 보이는 문제 발생
  -> 애니메이션에 z-index를 빼고 위로 올라오는 이미지에 z-index를 줌(img와 ani를

  로 함께 감싸고 있던 html도 수정 -> ani_wrap을 바깥으로)

인트로

• 디자인 통일감 주기 위해 색상 변경(좀 더 손 봐야할 것 같음)
• 마우스 오버되는 이벤트 정리
• css - 텍스트 ani가 인트로 배경이미지 아래에 보여야 하는데 위에 올라와 보이는 문제로 z-index로 해결하려 했는데 실패
  ->
  자식요소에 position absolute를 주고 z-index 값 지정하니까 해결됨
• js - gsap scrolltrigger를 이용해 인트로에서 스크롤을 내리면 배경이미지가 축소되는 효과를 주려고 했는데 이미지가 스크롤을 넘어가는 문제와 가운데 정렬이 안됨
  -> 이미지를 감싸고 있던
  에 값을 주고 있어서 그랬음 트리거를 에 지정하니 스크롤을 넘어가는 것은 바로 해결
  -> 가운데 정렬은 를 감싸고 있던

  에 flex를 주어 정렬을 맞춤

기프트 페이지

• html / css - 텍스트가 곡선의 형태를 가지고 이미지를 따라가도록 스크롤 이벤트를 주기 위해 path(svg로 path를 그리는게 너무 어려우나 피그마를 활용해 그린 path 코드를 가져다가 사용)와 textpath를 이용

240110

• figma - 인트로 애니메이션에 들어갈 텍스트 svg를 수정 후 저장을 했는데, 몇글자가 보이지 않거나 아웃라인이 겹쳐져서 저장됨
  -> 텍스트 outline stroke로 선을 면으로 바꾸어 해결

240109

• css - 인트로 / 히스토리 / 프로덕트 / 기프트 / 캠페인 / 브랜드까지 기본적인 스타일 작업
• css - 인트로 배경을 백그라운드 이미지로 주고 거기에 position sticky를 주었는데, 이미지가 보이지 않는 문제 (앱솔루트를 주면 보임)
  -> 이미지의 높이값을 부여해서 해결
• 인트로 부분에 position sticky를 주어 배경이미지는 고정되어있고 컨텐츠만 스크롤 올라가게 해야되는데 잘 안됨.
  -> gsap scrollTrigger를 이용해서 시도해봐야겠음
• css - 프로덕트에서 러쉬 사이트 연결 태그네 마우스 이벤트를 주기 위해 가상선택자::after 사용하면서 가상요소 텍스트에 줄바꿈 하는 방법을 알게 됨 -> \A + white-space: pre;

240108

• 브랜드 이념 파트 프로토 타입, 디자인 시안 작업
• html 마크업 작업 완성
• 이미지 정리 및 이미지 소스 제작(gif)

240107

• 제품 / 기프트 / 캠페인 / 푸터 파트 프로토 타입, 디자인 시안 작업

240106

• 페이지에 들어갈 내용 정리 -> 브랜드 설명에 관련된 내용으로 정리
• 인트로 / 역사 파트 프로토 타입, 디자인 시안 작업

240105

• 레퍼런스 사이트와 브랜드 선정
• 러쉬 소개 페이지 구성 및 방향성 구상