CAFE24 리뉴얼

최인영·2022년 12월 24일
portfolio
0
post-thumbnail

CAFE24 인터렉티브 사이트 리뉴얼

사이트명: 카페24
제작기간: 5일
사용언어: HTML, CSS, Jquery, Gsap, JS
분류: 반응형, 인터렉티브

✔️ Main Point

인터랙티브를 중점으로 한 카페24 사이트 리뉴얼 작업.

  • GSAP 가로스크롤 동작들
  • GSAP 화면 가득채우기
  • GSAP 스크롤 텍스트 동작
  • 무한 슬라이드
  • GSAP 평행이동
  • 마우스 감지 따라가는 링
  • 마우스 감지 움직이는 텍스트
  • 조각 애니메이션 효과
  • 무한 라이트 애니메이션 효과
  • GSAP 미디어쿼리








✏️ Project Review

~ 2022년도 프로젝트 작업 시 문제점

  • GSAP 사용

보완사항

  • GSAP 사용



메인 버튼

❗️ 젤리처럼 동작하는 버튼을 구현하고 싶어 학습 후 작업.

.sc-visual .link-book { 
  text-align: center; 
  transform-origin: center; 
}

.link-book .frame { 
  position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0; 
  overflow: hidden; 
  background: #146af0; 
  border-radius: 70px; 
  z-index: -1; 
  transition: 0.2s cubic-bezier(0.36, -0.09, 0.5, 1.23); 
} 

.link-book:hover .frame { transform: scale(1.1, 0.9); } 

.link-book .link-circle { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  transform: scaleX(0); transform-origin: right; /*기준점을 오른쪽에! 오른쪽을 향하여 움직이는 것 처럼*/
  border-radius: 80px; 
} 

