7월11일37일차 - javascript기초시작, rolling letter

javascript를 배우기 시작했습니다. 

기초적인 부분은 이미 알고 있기 때문에 baekjoon을 다시 풀어보며 복습하는 느낌으로 병행하려합니다.

 

회전하는 글자를 구현하는 방법을 통해서 js로 html에 어떻게 정보를 전달하는지 감을 잡을 수 있었습니다.

      const DDD = document.querySelector(".box .ddetail");

      window.addEventListener("scroll", function () {

        let sct = window.scrollY;

        DDD.style.transform = "rotate(" + sct / 2 + "deg)";

      });

스크롤의 높이는 window.scrollY로 구할 수 있습니다.
스크롤의 높이에 맞춰 rotate 하도록 하기 위해서는
style.transform 을 찾고 속성은 "rotate(***deg)" 로 지정합니다. 

 

      function 회전문자(word) {

        const words = [...word].map((el) => "<span>" + el + "</span>").forEach((el) => (DDD.innerHTML += el));
문자열을 span으로 감싼 뒤에

 

        const SPAN = document.querySelectorAll(".box .ddetail span");

span을 선택자로 잡습니다.

 

        SPAN.forEach((el, idx) => {

          SPAN[idx].style.transform = "translateX(-50%) rotate(" + idx * (360 / SPAN.length) + "deg)";
span이 원형이 되도록 각각의 360도를 span index 만큼씩 나누어줍니다. 

        });

      }

      회전문자("This is not a revolver ");