(project5) MEMO 홈페이지(반응형)

Memo - Learn languages with videos and memes. https://www.memoapp.pro/

1. 피드백

1. (반응형 웹) video, img, slide 등 가로세로 비율 유지

• 반응형 웹에 유동적으로 대응가능
  (* 네이버 Career에서도 피드백 받음)
  +추가 피드백 : 원하는 크기로 안나올 경우, img를 한번 더 감싸는 태그(wrap)를 생성하여 padding을 부여하고 그 부모의 크기를 조절하면 됨

  .img-box{
  	position: relative;
      padding-bottom: calc(세로/가로*100%); 
  
  img{
  	position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }

2. swiper-slide의 width

• slide가 가진 width만큼 나옴. css로 조절

  (script)
  const mainSlide = new Swiper('.main-slide', {
  	slidesPerView : 'auto'
  })
  
  (css)
  .swiper-slide{
  	width:auto;
  }

3. 우측 하단 fix된 QR code 회전 효과 (repeat 속성)

• gsap.to를 사용하여 반복되는 회전 효과를 줌
  

• scrollTrigger를 사용하여 스크롤시, 반대 방향 & 더 강한 회전 효과를 줌
  

4. 스크립트 반응형 처리

• matchMedia를 이용하여 분기 설정
  

2. 개선방안

1. position:sticky;

• position:sticky;를 사용하여 스크롤시에도 계속 보이게끔 하는 효과를 줄 수 있음
  

• 부모 범위 내(scroll 박스)에서 고정 (높이가 달라야 함)

• 부모 요소 중에 overflow:hidden, auto, scroll 속성이 있으면 안됨
  

3. 추가 Point

1. 스크롤에 따른 텍스트 색 변화 효과

• 내가 한 방법
  ① 각 p태그(class= "text") 끝에 span태그(background-color)를 추가하여 덮음
  ② 스크립트로 스크롤 할 때마다 span태그의 width를 줄여 가려져 있던 'text'를 오픈
  
  

• 다른 방법 (background-clikp)

  p {
  	background:linear-gradient(to right, rgb(255, 255, 255) 50%,
      		   rgba(255, 255, 255, 0.3) 50%);
  	background-size:200% 100%;
      background-position-x:100%;
      color:transparent;
      background-clip:text;
      -webkit-background-clip:text;
  }

2. 마우스 커서 따라다니는 원 효과

• 내가 한 방법

  	var mouseX = e.pageX;
      var mouseY = e.pageY;
      $('.mouse-circle').css({
      	left: mouseX + "px",
          top: mouseY + "px",
      })

• 다른 방법 (gsap)

  	var mouseX = e.pageX;
      var mouseY = e.pageY;
      gsap.to('.mouse-circle',{
      	left: mouseX,
      	top : mouseY
      })