APPLE iPad 클론코딩

사이트명: 애플 아이패드
제작기간: 4일
사용언어: HTML, SCSS, GSAP, JS
분류: 반응형, 클론코딩

✔️ Main Point

• SCSS
• GRID
• transform
• picture

✏️ Project Review

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

• SCSS

보완사항

• SCSS

picture

❗️ 이전에는 이미지 크기를 분기점마다 직접 수정하며 상당히 수고스러운 작업을 했었다.
애플 사이트는 picture 태그를 이용하여 스타일 변경없이 자동으로 바뀌게 하였고, 학습 후 작업하였다.

<picture>
	<source srcset="./assets/images/1-s.jpg" media="(max-width: 734px)">
	<source srcset="./assets/images/1-m.jpg" media="(max-width: 1068px)">
	<source srcset="./assets/images/1.jpg" media="(min-width: 0px)">
	<img src="./assets/images/1.jpg" alt="Magic Keyboard Folio에 부착된 모습." />
</picture>

VIDEO

❗️ 애플은 우선적으로 동영상이 실행 후 대체 이미지로 변경되는 부분이 있어 작업하였다.

  setInterval(function (e) {
    $.each($(".video-wrap video").not("#dance-video"), function () {
      if ($(this).prop('ended')) { //비디오가 끝나면.
        $(this).parent().addClass('none') //none이라는 클래스로 비디오를 없앤다.
      }
    })
  }, 200);

DESIGN

❗️ 전체적으로 max-width으로 두 부분을 나눈 후,
각각의 이미지를 transform으로 조정하며 디자인을 맞추었다.

  //txt-wrap가 max-width: 245px;
  //img-wrap은 max-width: calc(92% - 245px);로 두고
  //사이 간격 8%.
.txt-wrap {max-width: 245px; margin-left:8%}
.img-wrap {max-width: calc(92% - 245px);}

  //Grid를 이용해서 1:1 비율로 나누어 놓음.
  //grid-template-columns: repeat(2, 1fr);
  //첫번째 이미지는 한줄을 다 차지하게 grid-column: 1 / -1;
  //두번째 세번째 이미지는 공간 비율을 위해 position:absolute로 해서 이미지 크기 무시하며 조정해야함. 

비디오 텍스트 동작

/**
* ~ 전체
* 우선적으로 비디오는 position:sticky
* (1068 이후에만 비디오 존재)
*/
const wityoutxtList = document.querySelectorAll('.sc-withyou .video-txt');
     gsap.set('.sc-withyou .video-txt', { opacity: 0, }) //*우선 투명하게.

     wityoutxtList.forEach(element => { // 각 요소들을 

       const stickyTxt = gsap.timeline({
         scrollTrigger: {
           trigger: element,
           start: "0% 60%",
           end: "100% 50%",
           scrub: 0,
           //markers: true,
         },
         ease: 'none'
       })
       stickyTxt
         .to(element, { opacity: 1 }) //투명해제
         .to(element, { opacity: 0 }) //다시투명하게.

     });