.link-book .circle1 { z-index: 3; background: #3F83F0; transition: transform 0.3s; } 
.link-book .circle2 { z-index: 2; background: #4C8CEF; transition: transform 0.3s 0.1s; } 
.link-book .circle3 { z-index: 1; background: #6DA8EE; transition: transform 0.3s 0.2s; } 
.link-book:hover .link-circle { transform: scaleX(1); /*호버 시 가로 스케일 1로 전체가 되게*/
 transform-origin: left; /*호버 시 기준점 왼쪽/ 왼쪽에서 -> 마우스떼면 오른쪽으로 향하게*/ } 
.link-book:hover .circle1 { z-index: 1; } 
.link-book:hover .circle2 { z-index: 2; } 
.link-book:hover .circle3 { z-index: 3; }



GSAP 스크롤 시 화면 가득 채워지는 도형

❗️ 비디오 뒤에 가려진 도형이 화면 가득 커지며 배경 색상을 대체한다.

/**
* sc-visual
* - circle
*/
circle = gsap.timeline({ //circle 타임라인을 지정해둔다
  scrollTrigger: {
  trigger: ".sc-visual .video-area", //비디오를 트리거로 잡아두고.
  start: "top 70%",
  end: "bottom 0%",
  scrub: 1,
  markers: false,
    },
})

circle /*지정된 타임라인*/
.addLabel('a')
.to('.sc-visual .video-area .circle', { scale: 6.7 }, 'a') //스케일이 6이 되고
.to('.group-bmm', 0, { background: '#6FAAF0', }, 'a') //동시에 색상이 바뀌고



GSAP 가로스크롤 작업

❗️ 더현대서울, DFY, Awwward 사이트 등 수많은 사이트에서
구현되어진 세로 -> 가로로 넘어가는 스크롤 동작이 궁금했었고,
학습 후 작업. 

let sections = gsap.utils.toArray(".group-bmm strong");

let scrollTween = gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none", // <-- IMPORTANT!
  scrollTrigger: {
    trigger: ".sc-hori-bmm",
    pin: true,
    scrub: 0.1,
    end: "+=3000"
  }
});


/*투명해지는 텍스트 효과*/
$('.sc-hori-bmm strong').each(function (i, hs) {
  gsap.to(hs, {
    opacity: 0.6,  
    duration: 2,
    ease: "elastic",
    scrollTrigger: {
      trigger: hs,
      containerAnimation: scrollTween, // <-- 가로스크롤 시 markers 관련 필수사항
      start: "center center",
      scrub: 1
    }
  });
})



마우스 따라다니는 원 도형

❗️ 비디오 뒤에 가려진 도형이 화면 가득 커지며 배경 색상을 대체한다.

 .cursor { poㅊsition: fixed; top: 0; left: 0; width: 30px; height: 30px; background: #146af0; z-index: 10; pointer-events: none; border-radius: 50%; opacity: 0.9; } 
/**
* sc-visual
* - circle
*/
circle = gsap.timeline({ //circle 타임라인을 지정해둔다
  scrollTrigger: {
  trigger: ".sc-visual .video-area", //비디오를 트리거로 잡아두고.
  start: "top 70%",
  end: "bottom 0%",
  scrub: 1,
  markers: false,
    },
})

circle /*지정된 타임라인*/
.addLabel('a')
.to('.sc-visual .video-area .circle', { scale: 6.7 }, 'a') //스케일이 6이 되고
.to('.group-bmm', 0, { background: '#6FAAF0', }, 'a') //동시에 색상이 바뀌고



스크롤 시 마우스 감지하며 따라다니는 링 도형

❗️ 마우스 감지하며 따라다니는 링 도형을 학습 후 작업 

document.querySelector('.img-area').addEventListener('mousemove', eyeball);
function eyeball() {
  const ring = document.querySelectorAll('.ring');
  ring.forEach(function (ring) {
    let x = (ring.getBoundingClientRect().left) + (ring.clientWidth / 2);
    let y = (ring.getBoundingClientRect().top) + (ring.clientHeight / 2);

    let radian = Math.atan2(event.clientX - x, event.clientY - y);
    let rotation = (radian * (180 / Math.PI) * -1) + 270;
    ring.style.transform = "rotate(" + rotation + "deg)"
  });
}



마우스 감지하며 좌우로 움직이는 텍스트

❗️ 마우스 감지하며 좌우로 움직이는 텍스트를 학습 후 작업 

$(window).on("mousemove", mouseMove);

function mouseMove(e) {
  let positionSlow = (e.pageX - ($(window).width() / 2)) * 0.1;
  let positionFast = (e.pageX - ($(window).width() / 2)) * 0.2;

  gsap.to(".span-slow", {
    duration: .4,
    x: positionSlow
  })
  gsap.to(".span-fast", {
    duration: .4,
    x: -positionFast
  })
}



다채로운 삼각형 재생버튼이 움직이는 효과

❗️ 다채로운 삼각형 재생버튼이 움직이는 효과를 학습 후 작업 

<div class="effect03-wrap">
  <div class="youtube-play"></div>
  <div class="youtube-play"></div>
  <div class="youtube-play"></div>
  <div class="youtube-play"></div>
  <div class="youtube-play"></div>
                  .
                  .
                  .
</div>
.youtube-play { position: absolute; width: 0; height: 0; }


@keyframes youtube-play-animation-1 { //갯 수 만큼 중복 작업
	100% 
    { 
    	transform: translate3d(1vw, 30vh, 152px); 
    } 
}

.youtube-play:nth-child(1) { //갯 수 만큼 중복 작업
  animation: youtube-play-animation-1 60s infinite; 
  animation-delay: -0.2s; 
  opacity: 1; 
  border-left: 10px solid transparent; 
  border-right: 10px solid transparent; 
  border-bottom: 20px solid #f6e58d; 
  transform: translate3d(27vw, 23vh, 48px) rotate(360deg); 
 }



색상이 바뀌는 다채로운 패턴 배경 작업

❗️ 색상이 바뀌는 다채로운 패턴 배경 작업 

<div class="effect04-wrap">
  <i style="--i:1;"></i>
  <i style="--i:12;"></i>
  <i style="--i:8;"></i>
  <i style="--i:6;"></i>
  <i style="--i:4;"></i>
  <i style="--i:18;"></i>
              .
              .
              .
</div>
.effect04-wrap { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap:10px; 
  flex-wrap: wrap; 
  position: absolute; 
} /*도형 나열*/

.effect04-wrap i { 
  position: relative; 
  width: 60px; 
  height: 60px; 
  background: #222; 
  animation:animate 5s linear infinite, 
  animateBg 5s linear infinite; 
} 
 
.effect04-wrap i:nth-child(5n+1) { 
   animation:animate 2s linear infinite, animateBg 5s linear infinite; 
   animation-delay : calc(-1s * var(--i)); 
                  .
                  .
                  .
 } 

 @keyframes animate { 
   0%, 20%
   { 
   background: #222; 
   } 
   60% { 
   background: #0f0; 
   } 
   80% { 
   background: #222; 
   } 
   } 
  @keyframes animateBg
   { 
   0% { 
   filter:hue-rotate(0deg); 
    //hue(색조, 색상)을 변경 함
    //angle(각도)를 지정할 수 있으며, 0 인 경우 변화 없음
    //360deg, 720deg 도 마찬가지로 변화가 없음
   } 
   100% { 
   filter:hue-rotate(360deg); 
   } 
 }



left right 이용 반응형 크기조절

❗️ width값 height값을 항상 지정해두었는데 left값 right값을 이용하면 유연하게 조절이 가능하였다. 

.sc-comm .comm-item .img-area { background: #6FAAF0; height: 925px; border-radius: 50px; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } 
.sc-comm .comm-item .img-wrap { position: absolute; left: 7%; right:7%; }  /*plus요소*/ 
.sc-comm .comm-item .img-wrap img { object-fit: cover;; } 
.sc-comm .comm-item .video-box { position: absolute; top: 21%; left: 32%; right: 14%; bottom: 27%; } /*plus요소*/



profile
최인영
부감하는 공간.
이전 포스트

[#TIL] GSAP

다음 포스트

SSG MOBILE

0개의 댓글