FRONT-END

특정 자식한테 positon: absolute을 주어 자식간에 상호위치를 무너뜨려서 곂쳐 보이게 한다.

backface-visibility:hidden을 적용한 요소의 180도 회전이 된것들(transfrom :rotate(180deg)은 보이지 않게된다.

원근법(더욱 입체화하게 보이게함) perspective는 가장 부모요소에 적용한다.

transition-delay 옵션을 통해 transition이 몇초 동안작동하는것을 떠나 그 transition이 몇초뒤에 시작을 하는지 지연을 정의할수 있다.

[각 요소들이 스크롤에 따라 움직일때 클래스가 삽입되기]

const spyEls = document.querySelectorAll("section.scroll-spy")

spyEls.forEach( function (spyEl) {
  new ScrollMagic
  .Scene({ //감시기능
    triggerElement: spyEl, // 보여짐을 감시한다.
    triggerHook: .8 // 뷰포트 기준 80% 부근에 위 요소가 도달하면 작동
  }) 
  .setClassToggle(spyEl, 'show') //.Scence에서 감시완료된 것 spyeEl에 show클래스를넣음
  .addTo(new ScrollMagic.Controller());
});

[요소별 클래스에 따른 움직임 설정]

*이미 숨겨져 있는 모습을 구현한뒤 특정 클래스 .show가 들어가면 나타나게 설정한다.

.back-to-position{

  opacity: 0;

  transition: 1s;

}

.back-to-position.to-right{

  transform: translateX(-150px);

}

.back-to-position.to-left{

  transform: translateX(150px);

}

.show .back-to-position{

  opacity: 1;

  transform: translateX(0);

}

.show에 딜레이 주기

.show .back-to-position.delay-0{

  transition-delay: 0;

}

.show .back-to-position.delay-1{

  transition-delay: 0.3s;

}

.show .back-to-position.delay-2{

  transition-delay: 0.6s

}

.show .back-to-position.delay-3{

  transition-delay: 0.7s;

}

[youtube iframe api]

// 2. This code loads the IFrame Player API code asynchronously.

      var tag = document.createElement('script'); =>html에 script라는 요소의 변수 tag를 생성

      tag.src = "https://www.youtube.com/iframe_api"; => tag안의 script의 src를 작성

      var firstScriptTag = document.getElementsByTagName('script')[0]; => html에서 script태그들의 0번인 맨처음을 변수 firstScriptTag에 생성

      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); => html에서 firstScriptTag인 script태그의 맨처음의 부모 즉 header의 맨 앞인 firstScriptTag앞에 tag를 삽입 즉, 맨 처음 이 스크립트가 실행되도록 설정하는것

      // 3. This function creates an <iframe> (and YouTube player)

      //    after the API code downloads.

      function onYouTubeIframeAPIReady() {

        new YT.Player('player', { =>html에서 선언한 <div id="player></div>

          videoId: 'M7lc1UVf-VE',

playVars:{autoplay:true, loop:true, playlist:'비디오번호'}, =>재생옵션들(loop는 반복한 playlist로 영상번호가 함께 다시작성 되어야한다.)

          events:{

            onReady: function(event){ => 영상시작 준비가 되면 function 함수작동 / event 는 위 모든 영상 요소들이다.

              event.target.mute();

            }

        });

      }

─────────────────────────────────────────────────────g[gsap로 이미지 반복움직이기]

function floatingObject(selector){

  gsap.to(selector, 1, {

    y:20, //y로 20움직이기

    repeat:-1, //반복횟수로써 -1로할 시 무한반복

    yoyo:true, //1회 끝날시 반대로 되돌림

 //+gsap easing 함수로 부드러운 처리를 할수있다.

 //+delay 로 시작 시간을 조절 할 수 있다.

  });

}

floatingObject('.floating') // 바로 작동시키기

[gsap로 이미지 랜덤 수치로 움직이기]

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 문자 데이터를,
  // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}

특정 행동 시("click") 변수가 바뀌도록 하려면
변수 = ! 변수 로 true, false를 순환하며 작동하도록한다.

요소의 크기를 줄이고 늘리고 할때는 부드러운 작동을 위해 overflow를 히든으로 고정시켜 커지고 작아질때 튀어나온는 부분은 실시간으로 잘려나가게 만든다.

display : flex 사용으로 flex-wrap: wrap을 쓰게되면 적용한 부모크기만큼 내에서 가로로 넘는 요소들은 아래로 내려서 포장한다.

flex-grow 를 써서 1로 값을 적용할시 자기칸에서 쓸수 있는 최대 넓이를 사용한다.

background-color 투명도

background-color: rgba(0,0,0,투명도 0~1);

─────────────────────────────────────────────────────

부모요소의 width은 자식요소의 padding-top의 기준이 된다
자식요소에 padding-top: 50%를 주면 부모요소의 가로 width의 값의 50%가 기준되어 부모요소도 height가 width의 50%가 된다.

css스타일만을 위해(부모16:9) div를 생성해야한다면
생성하지말고 가상선택자::before를 사용해본다. 대신 before에 content:""와 인라인인지 블록인지 모르니 display: block을 선언한다.

16:9 비율 주기

[부모에게]
width:값
[자식에게(::before)]
width:100%
height:0;
padding-top:56.25% (기준은 부모의 width값)